Analytics oder den Tag-Manager in Typo 3 implementieren

Um den Tagmanager oder den GTAG in Typo 3 zu verwenden, haben Sie 2 Möglichkeiten. Beim Tag Manager können Sie entweder ein Plugin verwenden oder den Code direkt implementieren. Beim GTAG bleibt in der Regel nur übrig den Code direkt zu implementieren. In diesem Beispiel wird Typo 8.7`verwendet.

Empfohlen wird in diesem Tutorial, den Tagmanager in Typo 3 direkt zu implementieren, da das Plugin keine Vorteile mit sich bringt.

Google Analytics Gtag oder TagManager direkt implementieren

Wenn Sie Codes direkt implementieren möchten, ist zu bedenken, dass Typo 3 mit werten der Elementanordnung arbeitet. Dass bedeutet je höher der Wert, desto höher ist auch der Code auf der Seite.

GTAG oder Tag Manager Code anpassen

Der Typo 3 Code mit dem GTAG würde wie folgt aussehen:

 

 

 

page.headerData.9999 = TEXT

page.headerData.9999.value(

<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113154044-1"></script>

<script>

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

 

  gtag('config', 'UA-113154044-1', { 'anonymize_ip': true });

</script>

)

 

 

In Blau ist der Typo 3 Code. Die erste Zeile deklariert Daten für den Header auf der Position 9999 als Text. Die 2. Zeile gibt den Deklarierten Text Datensatz den Wert mit dem Code.

In Schwarz ist der Globale Tag für das Google Analytics. Der Rot markierte Bereich muss mit Ihrer Analytics Nummer ersetzt werden. Die Ip wird in diesem Code schon Anonymisiert.

Bedenken Sie, dass Sie ein Consent Tool bezüglich der DSGVO verwenden sollten. Der Code müsste für das jeweilige tool noch angepasst werden.

Der Typo 3 Code mit dem Tag- Manager würde wie folgt aussehen:

 

 

 

page.headerData.9999 = TEXT

page.headerData.9999.value(

<!-- Google Tag Manager -->

<script>(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-MDSV7C6');</script>

<!-- End Google Tag Manager -->

)

 

Der rot markierte Bereich muss gegen Ihre GTM-ID ausgetauscht werden.

Code in Typo 3 einfügen

Melden Sie sich als erstes in Ihr Typo 3 Backend an. Sollten einige Schritte nicht funktionieren, haben Sie eventuell keine administrativen Rechte.

Ihr Backend sollte wie folgt aussehen:

Typo 3 Header

Klicken Sie auf auf die Punkte wie im oberen Bild angezeigt von 1- 4. Home ist das Root- Template. Bei Ihnen kann es anders heißen. Achten Sie einfach darauf, dass es das Weltkugel Symbol ist. Ihre Seite sollte nun ähnlich wie folgt aussehen. Es kann gut sein, dass Ihre Seite mehr Code enthält.

GTAG Code Eingefügt

In dem oberen Bild sehen Sie wie der Gtag Code eingefügt wurde. Sie können dort auch genau so den Tag Manager Code einfügen. Klicken Sie anschließend oben auf Speichern.