Tutorials

Was sind die Core Web Vitals von Google und warum sind sie so wichtig?

Hast du in Zusammenhang mit der Suche bei Google schon einmal etwas von Core Web Vitals gehört? Dabei handelt es sich um bestimmte Metriken, mit denen Google die User Experience einer Seite messbar machen will. Genau gesagt sind es drei verschiedene Performance-Metriken:

Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)

Im nachfolgenden Blogartikel stellen wir dir die einzelnen Metriken kurz vor und erklären, warum es wichtiger denn je wird, dass deine Website diese Metriken ab (spätestens) Mai 2021 so gut wie möglich erfüllt.

Largest Contentful Paint (LCP)

Frage: Wann ist der Hauptcontent einer Seite sichtbar?
Messung: Ladezeiten

Früher konzentrierte man sich bei Google auf das erste Erscheinen von Content auf einer Website (First Contentful Paint – FCP). Mit den CWW misst Google nun aber, wie viel Zeit vergeht, bis der so genannte Hauptcontent („largest contentful paint„) einer Website im Browser des Nutzers sichtbar wird.

Dabei wird die Zeit zwischen der Anforderung einer Seite (also sobald du eine URL im Browser eingibst und auf ENTER drückst) und dem Erscheinen des Hauptcontents in Sekunden gemessen. Gut sind dabei Werte von unter 2.5 Sekunden – schlecht ist alles über 4 Sekunden. Die Zeit dazwischen wird von Google als „verbesserungswürdig“ bezeichnet.

First Input Delay (FID)

Frage: Wie schnell kann der Nutzer mit einer Seite interagieren?
Messung: Interaktivität

Eine Website muss immer einen bestimmten Nutzen erfüllen. Der Nutzer soll entweder ein Formular ausfüllen, sich für einen Newsletter anmelden, oder einfach nur auf einen Button oder Link klicken. Interaktion steht im Vordergrund einer guten User Experience.

Mit dem First Input Delay misst Google die Zeitspanne zwischen einer Interaktion und dem Zeitpunkt, an dem der Browser auf diese Interaktion reagiert. Gut sind dabei Werte unter 0.1 Sekunden, schlecht über 0.3 Sekunden.

Cumulative Layout Shift (CLS)

Frage: Springen bestimmte Inhalte einer Website während man diese lesen will?
Messung: Visuelle Stabilität

Bei Cumulative Layout Shift (CLS) handelt es sich vermutlich um die abstrakteste Metrik der CWW. Nachdem Webseiten in punkto Seitengröße („pageload“) aufgrund von Videos, Hi-Res-Grafiken etc. immer größer werden, müssen Inhalte im Hintergrund (asynchron) geladen werden, um die Ladezeiten trotzdem so gering wie möglich zu halten. Diese Ladevorgänge müssen in einem System aufeinander abgestimmt sein.

Wenn dies nicht der Fall ist, dann tritt das Phänomen auf, dass Seiteninhalte „springen“. Du hast dies vielleicht schon einmal erlebt, dass du einen Button klicken wolltest und dann im letzten Moment daneben klickst, weil sich die Seite leicht verschiebt. Eine solche Seite hat eine schlechte visuelle Stabilität.

Google misst dabei, wie häufig bereits sichtbare Elemente verschoben werden und gewichtet dies nach Ausprägung. Ein guter Wert liegt hier unter 0.1, ein schlechter Wert über 0.25.

Wie misst Google die Core Web Vitals?

Zunächst muss man zwischen zwei Mess-Methoden unterscheiden: Labor-Daten (lab data) und Feld-Daten (field data).

Dir ist in der Google Search Console sicher schon einmal der Menüpunkt „Core Web Vitals“ unter Verbesserungen aufgefallen. Hier werden die Erfahrungsdaten von Nutzern des Google Chrome Browsers verwendet, um URLs einer Website als schlecht, zu optimierend oder gut zu klassifizieren – dabei handelt es sich um field data.

Labor-Daten haben hingegen den Vorteil, dass sie auf Basis von Google Lighthouse basieren, reproduzierbar sind und daher immer das gleiche Ergebnis liefern, falls man nichts an den Ausgangsbedingungen ändert. Die lab data eignen sich daher zur kontinuierlichen Verbesserung der eigenen Website. Die nachfolgenden Werte (von monobunt.at) stammen von https://www.webpagetest.org/.

Auch bei Google PageSpeed Insights sind LCP, FID und CLS seit geraumer Zeit schon Bestandteil der Bewertung der Schnelligkeit einer Website.

Auf der Seite https://web.dev/vitals-tools/ hat Google außerdem eine Übersicht erstellt, welche Metriken mit welchen Tools gemessen werden können.

Core Web Vitals werden ab Mai 2021 zum Rankingfaktor

In der Vergangenheit habe ich schon öfters über Seitengeschwindigkeit als SEO-Rankingfaktor geschrieben. Beispielsweise, warum es wichtig ist, dass HTTP/2 auf deinem Server läuft. Mitte November hat Google nun offiziell verkündet, dass die Experience Signals (LCP, FID, CLS) ab Mai 2021 ein Ranking-Signal werden.

We're announcing that page experience ranking signals for Google Search will launch in May 2021. This will combine Core Web Vitals and previous UX-related signals.

Learn more: https://t.co/OrrR8LDl1a

— Google Search Central (@googlesearchc) November 10, 2020

Was heißt dies konkret: Seiten, welche die CWW erfüllen, werden in den SERPs gekennzeichnet werden und damit vermutlich auch besser ranken als Seiten mit schlechteren CWW.

Visual indicators on the results are another way to do the same, and we are working on one that identifies pages that have met all of the page experience criteria.

Allerdings gibt es noch kein konkretes Beispiel, wie dies aussehen wird, man darf sich also überraschen lassen.

Core Web Vitals mit MONOBUNT verbessern

Google hat auf https://web.dev/vitals/ eine umfassende Dokumentation rund um die CWW mit vielen Bildern, Animationen und Beispielen online gestellt.

Wenn du ab Mai 2021 aufgrund schlechter Core Web Vitals nicht hinter deine Konkurrenz zurückfallen willst, ist es höchste Zeit für den ersten Schritt. Denn gerade für größere oder komplexere Webseiten ist ein halbes Jahr nicht so viel, wie dies eventuell klingen mag.

Wir bei MONOBUNT helfen dir dabei, deine individuellen Anforderungen bestmöglich umsetzen zu können. Unsere WordPress-Entwickler wissen, welche Aktionen bzw. Ausgangsbedingungen angepasst werden müssen, um die dahinterliegenden CWW zu verbessern.

Denn gerade bei Performance-Optimierung kann nicht starr nach Schema F vorgegangen werden, weil (fast) jede Seite einzigartig ist und daher verschiedenen Basisparametern unterliegt: Server, Hardware und Software am Server, PHP-Version am Server, verwendetes CMS, verwendete Plugins und Skripte uvm.

Optimierung von WordPress Webseiten

MONOBUNT ist ins Besondere auf die Optimierung der Core Web Vitals bei WordPress bzw. WooCommerce-Seiten spezialisiert. Wir haben die Vorteile des WordPress-CMS und warum wir es bei den meisten Projekten verwenden schon in einigen Blogartikeln vorgestellt. Eine Optimierung hat grundsätzlich nachfolgenden Ablauf:

Im ersten Schritt analysieren wir den Status Quo deiner Webseite.
Im zweiten Schritt besprechen wir die vorgeschlagenen Maßnahmen mit dir und definieren einen Maßnahmen- bzw. Umsetzungsplan.
Anschließend werden die Optimierungen technisch umgesetzt und im letzten Schritt getestet.

Du willst die Vitalfaktoren deiner Website verbessern? Dann kontaktiere uns noch heute (gerne auch telefonisch) und wir erstellen dir ein maßgeschneidertes Konzept zur Optimierung deiner Core Web Vitals!

4. Dezember 2020/1 Kommentar/von Gerald

Was ist ein Screendesign und worauf muss ich achten?

Tutorials

MONOBUNT darf deine neue Website oder deinen neuen Webshop umsetzen? Dann schon mal vielen Dank für dein Vertrauen! Nun, da es los gehen kann: im Ablauf eines Webprojekts (so die globale Bezeichnung für das, was wir machen) gibt es immer mehrere Schritte, welche fast immer nach dem gleichen Schema ablaufen.

Der Ablauf eines Webprojekts

