Falconbyte.net :: Typo3 Google Analytics 4 einbinden

Thema in Kurzform

Am einfachsten bindet man den Tracking-Code von Google Analytics über die headerData-Eigenschaft von TypoScript in Typo3 ein. Wir zeigen dir in diesem Tutorial, wie einfach und schnell das geht!

GA-Tracking Code besorgen

Klar: Wir können Google Analytics auch über eine der vielen Extensions in Typo3 integrieren. Allerdings machen wir uns dann auch immer ein stückweit abhängig und es empfiehlt sich ohnehin immer, einfache Dinge auch einfach zu lösen.

Der einfachste Weg, Google Analytics auf eurer Typo3-Website anzuwenden, ist das Einfügen des Google Analytics Tracking Codes in den <head>-Bereich eures Templates.

Dazu müssen wir uns den Tracking Code aber erst einmal von Google besorgen:

Loggt euch in eurem Google Analytics Konto ein
Klickt links unten auf Verwaltung
Dann auf Datenstreams
Wählt ganz unten "Tag-Anleitung" aus
Dann auf "manuell installieren"

Der Google Analytics Code sollte euch nun angezeigt werden. Es handelt sich dabei um ein Script und kann bei euch etwa so aussehen:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KIM934GTSS001"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-KIM934GTSS001');
</script>

Code mit TypoScript einfügen

Wir müssen den Tracking Code nun in den <head>-Bereich unserer Website bringen. Wie machen wir das?

Ganz einfach: Geh in Typo3 zum Template-Modul und wähle das entsprechende Template aus. Klicke dann auf Setup, um Zugriff auf TypoScript zu erhalten.

headerData Eigenschaft

Um Code in den <head>-Bereich unseres Templates zu bringen, benötigen wir die PAGE-Eigenschaft headerData. Technisch handelt es sich dabei um ein Array aus key-value-Paaren. Für unser Beispiel benötigen wir einen key (=eine beliebige Ganzzahl) und einen passenden value (=der Google-Analytics-Code).

Fügt headerData wie in folgendem Beispiel in euerem TypoScript-Template-Setup ein:

page.headerData {
        917 = TEXT
        917.value (
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1HTJGVJH67"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-1HTJGVJH67');
</script>
        )
   }

Der key in unserem Beispiel ist 917. Die Zahl wurde random gewählt und sollte nur so gewählt werden, dass es unwahrscheinlich ist, dass ein anderer key den gleichen Wert hat.

Wie du siehst, wurde der Tracking Code als value in die runden Klammern von 917.value() eingesetzt. Vom Coding her wars das jetzt auch schon 😎

Innerhalb der nächsten 24 Stunden (wahrscheinlich früher) sollten die ersten Daten in deinem Google Analytics Konto auftauchen. Das liegt einfach daran, dass google den Tracking Code erst noch auf deiner Website crawlen muss.

In diesem Sinne: Viel Spaß mit den Analysen!!