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

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. http://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!