Im 1. Schritt beantwortest du unseren Fragebogen und übermittelst uns alle deine Wünsche im Projekt-Kickoff.
Im 2. Schritt beginnen wir mit der Projektumsetzung. Diese beginnt in den meisten Projekten mit der Erstellung einer Designvorlage.
So bald dieses so genannte Screendesign von dir freigegeben ist, machen sich unsere Entwickler im 3. Schritt an die Arbeit und erledigen den technischen Part deines Projekts.
Im 4. und letzten Schritt werden Einstellungen im CMS getätigt, Content (Bilder/Texte) befüllt, alles nochmal auf verschiedenen Geräten getestet und dann erfolgt das Go-Live (= der Produktivbetrieb).

Ausgangsbedingungen für ein Screendesign

In diesem Blogartikel gehen wir speziell auf den 2. Schritt ein, weil er erfahrungsgemäß fast immer die meisten Fragen aufwirft:

Ein Screendesign ist die Gestaltung der grafischen Benutzeroberfläche einer Webseite, eines Webshops oder einer App.

Im Fokus steht dabei die Anordnung der Elemente, welche auf einem Bildschirm zu sehen sind – egal ob dies nun ein PC/Notebook, ein Tablet oder ein Smartphone ist. Das bedeutet, dass man in einem Screendesign definiert, wo sich verschiedene Elemente wie Navigation, Überschriften (inkl. Zwischenüberschriften), Texte, Bilder, Videos und andere Inhalte des GUI (Graphical User Interface – auf Deutsch Benutzeroberfläche) befinden.

Deswegen klären wir im 1. Schritt eines Projekts auch so viele Ausgangsbedingungen wie möglich mit dir ab:

Existiert eventuell bereits ein CD (Corporate Design) oder ein Styleguide?
Welche Webseiten – in deiner Branche oder allgemein – gefallen dir?
Gibt es Elemente oder Effekte auf bestimmten Webseiten, welche dir besonders gefallen?
Gibt es Wünsche hinsichtlich Schriftarten, Komplementärfarben, etc.?

Grafik via https://de.wikipedia.org/wiki/Styleguide#/media/Datei:GiraffeProjectStandardsManual.png

Diese Informationen werden dann vom jeweiligen Projektmanager an den zuständigen Webdesigner weitergegeben. Dieser muss darauf achten, dass ein Screendesign verschiedene Bedingungen erfüllt: es muss nicht nur deinen (optischen) Ansprüchen entsprechen, sondern auch vom Webentwickler mit dem gewählten CMS (z.B. WordPress, Magento 2, TYPO3) technisch umsetzbar sein (HTML, CSS, PHP, JavaScript).

UX und UI spielen eine große Rolle

Neben deinen Vorgaben und technischen Faktoren muss ein Screendesign auch die Anforderungen an psychologische Faktoren erfüllen. Im Zentrum eines Screendesigns steht nämlich immer der zukünftige Nutzer bzw. die zukünftige Zielgruppe. Zielt dein Produkt oder deine Dienstleistung auf eine junge Zielgruppe (z.B. 14-29) ab, dann schaut ein Screendesign im Normalfall fast immer anders aus, als wenn deine Zielgruppe etwa im Alter von 65+ angesiedelt ist.

Ein Screendesign hat also einen enormen Stellenwert hinsichtlich der Usability, welche aus User Experience (UX) und User Interaction (UI) besteht. Je genauer man bestimmte Funktionen in einem DS definiert, desto leichter kann der Developer auch die technische Umsetzung gestalten. Und desto besser findet sich auch der Endnutzer mit dieser Funktion zurecht. Aber nochmal zur Wiederholung: die Funktionen selber setzt man in einem Screendesign nicht um, sondern nur das Layout.

(c) Bild UX Collective – https://uxdesign.cc/why-ux-and-ui-should-remain-separate-7d6e3addb46f

Erfolgsfaktoren von guten Screendesigns

Dass ein Screendesign sich stets responsiv verhält, erwähnen wir nicht mehr extra. Dies ist bereits seit vielen Jahren state-of-the-art und kennen wir auch gar nicht mehr anders. Deine Unternehmensidentität (Corporate Identity) muss bestmöglich hinsichtlich Stimmung und Ästhetik widergespiegelt werden. Du musst wie bereits erwähnt deine Zielgruppe kennen und diese muss richtig über Bildsprache, Navigation und die Call-to-action Elemente angesprochen werden.

Ein gutes Screendesign ist schlichtweg essentiell für eine erfolgreiche Website oder einen erfolgreichen Webshop. Deswegen solltest du dir hier auch immer viel Zeit für das Feedback nehmen. Bestimmte Elemente können zwar im Nachhinein immer noch geändert werden, dies kann aber mitunter zu einem unrunden Gesamtbild führen.

Klickdummys mit Figma

Wir verwenden für die Umsetzung von Screendesigns ein Tool namens Figma. Dieses Tool bringt Funktionen mit sich, welche über die klassische statische Screendesign-Entwicklung (z.B. in Adobe Photoshop oder Adobe InDesign) hinausgehen. Mit Figma kann man nämlich einen so genannten Klickdummy erstellen.

Das bedeutet, dass ein Button in einem Screendesign zum Beispiel nicht nur rechteckig an der vorgesehen Position angelegt wird und mit einem Call-to-action beschriftet wird, sondern auch auf eine andere Seite innerhalb des Klickdummys weiterleiten kann – ganz wie bei einer echten Website. Damit bekommst du schon während der Phase des Screendesigns mehr Gefühl für den zukünftigen Flow deines Webprojekts. Aber Achtung: du darfst den Klickdummy trotz dieser Zusatzfunktionen zu keinem Zeitpunkt mit einer fertigen Website vergleichen oder verwechseln.

Exkurs: Unterschied Wireframe – Mockup – Prototyp

Wireframe, Mockup und Prototyp sind weitere Begriffe, welche im Screendesign-Prozess fallen können. Bei einem Wireframe handelt es sich um eine statische Darstellungsform, welche meistens zur Dokumentation eines Projekts verwendet wird. Mockups werden auf Grundlage eines Wireframes erstellt und sind viel detaillierter. Ein Prototyp ist dann sozusagen die letzte Stufe Evolution, da hier (auf Basis von HTML/CSS/JS) auch bereits Interaktionen durchgeführt werden.

Grafik (c) https://www.mockplus.com/blog/post/wireframe-mockup-prototype-selection-of-prototyping-tools

Zusammenfassung

Wenn wir ein Screendesign für dich erstellen (egal ob jetzt in Figma oder woanders) und es in die Feedbackrunden geht, benötigen wir folgendes Feedback von dir:

Wurden deine Vorgaben hinsichtlich Optik, Farben und Formen wie gewünscht umgesetzt (Look-and-feel)?
Finden sich alle gewünschten Elemente in der Hauptnavigation, im Footer und auf der Seite an sich wieder?

Im Gegensatz dazu ist folgendes Feedback während einer Feedbackschleife irrelevant bzw. nicht nützlich:

(Blind-)Texte die noch nicht vollständig oder falsch (z.B. Tippfehler) sind
Bilder die vielleicht noch nicht final sind und wir eventuell als Platzhalter verwenden

Ebenso werden technische Anforderungen erst während des Web-Developments umgesetzt. Dazu gehören:

Technische Funktionen wie etwa das Abschicken eines Formulars, die Eingabe von Benutzerdaten in einem Checkout uvm.
Optisch-technische Funktionen wie etwa Parallax-Effekt beim Scrollen
Finale Verlinkungen von Buttons, Bildern und Texten

Du hast Lust auf ein Webprojekt inkl. Screendesign bekommen? Dann kontaktiere uns am besten noch heute. Wir freuen uns auf deine Anforderungen!

30. November 2020/0 Kommentare/von Gerald

Internen Traffic mit Google Tag Manager aus Google Analytics ausschließen

Tutorials

tl;dr: Ich zeige dir, wie du mit nur wenigen Schritten durch die Verwendung von Google Tag Manager deine internen Zugriffe auf deiner WordPress/WooCommerce-Seite von Google Analytics ausschließen kannst.

Lesezeit: ca. 10 Minuten
Letztes Update: April 2020

Fast alle von euch verwenden vermutlich Google Analytics auf eurer Website oder in eurem Webshop. GA ist grundsätzlich ein wunderbares Tool, welches perfekt mit Google Data Studio und Google Tag Manager zusammen funktioniert. Die Besucherzahlen sind jedoch stets mit Vorsicht zu genießen.

