David Hefendehl - Manager eCommerce Group der netzkern AG
Head of Online Marketing

Google Tag Manager in der Praxis


Seit dem 01.10.2012 ist der Google Tag Manager verfügbar. Natürlich mussten wir das sofort ausprobieren. Viele unserer Kunden haben unzählige Tracking Pixel auf ihren Seiten was die Ladezeiten teilweise erheblich beeinflusst. Google Tag Manager verspricht, daß man diese Tags nun asynchron über den Google Tag Manger laden kann und auch noch die IT Abteilung umgehen kann, da alle Tags zentral in einem Container verwaltet werden können.

Das klingt vielversprechend. Nur noch ein JavaScript Schnipsel auf der Seite und ich kann da auch noch mit machen was ich will. Das dies dann doch nicht so einfach ist, stellte ich nach wenigen Minuten fest.

GTM kommt mit einer Reihe von vordefinierten Tags, Regeln und sogenannten Makros. Zunächst setzt man einen Container auf. Diesem sollte man, vor allem als Agentur die viele Seiten verwaltet, sinnvolle und sprechende Namen geben.

Danach setzt man am besten erst mal einen normalen Google Analytics Tracking Tag auf. Diesen gibt es als vordefinierten Tag den man in Deutschland aber nicht nutzen kann, da er die IP nicht anonymisiert. Also muss man in Deutschland einen „Custom HTML“ Tag setzten und dort den normalen Tracking Code von der Seite einfügen. Auch kann man so z.B. die Sample Rate für die SiteSpeed Messungen anpassen.

Google Tag Manger Deutsches Tracking Script
Tags „feuern“ nur wenn man mindestens eine Regel (Rule) definiert hat. Beim Standard Tracking sollte man einfach seine eigene Domain als Regel nehmen. Das Makro dazu hat Google vordefiniert und in die Regel muss man nur noch seinen Domainnamen eintragen.

Hier wird auch schon das sehr technische am GTM klar. Makros reagieren auf „Events“ auf der Seite, auf der der Container ist. Diese Makros lesen bestimmte Daten aus. Im obigen Fall eben den Domainnamen oder, genauer, die URL. Dadurch können vielfältige Regeln mit nur wenigen Makros angelegt werden. Ich kann das gleiche Makro auch für andere Seiten verwenden. Das ganze ist im sogenannten „dataLayer“ abgelegt.


Die Falle hier ist das Wort „Events“. Diese wird schnell mit den Google Analytics Events (Ereignissen) verwechselt. Das Wort „Event“ ist aber im Namespace des GTM und darf nicht nochmals verwendet werden.

Nicht 'event' verwenden da dies im Namespace des GTM liegt
Um Events, also nicht Seitenaufrufe, aber Interaktionen, zum Beispiel Klick auf eine Top Ten Liste, auf einer Website zu tracken könnte man folgenden Code benutzen: _gaq.push(['_trackEvent', 'top 10', 'click', 'no 9']); In GTM Notation sieht das so aus: dataLayer.push({'category': 'topten', 'action': 'click', 'lable' : 'no 9', 'event': 'internal click'});

Hier hatte ich zunächst ein dataLayer Makro eingesetzt das auf den Wert “internal click“ reagierte. Das funktionierte aber nicht, da man in dieser Art Makros das Wort „event“ nicht als Variablennamen verwenden darf. Stattdessen muss man hier das vordefinierte „Custom Event“ nutzen. Danach kann man den Tag aufsetzten und hier wiederum den vordefinierten Google Analytics Tag verwenden mit der Option „Event“. Jeder Wert der vom dataLayer übergeben würde, außer eben „event“, muss über ein Makro abgefangen und hier übergeben werden.
Google Analytics Event Tracking in GTM

Google Tag Manger und Ecommerce Tracking

