Zugriff auf GTM Data Layer Variablen aus Custom HTML Tags

Grundsätzlich gibt es mehrere Möglichkeiten, wie man aus Custom HTML Tags auf die Tag Manager Data Layer Variablen zugreifen kann. In Abhängigkeit des jeweiligen Einsatzgebietes, kann die eine oder andere Möglichkeit praktischer oder sinnvoller sein.

GTM Data Layer Variablen

Die wohl in fast allen Fällen einfachste und "sauberste" Lösung für den Zugriff auf das Data Layer besteht darin, im GTM Interface eine Variable vom Typ Data Layer anzulegen. Diese Variable kann dann im Custom HTML Tag direkt über {{variablenName}} referenziert werden.

Data Layer Objekt mit Index

Diese Methode des Zugriffs auf das Data Layer erlaubt es, auf die Werte eines bestimmten Data Layer Update-Schrittes zuzugreifen. Hierbei wird einfach das Data Layer Objekt mit einem Index referenziert, wobei der Index für die Nummer des jeweiligen Update-Schrittes steht. Sofern man beispielsweise auf initiale Data Layer Variablen-Werte zugreifen möchte, die noch vor dem GTM Container im Quellcode der Seite gesetzt wurden, so kann man den Syntax dataLayer[0] verwenden bzw. beispielsweise dataLayer[0]['pageType'], um auf die spezifische im initialen Data Layer definierte Variable 'pageType' zuzugreifen.

get und set Funktion des Data Layer Objektes

Eine weitere Möglichkeit, auf die aktuellen Data Layer Werte zuzugreifen oder diese auch ohne dataLayer.push Aufruf zu manipulieren, besteht darin, die get bzw. set Funktionen des Tag Manager Data Layer Objektes zu verwenden. Diese Funktionen sind nicht direkt für das globale dataLayer Objekt definiert, sondern nur für das Google Tag Manager dataLayer Objekt. Der Zugriff erfolgt mit folgendem Syntax:

  • google_tag_manager["GTM-ABCDEF"].dataLayer.get('variablenName')
    Um eine aktuelle Data Layer Variable auszulesen
  • google_tag_manager["GTM-ABCDEF"].dataLayer.set('variablenName', 'neuer Wert')
    Um den aktuellen Wert einer Data Layer Variable neu zu setzen.

Push einer JavaScript Funktion ins Data Layer

Letztendlich gibt es noch eine weitere Möglichkeit, die beispielsweise dazu verwendet werden kann, um eine Data Layer Variable innerhalb eines Custom HTML Tags zu manipulieren. Hierbei wird eine JavaScript Funktion ins Data Layer gepusht, was dazu führt, dass diese JavaScript Funktion im entsprechenden Kontext ausgeführt wird, in dem auch wieder die get und set Funktionen zur Verfügung stehen.
Beispiel:

dataLayer.push(function(){ 
    var newVariable = this.get('variable1') + "-" + this.get('variable2');
    dataLayer.push({'event':'testEvent', 'newVariable': newVariable });
});