Nutzer können sich beispielsweise vom GA-Tracking abmelden, einen Browser-basierten Blocker wie Ghostify verwenden oder die Verwendung von GA im Cookie-Banner abwählen. Diese Gegebenheiten kann man als Betreiber einer Website nur sehr bedingt beeinflussen und die Zugriffe dieser Personen werden in GA auch nicht angeführt.

DSGVO macht IP-Filter unwirksam

Was man allerdings selber beeinflussen sollte, ist der aktive Ausschluss von eigenen Mitarbeitern und Angestellten aus den Zugriffszahlen in Google Analytics. Dies war früher ganz einfach. Man musste nur in der Verwaltung von GA einen IP-Filter anlegen und die statische IP des Unternehmens vom Tracking ausschließen. Natürlich nie in der Datenansicht „Alle Websitedaten“, sondern in einer anderen Datenansicht die man beispielsweise „Masteransicht“ nennt.

Diese Vorgehensweise ist jedoch spätestens seit dem 25. Mai 2018 nicht mehr möglich. Schuld daran ist – wie könnte es auch anders sein – die DSGVO. Seit nunmehr knapp zwei Jahren wird die IP eines Nutzers nämlich als personenbezogene Daten eingestuft. Damit ist sie etwa dem Namen, einer E-Mailadresse oder einer Telefonnummer gleich gestellt. Daher solltest du wirklich immer überprüfen (lassen), ob bei dir in der Website verbauten GA-Property die so genannte IP Anonymisierung aktiviert wurde.

IP Anonymisierung in Google Tag Manager

Falls die Zugriffsdaten deiner Website noch nicht IP-anonymisiert nach GA übertragen werden (die Abkürzung dafür ist auch als „aip=1“ bekannt), kannst du dies mit folgender Einstellung im Google Tag Manager Container erledigen. Dazu die bestehende GA-Settings-Variable editieren und dann bei den „Zu setzenden Feldern“ zunächst „anonymizeIp“ und als Wert „true“ eintragen.

Sobald die IP-Anonymisierung aktiviert ist, wird die letzte Stelle einer so genannten IPv4 Adresse vor der Übertragung nach GA herausgefiltert. Damit wird die volle IP auch gar nie in die GA Datenbank übermittelt. Dies macht deine GA-Einstellungen DSGVO-konform. Bildlich dargestellt würde dies in etwa so aussehen:

Wenn du nun glaubst, dass drei Stellen (der so genannte Netzwerkanteil) noch immer ausreichend für eine Zuordnung sein könnten, dann kann ich dich beruigen. Wenn du nicht gerade bei Google, Microsoft, Apple oder einem anderen Internetgiganten arbeitest, dann hast du mit 99.9%iger Wahrscheinlichkeit keinen eigenen Hostanteil (also die vierte Stelle der IP-Adresse) für dich alleine. Somit kannst du mit dieser IP in etwa so viel anfangen wie mit eine Mailadresse namens [email protected]

Internen Traffic über GTM herausfiltern

Wie kann man dieses Dilemma so einfach wie möglich lösen? Wie in vielen Fällen erledigen wir das mit einer Kombination aus dem Google Tag Manager for WordPress Plugin (GTM4WP) von DuracellTomi und dem Google Tag Manager. Dazu gehst du im GTM4WP-Plugin nach der Installation und dem Eintragen deiner GTM-Container-ID im ersten Schritt auf Basic Data > Visitors. Dort hakst du dann die Option „Logged in user role“ an.

Dieses Anhaken sorgt dafür, dass bei jedem Website-Besucher die WordPress-interne Benutzerrolle über den so genannten dataLayer mitgeschickt wird. Dies kannst du austesten, indem du im Google Tag Manager auf den Preview-Modus schaltest und dann deine Website neu lädst. Wenn du (wie ich auf dem nachfolgenden Screenshot) als Admin eingeloggt bist, dann hast du unter „visitorType“ einen Wert wie beispielsweise „administrator“.

Um diesen Wert allerdings aus dem dataLayer herauszubekommen und nach GTM bzw. GA übertragen zu können, musst du noch zwei Dinge erledigen.

Anlegen einer DLV und Änderung des GA-PageView-Triggers

Zunächst gehst du im GTM zu den Variablen und erstellst eine neue Variable vom Typ „Data Layer Variable“. Beim Namen der Variable ist es wichtig, dass du diese exakt wie am oberen Screenshot ersichtlich benennst, also visitorType. Würdest du die Variable beispielsweise visitortype, Visitortype oder VisitorType benennen, dann funktioniert das Scrapen der Variable aus dem dataLayer nicht – Groß- bzw. Kleinschreibung ist hier fundamental.

Ich benenne eine Data Layer Variable immer mit dem Kürzel „dlv“ und anschließend dem Wert, also in diesem Fall „visitorType“. Du kannst dies natürlich auch gemäß deiner eigenen Vorgehensweise erledigen. Nach dem dem Scrapen der DLV aus dem dataLayer hast du jetzt noch den letzten Schritt vor dir.

Denn du willst infolgedessen, dass alle WP-Nutzer mit dem Status „administrator“ nicht von Google Analytics getrackt werden. Deswegen musst du im finalen Schritt noch deinen Trigger editieren, welchen du deinem Google Analytics PageView Tag zugeordnet hast.

Wenn du als Standardtrigger „Alle Seiten“ eingestellt hast, dann ändere die Einstellung auf „Einige Seiten“. Zunächst wählst du die zuvor angelegte DLV aus, anschließend „ist nicht gleich“ als Bedingung und letztendlich schreibst du den gewünschten Userstatus (wie in unserem Fall „administrator“ – auch hier ist die richtige Groß- bzw. Kleinschreibung wichtig) in die dritte Spalte.

Testen des Setups im GTM-Preview-Modus

Anschließend kannst du den veränderten Trigger abspeichern und die Funktionsweise testen. Dazu einfach den Preview-Modus refreshen, die Website öffnen und schauen, ob dein PageView-Tag abgefeuert wurde. In unserem Beispiel ist dies nicht der Fall.

Nun kannst bzw. sollst du noch überprüfen, wieso dies der Fall ist. Dies kannst du herausfinden, indem du auf das Tag klickst und anschließend nach unten scrollst. Wenn bei „Firing Triggers“ein rotes [x] angeführt ist, dann hast du alles richtig gemacht. Das GA-PageView-Tag wird nicht abgefeuert, weil dein Status „administrator“ ist.

Wenn du dich jetzt aus deiner Website ausloggst und den GTM-Preview-Modus sowie deine Website neu lädst, kannst du den Gegenbeweis testen. Nun sollte anstatt des roten [x] ein grüner Haken angezeigt werden und das Tag dementsprechend abgefeuert werden – dein PageView wird damit nach GA übertragen.

Zusammenfassung und Ausblick

Das Herausfiltern von internen Benutzern aus Google Analytics mithilfe des Tag Managers ist eine schnelle und einfache Methode, um dein Datenmaterial zu verfeinern. Diese Methode erfordert keine wirklich vertiefenden technischen Kenntnisse. Jedoch wird es deine Anforderungen leider auch nicht vollständig lösen. Wenn du beispielsweise irgendwann einmal nicht in der Website eingeloggt bist, oder einen anderen Browser verwendest oder von daheim aus auf die Seite surfst, dann wird das PageView-Tag stets ausgelöst werden.

Dies ist für Mitarbeiter bzw. unternehmensinterne Personen, welche die Website nur unregelmäßig besuchen, auch kein riesengroßes Problem. Für alle Personen, die allerdings täglich (mehrmals) auf der Website unterwegs sind und Inhalte pflegen, werden aufgrund ihres Login-Status nunmehr nicht mehr getrackt. Das Zahlenmaterial in Analytics hat nun deutlich mehr Aussagekraft, vor allem wenn du eher wenig(er) Traffic auf der Seite hast.

23. April 2020/2 Kommentare/von Gerald

API Key für Google Maps erstellen

Online Marketing, Tutorials

Stand: 12. November 2019
Lesezeit: 7-10 Minuten
Umsetzungszeit: ca. 30 Minuten

