Den Google Tag Manager zur Scrivito Example-App hinzufügen

In der Scrivito Example-App ist Google Analytics bereits integriert. Tragen Sie einfach Ihre Google Analytics-ID in den Website-Einstellungen auf Ihrer Homepage ein, um Google Analytics zu aktivieren.

Wenn Sie jedoch den Google Tag Manager (GTM) bevorzugen, können Sie auch diesen einfach einbinden. In dieser Anleitung 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 aufgefordert, 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 JS 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

/tracking.js
...
const gtmScript = document.createElement("script");
gtmScript.textContent = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].
   push({'gtm.start':new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=
   'dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-**_YOUR_GTM_ID_**');`;
document.head.appendChild(gtmScript);

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-Aapplication 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 Skript-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 nochmals ü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. Da es sich dabei um ein <noscript> handelt und nicht um ein <script>, sollte es direkt unterhalb des öffnenden <body>-Tags in der Datei “public/catch_all_index.html” abgelegt werden:

public/catch_all_index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="generator" content="Scrivito by Infopark AG (scrivito.com)" />

    <title>Your Scrivito powered site is loading ...</title>
    <link rel="preconnect" href="https://api.scrivito.com" crossorigin />
    <link rel="preconnect" href="https://api.scrivito.com" />
    <link rel="preconnect" href="https://cdn0.scrvt.com" />
    <link rel="stylesheet" href="/index.css" />

    <script src="/js_snippets_head.js"></script>
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-##_YOUR_GTM_ID_##"
      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <div id="application">
      <span class="loader">
        Your <a href="https://www.scrivito.com">Scrivito</a> powered site is
        loading ...
      </span>
    </div>
    <script src="/index.js"></script>
    <script src="/js_snippets_before_body_end.js"></script>
  </body>
</html>

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 von Google Tag Manager 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 zwar generell 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.

src/public/_headerCsp.json
"style-src": [
    "'self'",
    "https://assets.scrivito.com/",
    "https://*.cloudfront.net/",
    "https://tagmanager.google.com/",
    "https://fonts.googleapis.com",
    "'unsafe-inline'"
  ],
  "script-src": [
    "'self'",
    "https://tagmanager.google.com/",
    "https://www.googletagmanager.com/",
    "https://*.cloudfront.net/",
    "https://api.scrivito.com",
    "https://app.intercom.io",
    "https://assets.scrivito.com",
    "https://js.intercomcdn.com",
    "https://widget.intercom.io",
    "https://www.google-analytics.com"
  ],
  "object-src": "'none'",
  "block-all-mixed-content": true
}

Cookie-Zustimmung

Wie oben beschrieben, blockiert die Scrivito Example App im Grundzustand 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 Besucher Ihrer Website möglich, 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, wird die Vorgehensweise natürlich etwas abweichen.


Dieser Artikel wurde ursprünglich in englischer Sprache verfasst. Originalversion

Überzeugen Sie sich selbst … Die Anmeldung dauert weniger als 60 Sekunden.