Ecommerce Tracking ist noch nicht vordefiniert, muss also nach obigem Muster von Hand gebaut werden. Und so geht’s:

  1. Zunächst schreiben wir den Teil des JavaScripts, der die eCommerce Daten enthält, in den dataLayer.
    <script>
    dataLayer.push({'transId' : '1234', 'affiliation': 'Acme Clothing', 'total' : '23.98', 'tax': '1.29', 'shipping': '5' ,'city': 'San Jose','state': 'California', 'country': 'USA', 'event': 'addTrans'});
    dataLayer.push({'transId' : '1234', 'sku': 'DD44', 'productName': 'T-Shirt', 'variation': 'Green Medium', 'unitPrice': '11.99', 'qty': '1', 'event': 'addItem'});
    dataLayer.push({'transId' : '1234', 'sku': 'DD45', 'productName': 'T-Shirt', 'variation': 'Blue Medium', 'unitPrice': '11.99', 'qty': '1', 'event': 'addItem'});
    <script>
  2. Danach fügen wir einen Custom HTML Tag in den Container ein, in den wir das Javascript schreiben, der das Ganze in einen Google Analytics Ecommerce Tag umschreibt. Dazu müssen wir zunächst rausbekommen an welcher Stelle sich die Produkte für den „addItem“ Aufruf befinden. Da wir potenziell unendlich viele dataLayer Objecte auf einer Seite haben, können wir dies in einer simplen for() Schleife machen. Die Array Ids stecken wir ein neues Array durch das wir anschließend nochmals loopen. Mithilfe dieser Ids greifen wir auf die richtigen Objekte zu. Wir können dies nicht sicher im ersten Durchlauf machen da immer erst addTrans() aufgerufen werden muss. Im zweiten Durchlauf bauen wir dann die addItem() calls auf. Zum Schluss sind wir sicher alles in der richtigen Reihenfolge aufgerufen zu haben und können „addTrans“ aufrufen.

    <script>
    var j = 0;
    var dataLayerIndex = new Array();
    for(i=0;i<dataLayer.length;i++){
    if(dataLayer[i].event==='addItem'){
    dataLayerIndex[j] = i; j++;
    }
    if(dataLayer[i].event==='addTrans'){
    _gaq.push(['_addTrans'
    , dataLayer[i].transId, // order ID - required
    dataLayer[i].affiliation, // affiliation or store name
    dataLayer[i].total, // total - required
    dataLayer[i].tax, // tax
    dataLayer[i].shipping, // shipping
    dataLayer[i].city, // city
    dataLayer[i].state, // state or province
    dataLayer[i].country // country
    ]);
    }
    }
    for(i=0;i<dataLayerIndex.length;i++){
    _gaq.push(['_addItem',
    dataLayer[dataLayerIndex[i]].transId, // order ID - required
    dataLayer[dataLayerIndex[i]].sku, // SKU/code - required
    dataLayer[dataLayerIndex[i]].productName, // product name
    dataLayer[dataLayerIndex[i]].variation, // category or variation
    dataLayer[dataLayerIndex[i]].unitPrice, // unit price - required
    dataLayer[dataLayerIndex[i]].qty // quantity - required
    ]);
    }
    _gaq.push(['_trackTrans']);
    </script>
  3. Wir müssen nun eine Regel definieren die auf das Event „addTrans“ reagiert. Anders als im Tutorial Video von Google würde eine URL-Regel dazu führen, das der Tag sofort ausgeführt wird, auch bevor der Google Analytics Tracker initialisiert ist. Das würde dazu führen, dass das eCommerce Tracking ins leere läuft. Hierzu einfach das Macro „Default Event“ aufrufen und als wert „addTrans“ eingeben.

E-Commerce Tracking in Google Tag Manager
Was soll das ganze nun? Es ist viel zu technisch als das nicht Entwickler oder WebAnalysts dieses Tool wirklich verwenden können. Die IT kann auch nur bedingt umgangen werden, da Ecommerce Tracking, Event Tracking etc. noch nicht automatisch durchgeführt werden können und der Code auf der Seite immer noch angepasst werden muss. Am Beispiel des Ecommerce Trackings jedoch kann man sehen wie mächtig dieses Werkzeug dann doch ist.

Google Analytics kann ja nicht mehrere Währungen in einem Profil verwalten. Ich könnte auch eine Währungsbezeichnung, z.B. USD, mitgeben und dann die Daten in ein anderes Google Analytics Profil loggen. Das ganze müsste nur einmal von der IT angelegt werden und ich kann dann in GTM verschiedene GA Profile ansprechen um die Transaktionen zu loggen oder eine Custom Variable zu speichern mit der ich anschließend meine Daten zerlegen kann. Es wäre nicht mehr nötig unzählige Tracker auf der Seite zu initialisieren nur um verschiedene Währungen zu loggen.

Wenn im Laufe der Zeit immer mehr Tags von Google angeboten werden, wird es sicherlich einfacher werden für Nicht-Techniker mit GTM umzugehen, bis dahin stehen WebAnalysten zur Hand.

[UPDATE]

Ich habe den obigen Code im Google Tag Manager Forum geposted. Offenbar mag Google meinen Code und würde ihn gerne im nächsten Release benutzen.

Google antowrtet auf David Hefendehls Post im Google Tag Manager forum

Kommentare
1

Marco

Kann der Code für das eCommerce Tracking noch so verwendet werden, auch wenn das Thema schon älter ist? Den Code für das DataLayer muss ich doch auf der letzten Seite im Bestellprozess einfügen, oder täusche ich mich da? Zitat: "Zunächst schreiben wir den Teil des JavaScripts, der die eCommerce Daten enthält, in den dataLayer."

am 09.10.2013

2

Lilian

Hallo, das thema ist wirklich schon sehr alt, aber ich habe jetzt im moment genau das obenstehende problem. e-commerce tracking... und eigentlich habe ich die selbe frage wie marco.

am 17.11.2014

3

David

Hallo Marco und Lilian, Inzwischen hat sich der Code etwas verändert und es gibt eine standard Implementation. Hier der Link: https://support.google.com/tagmanager/answer/3002596?hl=en Zusammengefasst werden nun Variablen wie SKU und transId erwartet und standardmässig ausgelesen sobald diese im dataLayer liegen. Man muss sie nur nach der Namenskonvention benennen und den dataLayer fühh mit Daten bestücken. David

am 17.11.2014

Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar