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.

Here is one method you can use.
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 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 znd 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.
Now we need to make this pretty 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 debug method? What for? Let me know in the comments!