Früher war die Einbindung einer Google Map in eine Website ziemlich einfach. In den meisten Content Management System (wie WordPress, Joomla, TYPO3 oder Drupal) musste man lediglich ein Plugin oder eine Extension installieren und die Koordinaten eintragen – schon wurde die Karte mitsamt Marker wenige Sekunden später im Frontend angezeigt.

Seit geraumer Zeit ist dies nicht mehr so einfach möglich, man benötigt nämlich nun einen API Key für Google Maps, um sich eine Karte auf seiner Website anzeigen zu lassen. Ohne diesen API-Schlüssel (API steht übrigens für application programming interface) wird folgende Fehlermeldung angezeigt:

Öffnest du die Entwicklertools in deinem Browser (Rechtsklick in den Seitenbereich > Untersuchen) dann wirst du in der Konsole einen Fehler dieser Art in roter Schriftfarbe erblicken:

Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://example.com/kontakt/

Wie du diesen Fehler beheben kannst, sodass die Karte auf deiner Website korrekt angezeigt wird, erkläre ich dir in dem nachfolgenden Tutorial. Es gibt eine Vielzahl an Fehlermöglichkeiten. In unserem Fall ist die URL nicht für die Verwendung des API Schlüssels autorisiert.

Google Maps API Key anlegen

Schritt 1) Wenn du bereits ein Konto bei Google hast, kannst du diesen Schritt überspringen. Ansonsten musst du einen Account bei Google erstellen.

Schritt 2) Gehe anschließend zur Google Cloud Platform. Diese findest du unter https://cloud.google.com/. Du kannst allerdings auch gleich direkt zur Maps Platform gehen, indem du die Seite https://cloud.google.com/maps-platform/ öffnest.

Schritt 3) Dort wählst du den Typ „Maps“ aus und klickst auf „Weiter“. Im nächsten Schritt musst du ein Projekt anlegen. Dieses nennst du am besten entsprechend deiner Domain „example.com“ und klickst anschließend auf den nächsten Schritt.

Schritt 4) Im letzten Schritt musst du ein Rechnungskonto erstellen. Es ist nicht möglich, einen Maps API-Key zu erstellen, ohne deine Kreditkartendaten oder Kontodaten in der Google Cloud Platform zu hinterlegen. Führe die diesbezüglichen Schritte (Landesauswahl, Akzeptieren der Nutzungsbedingungen, Angabe der Kontaktdaten und Zahlungsdaten) durch. Du erhältst von Google auch ein Guthaben über 300 US-Dollar für die ersten 12 Monate. Nach Ablauf des Testzeitraums musst du dein Konto manuell in ein kostenpflichtiges Konto umwandeln.

Es ist übrigens unwahrscheinlich, dass für dich jemals echte Kosten anfallen werden. Denn das Guthaben deckt z.B. den Aufruf von 100.000 statischen Karten ab. Nur falls dein Geschäftsmodell ohne den permanenten Einsatz einer Karte nicht auskommen sollte, musst du dir über diese Begrenzungen zu einem späteren Zeitpunkt Gedanken machen, es kann sonst bei der Kreditkartenabrechnung zu unliebsamen Überraschungen kommen. Eine Übersicht über alle Preise findest du unter https://cloud.google.com/maps-platform/pricing/sheet/.

Verwaltung deines Projekts in der Maps Platform

Sobald du dein Konto angelegt hast, kannst du dein Projekt unter https://console.cloud.google.com/google/maps-apis/overview verwalten. Du kannst auch ein weiteres Projekt anlegen, beispielsweise wenn du mehrere (unterschiedliche) Seiten verwaltest oder deine Keys separat verwalten und auswerten willst.

API Schlüssel anlegen

Klicke dazu auf das Hamburger-Icon auf der linken Seite und navigiere anschließend über APIs & Dienste zum Punkt „Anmeldedaten“.

Dort klickst du anschließend auf „Anmeldedaten erstellen“ und wählst den ersten Punkt „API Schlüssel“ aus. Sobald du auf „API Schlüssel“ klickst, wird dieser erstellt und angezeigt. Diesen Key kannst du in die Zwischenablage (am besten in Texteditor-File) kopieren, weil du ihn später für das Hinterlegen auf deiner Website brauchst.

API Schlüssel einschränken

Um den Schlüssel einzuschränken (das solltest du unbedingt machen, weil dein Key ansonsten missbraucht werden kann) klickst du auf „SCHLÜSSEL EINSCHRÄNKEN“. Anschließend gelangst du zur Übersichtsseite deines API Schlüssels (nachfolgender Screenshot):

Schritt 1) Zuerst gibst du deinem Key einen Namen (oben links). Verwende hier am besten wieder die Domain deiner Website, wo du den API Key verwenden wirst. So behältst du die Übersicht, falls du verschiedene Projekte und/oder verschiedene API Keys einsetzt.

