Den Google Tag Manager einbinden

Den Google Tag Manager einbinden

Mit dem Google Tag Manager kann verschiedenster JavaScript-Tracking-Code (so genannte Tags) für Ihre Website definiert und verwaltet werden. Google-Analytics-Tracking-Code wäre eines dieser Tags. Das Tracking kann flexibel angepasst werden, ohne dass die Web-Anwendung jedes Mal aktualisiert werden muss.

Im Gegensatz zu Google Analytics ist der Google Tag Manager kein Analyse-Tool, das Berichte generiert, sondern wird verwendet, um Daten von der Website an andere Marketing- und Analyse-Tools senden zu lassen, einschließlich Google Analytics.

Wenn Sie den Google Tag Manager (GTM) einsetzen möchten, können Sie ihn auf einfache Weise einbinden. Hier zeigen wir Ihnen, wie.

Richten Sie zunächst ein Google-Analytics-Konto ein und erstellen Sie einen „Google Tag Manager-Arbeitsbereich“. Anschließend werden Sie gebeten, zwei Skripte zu jeder Seite Ihrer Website hinzuzufügen: Der Code des ersten Skripts soll so weit oben wie möglich in den <head> der Seite eingefügt werden, der Code des zweiten Skripts direkt nach dem öffnenden <body>-Tag.

Die <noscript>-Tags des zweiten Skripts sind übrigens für den Fall vorgesehen, dass ein Website-Besucher JavaScript deaktiviert hat. Ohne JavaScript kann ein Benutzer keine explizite Einwilligung geben (wie von der DSGVO gefordert), weshalb dieser Schritt dann übersprungen wird.

Tracking verwalten und Googles Code hinzufügen

Aus Gründen der DSGVO-Konformität setzt die Scrivito Example App voreingestellt keine Tracking-Cookies. Damit Sie Ihre App leicht konform halten können, enthält die Scrivito Example-App die Datei "/tracking.js", mit deren Hilfe Sie Ihre Tracking-Skripte verwalten können. Diese Datei wird aufgerufen und aktiviert die Tracking-Skripte, sobald die Cookie-Zustimmung erteilt wurde.

Da wir es mit einer Single-page-Application zu tun haben, brauchen wir die Skripte nur einmal hinzuzufügen, weil jede Seite aus derselben Quelle gerendert wird.

Der Code, den wir zu "/tracking.js" hinzufügen, erzeugt ein <script>-Tag und fügt dann die GTM-Funktion zum <head> hinzu, so wie es in der GTM-Anleitung zur Einrichtung beschrieben ist.

Obwohl dieser Code bis auf die GTM-ID für alle Websites derselbe sein dürfte, sollten Sie den Teil, der mit function beginnt und mit Ihrer GTM-ID endet, sicherheitshalber noch einmal überprüfen.

GTM-<NOSCRIPT> FÜR NICHT-DSGVO-SITES

Für den GTM soll der folgenden Code unmittelbar nach dem öffnenden <body>-Tag eingefügt werden. Das GTM-<noscript> stellt Tracking-Daten zur Verfügung, ohne dafür JavaScript zu benötigen und sollte daher direkt unterhalb des öffnenden <body>-Tags in der Datei “public/catch_all_index.html” abgelegt werden:

Falls Sie Prerendering nutzen, muss das Snippet auch zu “src/prerenderContent/generateHtml.js” hinzugefügt werden.

Content Security Policy

Eine Content Security Policy ermöglicht es Ihnen, Interaktionen zwischen Ihrer Webanwendung und Diensten außerhalb der Domain Ihrer Website einzuschränken oder zuzulassen.

Die Interaktionsmöglichkeiten, die Sie dem GTM über Ihre CSP zugestehen sollten, hängen davon ab, wofür Sie den GTM einsetzen. Bei Google gibt es eine Anleitung zur Verwendung des Google Tag Managers mit einer Content Security Richtlinie, der Sie entnehmen können, was je nach Verwendungszweck erforderlich ist.

Möglicherweise ist es nötig, unsafe-inline zum script-src der Datei „_headerCsp.json“ hinzufügen. Dies wird generell zwar nicht empfohlen, kann aber erforderlich sein, wie im oben verlinkten Artikel gezeigt wird. Eine typische CSP dürfte in etwa Folgendes enthalten:

Nachdem Sie alles eingerichtet haben, steht Ihnen der GTM auf jeder Seite Ihrer Scrivito-basierten Website zur Verfügung.

Cookie-Zustimmung

Wie oben beschrieben, blockiert die Scrivito Example App im Ausgangszustand alle Cookies.

Damit der GTM funktioniert, muss die mitgelieferte Cookie-Consent-Komponente aktiviert werden. Tragen Sie hierfür den Link auf Ihre Datenschutzbestimmungen in das Feld „Cookie consent link“ in den Seiteneigenschaften Ihrer Homepage auf dem Reiter „Site Settings“ ein. Danach ist Tracking für alle Website-Besucher, die Cookies akzeptiert haben, erlaubt.

Falls Ihre Website nicht DSGVO-konform zu sein braucht, können Sie die Komponente aus “src/Components” löschen und die entsprechende Import-Anweisung in “src/App.js” entfernen.

Kurz zusammengefasst

Mit wenigen Einstellungen und einem Grundverständnis von der Funktionsweise der Example App lässt sich der Google Tag Manager im Handumdrehen einbinden.

Sollte Ihre Scrivito-App nicht auf der Example App beruhen, ist die Vorgehensweise natürlich geringfügig anders als hier beschrieben.