Debugging Google Tag Manager remotely

So your website is equipped with Google Tag Manager (good).
But your webmaster/IT contact is AWOL/bankrupt/defunct (bad).
On top of that, let’s assume that you’re trying to debug something complex such as an e-commerce transaction but you have no way to place test orders to perform basic debugging.
Long story short: debugging Google Tag Manager can prove tricky! But fear not, here is one reliable method you can use!

This is how we do it.

Requirements:

  • Publishing rights to the GTM container
  • Admin access to another website and its Web server logs

Strategy:

  • Collect the GTM dataLayer object on key pages of the website
  • Encode the dataLayer
  • Use the encoded dataLayer as payload to call to remote website
  • Parse server log for results
  • Analyze and debug
  • Profit!

Sounds easy enough? Let’s dive right into it!

Collecting your GTM data layer – in GTM

The first thing you want to do is access GTM and create a new Custom HTML tag.
That tag will capture the dataLayer, encode its contents and send it to your “backup” website where it will show in the server logs.

<script>
// Point to the data layer object; change name of data layer object if needed
var _dl = window.dataLayer;

// Transform the data layer's JSON into a string
_ds = JSON.stringify(window.dataLayer);

// Encode the data layer string
_dc = encodeURIComponent(_ds);

// Now use a basic bit of async script calling to the remote website using the encoded string as payload
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function(){
// Success, yay! o/
};
script.src = '//yoursite.com/debug/?dl='+_dc;
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
</script>

The above code should be pretty straightforward 🙂
Now save your Custom HTML tag and give it a trigger, ideally after a page loads completely (gtm.load) but you can defintely use the tag for any GTM event.

You should be all set, all that remains is to *drumroll* hit that big SUBMIT button and publish your GTM container..

Once your GTM container is published, your tag will send a hit to the backup website.
WARNING: on sites with large amounts of traffic, this can lead to a big performance hit!

Now let’s see how that data was collected!

Finding and analyzing the log file

Depending on your server’s technology, your log files may be stored in a very different place.
On Linux-ish systems, web server logs will be available at filesystem locations such as:

  • /var/log/www
  • /var/apache2/logs
  • /home/www/mysite/logs

If not sure, ask your friendly sysadmin
Once you find your access log, look for entries that contain “debug/?dl=” (the path the payload collection URL).
A match would look like so:

OK, that looks ugly. Ew. I mean, debugging Google Tag Manager is usually not pretty but now we need to make this nice and readable.
Personally I use a text editor with built-in URL decoding functions such as TextMate but you can use Textpad, Notepad++ or any other “advanced” text editor.
For the purposes of this exercise, here is what the decoded, reformatted output looks like:

{  
   "gtm.start":1527850999722,
   "event":"gtm.js",
   "gtm.uniqueEventId":0
},
{  
   "ecommerce":{  
      "purchase":{  
         "actionField":{  
            "id":"T12345",
            "revenue":"35.43",
            "tax":"4.90",
            "shipping":"5.99",
            "coupon":"SUMMER_SALE"
         },
         "products":[  
            {  

            }
         ]
      }
   },
   "eventCategory":"ECOMMERCE",
   "eventAction":"TRANSACTION",
   "eventLabel":"MOBILE",
   "event":"purchase",
   "gtm.uniqueEventId":29
}// More JSON goodness below

Of course the above is a basic example of a data layer implementing enhanced e-commerce for Google Analytics but your data layer is your own so if you’re pushing custom elements, they will be in the log as well.
In the case of my latest audit, I was able to capture the structure of a custom data layer and pinpoint the elements I needed to capture from the page via GTM to power a variable or define a trigger.

Now what?

Well, now that you have access to that data, you have at least some level of insight into the material you have to work with. You may not have access to the site’s code yourself but you can use GTM to go around it – or at least neutralise it to inject your own data elements.

Of course the methodology I provide in this post is basic and limited to the GTM data layer but you can defintely adapt it to your needs and expand it to capture more page data, such as: DOM elements, META tags, JavaScript variables…

Have you tested my method for debugging Google Tag Manager? What for? Let me know in the comments!

Author: Julien Coquet

Expert de la mesure d’audience sur Internet depuis plus de 15 ans, Julien Coquet est consultant senior digital analytics et responsable produit et évangélisation pour Hub’Scan, une solution d’assurance qualité du marquage analytics. > A propos de Julien Coquet

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.