GTM DataLayer Test Automatisierung

GTM Data Layer Tests sind üblicherweise eine zeitaufwändige Angelegenheit. Oft müssen verschiedene Szenarien simuliert werden, wobei überprüft werden muss, ob das Data Layer die entsprechenden korrekten Werte enthält. Im idealen Fall sollte man die Angaben im Data Layer auch nicht nur testen, wenn eine komplett neue Version der Webseite live gestellt wird, sondern auch bei kleineren Updates bzw. generell von Zeit zu Zeit, um sicherzustellen, dass das Tracking auch noch 100% korrekt funktioniert.

Wenn Data Layer Tests öfters durchgeführt werden oder wenn innerhalb der Setup- bzw. Launch Phase einer Webseite wiederholte identische Data Layer Checks durchgeführt werden, sollte überlegt werden, ob man diese Tests nicht automatisieren kann, um Zeit zu sparen.

Um hierfür eine passende Lösung zu finden und um alle gewünschten Tests automatisieren zu können, habe ich diverse Tools wie Selenium, PhantomJS und letztendlich auch CasperJS ausprobiert, was meiner Ansicht nach die besten Möglichkeiten bietet. Bei der Auswahl des Testing-Tools sollte hierbei auch sichergestellt sein, dass asynchrone Nutzerinteraktionen und Events (z.B. Klick auf einen Button) automatisch überprüft werden können. Zusätzlich dazu bietet CasperJS einen weiteren Vorteil: Es gibt eine Chrome Browser Extension, mit der man direkt Sessions mit Nutzer-Interaktionen aufzeichen kann, die man dann direkt als CasperJS Code ausgeben und bearbeiten kann. Ein Feature, welches dabei hilft, eine Menge Zeit bei der Erstellung von automatisierten Tests zu sparen.

 

Benötigte Software für die automatisierten Data Layer Tests (funktioniert unter Windows, Linux, MacOS) :

 Um Data Layer tests zu automatisieren, müssen die folgenden Schritte absolviert werden:

  1. Nutzung des CasperJS Recorder Chrome Plugins, um die gewünschte Session inklusive der Nutzer-Interaktionen, die in Bezug auf den Data Layer Check überprüft werden sollen, aufzuzeichnen

  2. Speichern des resutierenden CasperJS Codes in eine Datei

  3. Hinzufügen einer globalen Variable casperDataLayer am Anfang des Code Files, wobei diese Variable dazu dient, die Data Layer Informationen zu speichern. Das entsprechende Objekt erhält zusätzlich eine Funktion, mit der man den aktuellen zusammengeführten Status einer Data Layer Variable abfragen kann:

    var casperDataLayer = [];

    casperDataLayer.get = function () {
      var result = {};

      for (var i = 0; i < casperDataLayer.length; i++) {
       for (var key in casperDataLayer[i]) {
        result[key] = casperDataLayer[i][key];
       }
      }

     return result;
    }

  4. Hinzufügen einer Callback Funktion die die globale casperDataLayer Variable aktualisiert, wenn Daten innerhalb der Webseite in das Data Layer gepusht werden. Zur Kommunikation zwischen der Webseite und dem CasperJS Skript wird die Funktion window.callPhantom verwendet:

    casper.on('remote.callback', function (param) {
      casperDataLayer.push(param);
    });

  5. Nach jedem simulierten Pageload muss folgender Code ausgeführt werden, um das initale Data Layer auf der Seite abzurufen und um die originale dataLayer.push Funktion mit einer eigenen Funktion zu überschreiben, die alle Informationen an CasperJS weiterleitet:

    var initialDataLayer = casper.thenEvaluate(function () {
      return dataLayer;
    });

    for (i = 0; i < initialDataLayer.length; i++) {
      casperDataLayer.push(initialDataLayer[i]);
    }

    casper.thenEvaluate(function () {
      originalPush = dataLayer.push;
      dataLayer.push = function (param) {
       window.callPhantom(param);
       originalPush(param);
      }
    });

  6. Hinzufügen von Assertion Code für jeden zu testenden Event. Beispiel:

    casper.then(function () {
      test.assertEquals(casperDataLayer.get()["event"], "genericEvent");
      test.assertEquals(casperDataLayer.get()["eventCategory"], "Navigation");
      test.assertEquals(casperDataLayer.get()["eventAction"], "Home");
    });

  7. Ausführen des Tests mit dem Kommandozeilen Aufruf casperjs test <testfile.js>