Schritt 2) Anschließend kannst du bei ANWENDUNGSEINSCHRÄNKUNGEN einen HTTP-Verweis oder eine IP-Adresse hinterlegen. Damit stellst du sicher, dass der API Key nur auf deiner Seite verwendet werden kann. Bei der Auswahlmöglichkeit HTTP-Verweis-URLs (Websites) kannst du darunter durch Klick auf HINZUFÜGEN deine Domain eingeben. Das empfohlene Format findest du auf der rechten Seite. Gib dazu einfach deine Domain im Format *.example.com/* ein, wenn du willst dass der Key auf allen Unterseiten deiner Website verwendet werden kann.

Ich würde dir nicht empfehlen, eine absolute URL (z.B. https://www.example.com/kontakt) einzugeben, weil du dich damit zu sehr einschränkt. In meinem Beispiel würde der API Key beispielsweise nicht funktionieren, wenn jemand auf https://www.example.com/kontakt/ gelangt (dies verhindert der „/“ am Ende der URL).

Schritt 2a) Wenn du die IP deines Servers kennst (beispielsweise kannst du diese mit der Chrome-Erweiterung von DNSlytics erfahren), kannst du auch die Auswahlmöglichkeit IP-Adressen verwenden. Achtung: solltest du deinen Serveranbieter zu irgendeinem Zeitpunkt wechseln, dann hast du eine neue Server-IP und musst diese IP-Einstellung dementsprechend aktualisieren.

Sobald du alle Einstellungen getätigt hast, kannst du links unten auf SPEICHERN klicken. There you go: dein API-Key mit HTTP- oder IP-Einschränkung ist angelegt.

API Schlüssel in der Website hinterlegen

Du hast deinen API Key hoffentlich noch bei der Hand. Wenn du ihn vorher nicht gespeichert hast, kannst du ihn auch jederzeit aus der Projekt-Übersicht kopieren. Anschließend navigierst du ins Backend deiner Website. Wenn du eine WordPress-Seite hast, bindest du deine Karte am besten mit einem Plugin oder direkt über deine Theme ein.

Im beliebten Divi Builder kannst du dies etwa unter Divi > Theme-Optionen und dann bei „Google-API-Schlüssel“ hinterlegen. Einfach den Key reinkopieren, abspeichern, fertig.

Über ein generisches Plugin (wie etwa WP Google Maps) ist es genau so einfach, einfach nach dem Eintrag für „Google Maps API Schlüssel“ oder „Google Maps API Key“ suchen und deinen Key einfügen. Anschließend kann es 5-15 Minuten dauern, bis die Verbindung zwischen Website und der Google Cloud Platform hergestellt ist und Google die Info erhält, dass der Key gültig ist. Ab diesem Zeitpunkt wird die Karte korrekt in deinem Frontend angezeigt und etawaige Fehler sollten aus der Konsole verschwunden sein.

DSGVO bzw. Cookie-Richtlinie und Google Maps

Sobald du eine Google Map in deiner Website eingebunden hast, kommuniziert dein Browser jedes Mal direkt mit dem Google-Server, sobald du die betreffende Seite öffnest. Daher ist es dringend empfohlen, einen Hinweis über die Verwendung von Google Maps in die Datenschutzerklärung einzubinden. Gemäß Datenschutzgrundverordnung (DSGVO) ist dies immer dann notwendig, wenn der Browser eine Verbindung zu einem Drittanbieter (in diesem Fall Google Maps) herstellt. Einen kostenlosen Datenschutzgenerator für den betreffenden Text findest du etwa auf der Website des bekannten Datenschutzexperten Dr. Schwenke aus Berlin.

Außerdem solltest du deine Karte erst dann laden/anzeigen (lassen), sobald diese jemand aktiv „entsperrt“. Eine technische Lösung dazu findest du direkt per Mausklick in vielen bekannten Themes (wie etwa Enfold) oder aber auch über ein (kostenpflichtiges) Cookie-Plugin wie etwa Borlabs Cookie oder GDPR Cookie Consent Plugin. Diese enthalten im Funktionsumfang auch einen Content-Blocker. Dieser blockiert (auf Wunsch) beim Öffnen der Seite alle Cookies von Drittanbietern. Neben Google Maps ist zum Beispiel auch YouTube ein beliebter Anwendungsfall. Erst wenn der Nutzer sein aktives OK gibt, wird der entsprechende Content geladen.

Zusammenfassung

Es war schon einmal (viel) einfacher, eine Landkarte in die eigene Website einzubinden. Doch mit der oben stehenden Anleitung schaffst du es hoffentlich auch ohne technischen Support, einen Google Maps API Key anzulegen und in deine Website einzubinden. Wenn du aber doch weitere Fragen hinsichtlich der DSGVO-optimierten Einbindung von Google Maps auf deiner Website hast, dann kontaktiere uns am besten noch heute. Wir beraten dich gerne, wie du Content von Drittanbietern (Google Maps, YouTube, Vimeo usw.) gesetzeskonform einbindest und teure Abmahnungen vermeiden kannst.

Quelle Titelbild: pexels.com

12. November 2019/2 Kommentare/von Gerald

Conversion Tracking mit dem Google Tag Manager

Online Marketing, Tutorials

tl;dr: In diesem Tutorial legen wir eine Conversion-Aktion in Google Ads an. Anschließend richten wir das dazu gehörige Conversion Tracking im Google Tag Manager ein. Dabei legen wir ein Tag mit drei verschiedenen Triggern an: einmal mit Page View (Danke-Seite), einmal mit Element Visibility (Erfolgsmeldung auf der gleichen Seite) und einmal mit Custom Event (speziell für Contact Form 7).

Update: November 2019
Lesedauer: 7-10 Minuten

E-Commerce muss immer messbar und nachvollziehbar sein. Du solltest für alle deine Online Marketing Ausgaben immer genau wissen (wollen), wie sich dein ROI (Return On Investment) bzw. ROAS (Return On Advertising Spend) entwickelt.

Diesbezüglich ist das Setup von Conversion-Tracking (für Google Ads und auch alle anderen OM-Plattformen) unerlässlich. Mit dem Google Ads Conversion Tracking lassen sich beliebige Conversions (z.B. das Abschicken eines Kontaktformulars oder der Kauf eines Produkts in einem Webshop) ganz einfach tracken und die Daten anschließend in Google Analytics analysieren und auswerten.

Conversion in Google Ads anlegen

Eine Conversion kann man direkt in Google Ads definieren. Zuerst benötigt man einen Conversion-ID und ein Conversion-Label. Diese beiden Codes erhält man, indem man in Google Ads auf Tools & Einstellungen > Conversions geht und anschließend per Klick auf den blauen Button eine neue Conversion erstellt.

Kategorie: hier sollte man die zu erfassende Aktion definieren. In einem Webshop wird es sich um einen „Kauf“ handeln. Will man eine Newsletter-Anmeldung tracken, dann ist „Anmeldung“ die passendere Auswahl. Bei einem klassischen Kontaktformular ist es der „Lead“.
Conversion-Name: hier am besten einen eindeutigen Namen vergehen. Wenn man verschiedene Conversions in einem Konto erstellt, dann droht ansonsten Verwechslungsgefahr.

Wert: in einem Webshop macht es Sinn, die Werte direkt aus dem dataLayer deines Shops zu übernehmen. Wie dies funktioniert, findest du in unserem E-Commerce Tracking Tutorial. Wenn keine Werte übergeben werden (wie z.B. bei einer Newsletteranmeldung), dann kannst du fixe Werte definieren (oder auch keine Werte definieren)
Zählmethode: der Text am Screenshot sagt alles – bei Käufen sollen alle Conversions gezählt werden, bei anderen Aktionen macht dies keinen Sinn.
Conversion-Tracking-Zeitraum: wie lange soll etwas als Conversion gelten? Hier kannst du Werte von 30-90 Tage auswählen.
Attributionsmodell: kleines Beispiel: es gibt Menschen, die auf eine Anzeige klicken, auf deine Seite kommen, aber keine Aktion durchführen. Wenige Tage später kommen sie dann direkt auf die Seite und führen die Aktion durch. Kannst du diese Aktion dann noch der Google Ads Anzeige zuweisen? Ja! Bei der Attribution wählst du ein passendes Modell aus (ich wähle am liebsten „Zeitverlauf“) welches hinten hinaus den Erfolg oder Misserfolg deiner Kampagne stark beeinflussen kann.

Hast du deine Conversion nun fertig konfiguriert, dann kannst du damit ein Tag im Google Tag Manager anlegen. Dazu ganz unten auf der Seite einfach – nomen est omen – die Methode „Tag mit Google Tag Manager einfügen“ auswählen.

Du bekommst anschließend deine Conversion-ID (z.B. 123456789) und dein Conversion-Label (z:B. fAZvBDf30nkQyvqvigM), welche du dir z.B. in einem Text-Editor abspeicherst.

Conversion Tracking Tag in Google Tag Manager anlegen

Im ersten Schritt in der Oberfläche des GTM gehst du zu „Tags“ und legst ein neues Tag an. Der richtige Tag-Typ ist „Google Ads Conversion Tracking“.

Bei Conversion ID kannst du nun deine abgespeicherte ID einsetzen, bei Conversion Label das dazu gehörige Label.

Conversion Tracking mit Danke-Seite (Page View)

Als Trigger (auf Deutsch übersetzt ein „Auslöser“) kannst du den Aufruf einer bestimmten Seite angeben. Wenn du deine Nutzer bei der Anmeldung eines Newsletters oder beim Abschicken eines Formulars auf eine so genannte „Danke-Seite“ weiter leitest, dann ist der passende Trigger relativ einfach und schnell angelegt:

Hierzu einfach die Methode „Page View“ (Seitenaufruf) auswählen und dann den passenden Pfad hinzufügen. In unserem Fall würde das Conversion-Tracking-Tag jedes mal abgefeuert werden, wenn jemand eine Unterseite meiner Website besucht, welche im Pfad /danke-seite/ beinhält. Also domain.com/newsletter/danke-seite/ genau so wie domain.com/kontakt/danke-seite/. Soll die Conversion spezifischer sein, dann musst du lediglich den Pfad spezifischer angeben. In diesem Fall /newsletter/danke-seite/ statt nur /danke-seite/.

Conversion Tracking ohne Danke-Seite (Element Visibility)

Nicht immer hat man einen Webshop oder eine Webseite, wo man jeden Seitenzugriff tracken kann. Mittlerweile gibt es auch viele Formulare, auf denen die Erfolgsmeldung direkt auf der gleichen Seite angezeigt wird. Dies könnte beispielsweise so aussehen (wie im Kontaktformular von monobunt.at):

Hier ist das Tracking schon etwas komplexer, dazu musst du nämlich einen so genannten Element Visibility Trigger anlegen. Wenn du die obere Zeile mit den Developer Tools untersuchst, dann musst du Ausschau nach dem dazu passenden CSS Selector halten. Dieser heißt in unserem Fall wpcf7-mail-sent-ok und stammt vom beliebten WordPress Plugin Contact Form 7.

Wie du den konkreten Selector auf deiner Seite herausfinden kannst, würde an dieser Stelle zu komplex werden. Frag‘ am besten jemanden, der sich mit CSS und den Developer Tools auskennt. Wenn du den richtigen Selector hast, dann kannst du diesen in der Entwickler-Konsole mit dem Befehl document.querySelectorAll(„.insert-your-css-selector“) überprüfen. Und dabei nicht auf den „.“ vor dem CSS Selector vergessen. In unserem Fall könnten wir also mit document.querySelectorAll(„.wpcf7-mail-sent-ok“) überprüfen, ob wir den richtigen Selector ausgewählt haben.

Anschließend kannst du den dazu gehörigen Trigger im Google Tag Manager anlegen. Dieser sollte folgendermaßen aussehen:

Selection Method: hier wählst du aus dem Dropdown-Menü „CSS Selector“ – logisch, sonst hätten wir nicht ewig lange über CSS Selektoren gesprochen ;- )
Element Selector: hier fügst du deinen spezifischen CSS Selector ein
When to fire this trigger: du willst, dass jedes mal eine Conversion getrackt wird, wenn der Erfolgs-Text auf der Seite erscheint. Daher wählst du hier „jedes Mal wenn ein Element am Screen erscheint“.
Observe DOM Changes: kannst du im Normalfall aktivieren, es sei denn du hast eine Seite mit mehreren Formularen, dann kann es die Seiten-Performance mindern.
This trigger fires on: All Visibility Events – hast du mehrere Formulare, könntest du den Trigger auch beschränken.

Anschließend weist du den Trigger deinem Tag zu – und schon hast du Conversion Tracking für dein Formular ohne Danke-Seite eingerichtet.

Conversion Tracking ohne Danke-Seite (Custom Event)

Eine dritte, einfachere Möglichkeit ist das Tracking mit einem benutzerdefinierten Event (custom event). Wenn du auf deiner WordPress-Seite das beliebte Contact Form 7 Plugin verwendest, dann kannst du im Google Tag Manager ein HTML-Tag anlegen, welches jedes Mal ein benutzerdefiniertes Event (in diesem Fall „cf7submission“) mitschickt, wenn jemand in einem CF7-Formular auf „Senden“ klickt. Dieses Skript schaut wie folgt aus:

Ist dieser so genannte „Event Listener“ erst einmal aktiv, musst du nur mehr ein passendes benutzerdefiniertes Event (custom event) anlegen. Dazu wechselst du zu „Trigger“, wählst als „Trigger Typ“ das benutzerdefinierte Event (custom event), gibt dem Event den gleichen Namen wie im Listener oben (cf7submission) und wählst deine passenden Auslöse-Bedingungen.

In unserem Fall ist der Listener auf der gesamten Website aktiv und das custom event wird jedes Mal abgeschickt, wenn ein CF7-Formular abgeschickt wird. Dies kannst du natürlich auch noch eingrenzen, beispielsweise den Trigger nur auf /kontaktformular/ aktivieren. Last but not least weist du diesen Trigger jetzt noch deinem Google Ads Conversion Tag zu.

Überprüfung auf deiner Website und bei Google Ads

Vertrauen ist gut, Kontrolle ist besser – deswegen solltest du dein Conversion Tracking Tag mit dem dazu gehörigen Trigger auch testen. Dazu den Preview-Modus aktivieren, auf die Seite mit dem Formular wechseln und dort ein Test-Formular abschicken. Wenn alles klappt, dann sollte dein angelegtes Tag unter „Tags fired on this page“ aufgezählt werden.

Im letzten Schritt kannst du deine Conversion-Aktion auch nochmal in Google Ads überprüfen. Nach nur wenigen Minuten (oder im schlimmsten Fall – Stunden) solltest du in der Übersicht des Google Ads Conversion Trackings (Tools & Einstellungen > Conversions) sehen, dass der „Tracking-Status“ deiner Aktion von „nicht überprüft“ auf „Keine kürzlich erfassten Conversions“ umspringt.

Ist dies der Fall, dann hast du dein Page View Tracking oder Element Visibility Tracking erfolgreich umgesetzt und du siehst in weiterer Folge, wie viele Anfragen aufgrund einer Google Ads Kampagne zustande gekommen sind.

18. Oktober 2019/1 Kommentar/von Gerald

Google Analytics: IP ausschließen und testen

Online Marketing, Tutorials

tl;dr – Wir zeigen dir, wie du in deinem Google Analytics Account eine zweite Datenansicht anlegst, einen IP-Filter für deinen internen Traffic erstellst und anschließend die korrekte Funktionalität auf deiner Live-Website testen kannst.

Google Analytics ist eines der mächtigsten Tools von Google. Wer nur mit den Grundfunktionen des Tools vertraut ist, der kennt nicht einmal die Spitze dieses Eisbergs. Weil GA als Grundlage für alle deine Online-Maßnahmen wie etwa Google Ads, Retargeting, Social Media Marketing und last but not least auch E-Commerce-Entscheidungen dienen sollte, ist eine optimale und nachhaltige Grundkonfiguration des Tools enorm wichtig.

Weil die Zugriffszahlen auf deiner Website durch ständiges Testen und Weiterentwickeln der Inhalte und Landingpages nicht verfälscht werden sollte, ist ein Herausfiltern der eigenen IP (oder IP-Ranges) besonders wichtig. Du willst nämlich nicht, dass deine ständigen Zugriffe auf die eigene Website von Google Analytics mitgetrackt werden. Auf diese Art und Weise werden nämlich SEO-relevante Daten wie etwa Absprungrate, durchschnittliche Sitzungsdauer oder Seiten pro Sitzung verfälscht.

Rohdatenansicht vs. Masterdatenansicht

Um dies zu vermeiden, solltest du wie folgt vorgehen: wenn du deinen Google Analytics Account anlegst (die Einbindung in deine Website können wir für dich erledigen), dann wird unter „Verwaltung > Datenansicht“ standardmäßig eine Ansicht namens „Alle Websitedaten“ angelegt. Dies ist die so genannte Rohdatenansicht. Den Namen dafür kannst du unter „Einstellungen der Datenansicht“ bei „Name der Datenansicht“ auch dementsprechend anpassen. In dieser Datenansicht solltest du niemals Filter einbinden, Segmente erstellen oder andere Anpassungen durchführen.

Sobald man nämlich einmal einen Filter auf eine Datenansicht anwendet, werden die herausgefilterten Daten ab diesem Zeitpunkt nicht mehr erfasst. Bemerkt man nun (zu spät) einen Fehler bei der Konfiguration, dann sind diese Daten für immer verloren und können auch nicht wieder hergestellt werden. Daher gilt stets die Regel: Finger weg von der Rohdatenansicht.

Wie gehst du jetzt aber richtig vor? Durch einen Klick auf „+ Datenansicht erstellen“ kannst du eine zweite Datenansicht für deine GA-Property erstellen. Dies ist die so genannte Masterdatenansicht. Diese kannst du wiederum ebenfalls so benennen. In dieser Ansicht kannst du dann auch Filter aktivieren, Segmente erstellen, benutzerdefinierte Channelgruppierungen erstellen oder andere Anpassungen durchführen. Solltest du einmal einen Fehler bemerken, dann kannst du immer noch auf die Rohdatenansicht zurückgreifen.

Einen Filter für IP-Ausschluss erstellen

Ist die Masterdatenansicht erst einmal angelegt, dann kannst du deinen IP-Filter erstellen. Wenn du auf das Zahnrad am linken unteren Eck von GA klickst, gelangst du immer direkt in die so genannte Verwaltungsübersicht. Durch einen Klick auf „Filter“ im Bereich der Datenansicht (Anm. versichere dich lieber nochmals, dass es sich dabei um die Masterdatenansicht handelt) kannst du deinen IP-Filter erstellen. Dazu klickst du zunächst auf den roten Button mit „+ Filter hinzufügen“.

Anschließend kannst du folgende Einstellungen treffen:

(Anm. Experten erkennen sofort, dass es sich bei der von mir verwendeten IP um eine Fake-IP handelt ;-))

Als Filtername gibst du dem Filter einen treffenden Namen, wie etwa „Interner Traffic„. Anschließend nimmst du den Typ „Vordefiniert„, wählst dort „Ausschließen„, „Zugriffe über IP-Adressen“ und „sind gleich„. Im Feld darunter kannst du dann deine IP-Adresse eintragen.

Am schnellsten findest du deine IP-Adresse heraus, indem du auf eine Seite wie z.B. https://www.whatsmyip.org/ navigierst. Achtung: dies bringt natürlich nur dann etwas, wenn du über eine statische IP-Adresse verfügst. Wenn du dir nicht sicher bist, ob du über eine statische IP verfügst, dann wende dich am besten an deinen Netzwerkadministrator oder an einen Ansprechpartner bei deinem Internet Service Provider (ISP).

Testen der Filtereinstellung

Wie du im Screenshot oben im Satz ganz unten siehst, kann man den IP-Ausschluss-Filter nicht in Google Analytics selber testen. Deswegen musst du hier einen anderen Weg gehen. Dazu musst du dir im ersten Schritt den Google Tag Assistant (GTA) installieren. Dies ist eine Erweiterung für den Google Chrome Browser (welche logischerweise nicht für Firefox, Safari, Microsoft Edge oder andere Browser verfügbar ist). Nachdem du die Erweiterung aktiviert hast, kannst du den GTA durch einen Klick auf das nachfolgend markierte Icon in der Browserleiste aktivieren.

Die Extension für Chrome aktiviert sich, sobald du die Seite neu lädst. Wenn du anschließend auf das Icon klickst, dann öffnet sich ein Fenster mit einer Analyse. Das grüne Tag besagt, dass der Google Tag Manager bzw. Google Analytics richtig auf die Seite eingebunden sind. Wenn du nun anschließend auf den „Record“-Button klickst, kannst du deine Sitzung auf deiner Website aufzeichnen.

Am besten, du gehst von der Homepage aus einige logische Schritte, wie etwa zu deinen Leistungen und anschließend zu deinem Kontaktformular. Sobald du wiederum auf das Tag-Icon klickst, kannst du die Aufzeichnung stoppen. Anschließend öffnet sich ein neues Fenster mit der Aufzeichnung des Tag Assistants.

Zunächst musst du oben auf „Google Analytics Report“ wechseln. Zunächst wähle bei „Select views“ beide deine Datenansichten aus, also die Rohdatenansicht und die Masterdatenansicht. Du willst ja letztendlich vergleichen, ob dein Filter wie gewünscht funktioniert. Nachfolgend kannst du, wie im Screenshot markiert, im vertikalen Menü die Location wechseln.

Hier kannst du beim Punkt „Use a specific IP address“ nun die von dir im letzten Schritt ausgeschlossene IP Adresse eingeben. Durch einen Klick auf „Update“ werden die Daten im Report des Tag Assistants aktualisiert. Als nächstes musst du auf der Seite bis ganz nach unten zum Sektor Flow scrollen.

Wenn du dort auf „Page load 1“ und anschließend auf „Hit 1“ klickst, werden dir die Google Analytics Daten für beide Datenansichten angezeigt.

Nun solltest du einen View angezeigt bekommen, wo „Hit dropped by filter DEIN FILTERNAME“ angezeigt wird. Dies ist der View aus deiner Masterdatenansicht und besagt, dass deine Sitzung nicht getrackt wurde. Wenn beim anderen View (also bei der Rohdatenansicht) die Zeile „Hit captured without modifications.“ steht, dann hast du alles richtig gemacht – denn dann wurde deine Sitzung hier getrackt.

Gratulation, du hast deinen ersten IP-Filter in Google Analytics angelegt und erfolgreich getestet!

20. November 2018/0 Kommentare/von Gerald

Browser-Cache leeren: Der ultimative Guide

Tutorials

Wie und wozu muss ich den Browser-Cache leeren?

Unter dem Browser-Cache versteht man eine Art Zwischenspeicher, in welchem Informationen von bereits aufgerufenen Websites wie z.B. Bilder als Kopie auf dem eigenen Rechner abgelegt werden.

Dieser Speicher hat natürlich seine Berechtigung, da er ein schnelleres Laden bei erneutem Besuch einer Internetseite ermöglicht, indem die gewünschten Ressourcen einfach aus dem Cache abgerufen werden können und nicht erneut heruntergeladen werden müssen. Die Sache bringt jedoch auch einen Nachteil mit sich und zwar, dass der Browser immer auf die gespeicherten Daten zurückgreift und dabei nicht merkt, ob auf der Website bereits neue Inhalte vorhanden sind.

Deshalb ist es ratsam, den Browser-Cache regelmäßig einfach mal zu leeren. Somit wäre das wozu geklärt und nun widmen wir uns der Frage nach dem wie. Im Folgenden zeigen wir dir auf, wie du den Cache der gängigsten Browser ganz einfach löschen kannst.

Microsoft Internet Explorer

Schnellzugriff

Tastenkombi Strg + Shift + Entf drücken
„Temporäre Internetdateien“ auswählen und anschließend auf „Löschen“ klicken

Oder…

IE 11, IE 10, IE 9

Zahnradsymbol (oben rechts) anklicken und die „Internetoptionen” öffnen
Das Register „Allgemein” auswählen
Im Abschnitt „Browserverlauf” auf „Löschen…” klicken
Im geöffneten Fenster „Bevorzugte Websitedaten beibehalten” deaktivieren und stattdessen „Temporäre Internetdateien” und „Cookies” wählen
Zum Schluss noch „Löschen” anklicken – geschafft!

IE 8, IE7, IE 6

Im Menü „Extras“ die „Internetoptionen“ öffnen
Das Register „Allgemein” auswählen

IE8

Im Abschnitt „Browserverlauf” auf „Löschen…” klicken
Im geöffneten Fenster „Bevorzugte Websitedaten beibehalten” deaktivieren und stattdessen „Temporäre Internetdateien” und „Cookies” wählen
Zum Schluss noch „Löschen” anklicken – geschafft!

IE7

Im Abschnitt „Browserverlauf” auf „Löschen…” klicken
Auf „Dateien löschen“ klicken
Die anschließende Frage mit „Ja“ bestätigen – geschafft!

IE 6

Im Abschnitt „Temporäre Internetdateien“ auf „Dateien löschen…“ klicken
Option „Alle Offlineinhalte löschen“ auswählen
Mit „Ja“ bestätigen – geschafft!

Microsoft Edge

Schnellzugriff

Tastenkombi Strg + Shift + Entf drücken
„Zwischengespeicherte Daten und Dateien“ auswählen und auf „Löschen“ klicken

Oder…

Das Menü durch Klicken auf das „…“-Symbol (oben rechts) öffnen
„Einstellungen“ auswählen
Im Abschnitt „Browserdaten löschen“ „Zu löschendes Element auswählen“ anklicken
„Zwischengespeicherte Daten und Dateien“ wählen
Auf „Löschen“ drücken – geschafft!

Mozilla Firefox

Schnellzugriff

Tastenkombi Strg + Shift + Entf drücken
Im neu geöffneten Fenster „Cache“ auswählen und anschließend auf „Jetzt löschen“ klicken

Oder…

Im Menü (drei horizontale Striche) die „Einstellungen” öffnen
Den Abschnitt „Datenschutz”auswählen
Auf der Registerkarte „Chronik“ im Bereich „kürzlich angelegte Chronik” je nach Wunsch auswählen und auf „Jetzt löschen…” klicken – geschafft!

Google Chrome

Schnellzugriff

Tastenkombi Strg + Shift + Entf drücken
Unter „Folgendes für diesen Zeitraum löschen“ den Eintrag „Gesamter Zeitraum“ festlegen
„Bilder und Dateien im Cache“ auswählen und auf „Browserdaten löschen“ klicken

Oder…

Das Menü-Symbol neben der Adressleiste anklicken (oben rechts)
„Weitere Tools“ auswählen
„Browserdaten löschen…“ anklicken
Unter „Folgendes für diesen Zeitraum löschen“ den Eintrag „Gesamter Zeitraum“ wählen
„Cache löschen“ auswählen
Auf „Browserdaten löschen“ klicken – geschafft!

Apple Safari

Schnellzugriff

Tastenkombi Cmd + Alt + E (Mac) bzw. Strg + Alt + E (PC) drücken
Mit Enter bestätigen

Oder…

Im Menü „Safari“ auf „Verlauf löschen…“ klicken
Die Option „der letzten Stunde“ auswählen
Auf „Verlauf löschen“ drücken – geschafft!

Opera

Schnellzugriff

Tastenkombi Strg + Shift + Entf drücken
Im neu geöffneten Fenster Zeitraum „seit der Installation“ auswählen
„Browserverlauf“, „Downloadverlauf“, „Cookies und andere Websitedaten“, „Bilder und Daten im Cache“ sowie „Drittanbieter-Dienstdaten“ aktivieren
Auf „Browserdaten löschen“ klicken

Oder…

Das Menü „Opera“ öffnen
Unter „Einstellungen” den Punkt „Datenschutz und Sicherheit“ wählen
Im Punkt „Privatsphäre“ auf „Browserdaten löschen…“ klicken
Im neu geöffneten Fenster „seit der Installation“ auswählen
„Browserverlauf“, „Downloadverlauf“, „Cookies und andere Websitedaten“, „Bilder und Daten im Cache“ sowie „Drittanbieter-Dienstdaten“ aktivieren
Auf „Browserdaten löschen“ klicken

Solltest du dir nicht sicher sein, welche Browser-Version du gerade verwendest, hast du die Möglichkeit, unter WhatsMyBrowser ganz schnell und unkompliziert herauszufinden!

7. September 2017/0 Kommentare/von Gerald

Wusstet ihr schon? Facebook Edition

Tutorials

Facebook ist nach wie vor eine der beliebtesten Social Media Plattformen. Das Portal ist im Laufe des letzten Jahrzehnts immer mehr gewachsen. Dementsprechend gibt es auch viele Funktionen und Hilfestellung, welche weniger bekannt sind. Zumindest bis jetzt ;)

Neueste Meldungen

Ärgert es euch manchmal, dass in eurem Facebook-Feed standardmäßig die „Top-Meldungen“ ganz oben angezeigt werden und chronologisches Chaos herrscht? Hier gibt es einen einfachen Trick um diese Standardeinstellung zu umgehen. Dazu müsst ihr in der Browserzeile einfach ?sk=h_chr an die Facebook-URL eingeben und diesen Link unter euren Favoriten bzw. Lesezeichen abspeichern.

Wenn ihr das nächste Mal auf Facebook geht, werden automatisch die neuesten Meldungen und nicht mehr die Top-Meldungen angezeigt.

Facebook in der Google-Suche

Ihr müsst es nicht verleugnen – jeder hat es wohl schon irgendwann einmal gemacht. Man lernt eine Person kennen oder will über eine Person mehr erfahren. Nichts leichter als das, einfach den Namen in Google eingeben und damit unter anderem zum entsprechenden Facebook-Profil kommen (die negative Bezeichnung dafür ist „Social-Media-Stalking“). Doch man kann auch verhindern, dass das eigene Facebook-Profil bei Google (oder in anderen Suchmaschinen wie Bing oder Yahoo) gelistet wird.

Diese Einstellung findet man unter Einstellungen > Privatsphäre > Möchtest du, dass Suchmaschinen außerhalb von Google dein Profil anzeigen?

Doch Achtung: wenn du etwas in öffentlichen Gruppen oder Seiten postest, kann man diese Kommentare weiterhin mithilfe von Suchmaschinen finden. Diese Einstellung betrifft also nur alles rund um dein eigenes Profil.

Freundschaftsverlauf

Mittlerweile gibt es Facebook schon richtig lange. Manchmal versucht man sich, an gemeinsame Ereignisse mit einer Freundin oder einem Freund zu erinnern. Doch wie findet man diese Momente wenn man nicht stundenlang im Profil nach unten scrollen will? Das geht viel einfacher als man denken würde. Geht einfach auf das Profil des jeweiligen Freundes und klickt auf dem Titelbild auf den Button mit den drei Punkten (direkt neben „Nachricht senden“). Wenn ihr dann auf „Freundschaft anzeigen“ klickt, werden euch chronologisch alle geteilten Momente mit der jeweiligen Person angezeigt. Wenn euch jemand also zum Geburtstag gratuliert hat, euch in einem Foto oder Beitrag markiert hat – hier findet ihr alle diese gemeinsamen Momente.

4. September 2017/0 Kommentare/von Gerald

Vom Visitor zum Lead – Exit Intent done the right way

Online Marketing, Tutorials

22. August 2017/0 Kommentare/von Theresa

Gewinnspiele auf Facebook

Online Marketing, Tutorials

Wer kennt’s nicht … der Facebook Newsfeed ist wieder einmal überflutet mit Gewinnspielen. Zur Teilnahme liken, teilen, kommentieren, Freunde markieren, usw. …! Es winken tolle Preise – vom neuen Auto bis zum Smartphone. Doch ist das überhaupt legal? Was dürfen die Gewinnspielveranstalter und was nicht?

Weil das in den meisten Fällen keiner so genau weiß, haben wir dir die Richtlinien für Facebook Gewinnspiele (in der Chronik) kurz zusammengefasst.

Was bei Facebook Gewinnspielen erlaubt ist

Liken oder kommentieren als Teilnahmebedingung (ACHTUNG: eine gesamte Liste aller Likes ist ohne technisches Know-How nur schwer aus Facebook herauszubekommen – in Betracht der Fairness ist dies höchst fragwürdig)
Bild oder Kommentar mit den meisten Likes gewinnt
Bild/Nachrichten Postings auf der Seitenchronik
Privatnachricht an die Seite

Was bei Facebook Gewinnspielen nicht erlaubt ist

Teilen des Beitrags als Teilnahmebedingung
Markierungen auf Bildern als Teilnahmebedingung
Markierungen von Freunden in Kommentaren
Veränderungen am Profil des Nutzers als Teilnahmebedingung (z.B. Profilbildänderung)
Verlosungen unter allen Fans (Nutzer muss den Teilnahmebedingungen aktiv zustimmen)

Microsite-Gewinnspiele

Einfacher geht das ganze natürlich mit einem App- beziehungsweise Microsite-Gewinnspiel. Solche können zum Beispiel mit atipso erstellt werden. Mittels atipso ist es kinderleicht ein Gewinnspiel zu erstellen. Die Rechtstexte müssen nur noch an das jeweilige Unternehmen angepasst werden und du kannst die Daten der Teilnehmer auch noch weiterverwerten (was bei einem Chronik Gewinnspiel nicht möglich ist.

Sinnhaftigkeit von Gewinnspielen

Unsere Kollegen vom webmarketingblog haben einen wunderbaren Beitrag betreffend der Sinnhaftigkeit von Gewinnspielen auf Facebook erstellt. Wir finden den wirklich super und total lustig – aber leider ist er mittlerweile (Oktober 2018) nicht mehr erreichbar. Für alle „klickfaulen“ unter euch, haben wir ihn aber noch einmal kurz zusammengefasst:

Engagement vs. Content
Gewinnspiele sind super geeignet um das Engagement zu steigern, aber sie sind eine bescheidene Content Strategie. Sollten also Gewinnspiele das einzige Mittel zur Interaktion mit den Fans sein – Strategie überdenken.

Gewinner sind nicht immer happy
Auto gewonnen? – sofort verkauft! Vertraglich daran gebunden das Auto 1 Jahr behalten zu müssen – nervig! Fazit: Nicht alle Gewinner freuen sich so über einen Gewinn wie man meinen möchte.

Gewinnspiel Freaks
Je mehr Gewinnspiele man umsetzt, umso schneller wird man feststellen, dass es irrsinnig viele Freaks gibt die bei allen Gewinnspielen mitmachen. Doch…diese Freaks wissen meist nicht mal mehr bei welcher Marke sie zuletzt bei einem Gewinnspiel mitgemacht haben. DAS sind wohl nicht unbedingt die großen Markenbotschafter.

Personen des öffentlichen Lebens
Neben den Gewinnspielfreaks gibt es auch viele Influencer (bzw. Personen des öffentlichen Lebens) auf Facebook. Hier solltest du in deinen Gewinnspiel-AGB darauf achten, dass diese nicht an deinem Gewinnspiel teilnehmen dürfen. Dies wäre nämlich aufgrund deren Masse an Followern oder Fans sonst ziemlich unfair gegenüber „normalen“ Personen.

Besser mehr als weniger
Vor allem bei Votings oder Highscore Gewinnspielen läuft man Gefahr, dass sich bei Beginn bereits eine Kleingruppe an Teilnehmern einen beinahe unüberwindbaren Vorsprung erkämpfen. SEHR deprimierend für alle folgenden Teilnehmer! Daher – besser mehrere Preise parat haben und mehrere Sieger küren.

Gewinne sind nicht immer das A und O
Manchmal ist es besser, ein sinnvoller Beitrag wird zwar nur 2-mal geteilt und trägt die Botschaft der Marke in sich, als 1 Gewinnspielbeitrag der 3.000-mal geteilt wurde aber die Marke komplett aus dem Blickfeld verschwindet.

Fazit Gewinnspiele bei Facebook

Den Sinn eines Gewinnspiels hinterfragen. Passt der Preis zu meinem Unternehmen? Ein iPhone als Preis bei einem Baggerunternehmen? Treffe ich auch wirklich noch die richtige Zielgruppe? Bewege ich mich überhaupt auf legaler Basis mit meinem Gewinnspiel? Bei all diesen Fragen können wir natürlich auch weiterhelfen, im Zweifelsfall einfach kurz durchklingeln! Oder aber auch atipso probieren und rechtsmäßig auf der sicheren Seite sein. :)

21. August 2017/0 Kommentare/von Theresa