GTAG oder den Tagmanager 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.

Hier erfahren Sie wie Sie Daten anonymisiert übermitteln können

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.

Wie ein angepasster Code aussehen kann finden Sie mit diesem Link unter “GTAG anpassen”.

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.

Tagmanager mit einem Plugin/ Erweiterung implementieren

Sie können den Tag Manager auch mit einer Erweiterung für Typo 3 implementieren. Dazu laden Sie als erstes die Erweiterung für Ihre Typo3 Version herunter.

Downloadseite öffnen

Nachdem Sie die Datei heruntergeladen haben, müssen Sie diese Installieren. Gehen Sie dafür in das Typo3 Backend und folgen den schritten auf den Bildern:

Erweiterung installieren

Erweiterung installieren

Nach dem Die Erweiterung installiert wurde, muss diese als nächstes ihren Root template zugeordnet werden.

Erweiterung zuweisen 1

Nun muss der Tagmanager dem Root Template zugewiesen werden.

Erweiterung zuweisen 2

Nachdem die Erweiterung nun zugewiesen wurde, muss nun die Tagmanager ID als Konstante vergeben werden und der Tagmanager Code beim laden inkludiert werden.

Die Codes sehen wie folgt aus:

Code für den “Constants” Bereich

const.tx_googletagmanager.settings.tagId = GTM-MDSV7C6

Code für den “Setup” Bereich

page.100 =< styles.content.get
page{
    1 < plugin.tx_googletagmanagerdatalayer_init
    … main template
    999 < plugin.tx_googletagmanagerdatalayer
    3000 < plugin.tx_googletagmanager
}

Sie finden den Bereich Setup und Constants unter dem Reiter General/ Allgemein

Bewerten Sie