Automated GTM DataLayer Testing

Testing a GTM datalayer setup is usually a very time consuming task as you often have to simulate different scenarios and manually check if the datalayer contains the expected values so that everything works correctly. In an optimal case, datalayer tests should also not only be performed before and after a new website is put live but also on minor technical updates or generally from time to time to ensure that the tracking is working correctly.

If you plan to run datalayer tests on a regular basis or if you just want to save time during the testing and launch phase of a website where usually checks are performed over and over again, you should think about automating datalayer tests.

To find a solution which is easy to implement and which offers all the required features, I played around with different tools like Selenium, PhantomJS and finally also with CasperJS, which seemed to be most suitable. I also wanted to be able to test the tracking of asynchronous user interactions (i.e. clicking on a button) and checking the updated datalayer afterwards, which is possible with a tool like CasperJS. Besides this, CasperJS provided another advantage from my point of view: There's a Chrome extension available, which can be used to record a session of user interactions and which then outputs the CasperJS code. Therefore, you can again save a lot of time preparing the test code framework.

Prerequisites for automated datalayer tests (working on Windows, Linux, MacOS) :

 

 To automate your datalayer testing, you need to complete the following steps:

  1. Record your session, including the user interactions you want to check the datalayer for, using the CasperJS Recorder Chrome Plugin

  2. Save the resulting CasperJS code to a file

  3. Add a global variable casperDataLayer to the beginning of the code file with a function to retrieve the current merged state of the datalayer:

    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. Add a callback function that updates the global casperDataLayer variable when data is sent from within the simulated webpage process using the window.callPhantom function:

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


  5. After each simulated pageload, execute the following code to get the initial datalayer on the page and to overwrite the dataLayer.push function with a custom one that also pushes all information to CasperJS using the window.callPhantom function:

    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. Finally add your assertion code on each step that you want to test. Example:

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


  7. Run the test with the commandline casperjs test <testfile.js>