Handy dataLayer debugging tool for Chrome

One of those posts that were laying around on my drafts and that I’ve decided to publish. I know there’re out there some good and well stablished tools that helps you to debug your Google Tag Manager implementation like the dataSlayer extension. But in the previous months I’ve been using a little JavaScript snippet that allows me to view in easy way the pushes that are being sent to Google Analytics in real-time in a nice way:

This is how the debugging will looks like:

tool

It works for Chrome +36, and it’s based on a few lines of code, to start using it you’ll just need to paste those lines into your browser console, and you’ll start seeing any new dataLayer pushes that are sent for the current loaded page:

Object.observe(dataLayer, function(c) {
    for(i=0;i<c.length;i++)
    {
	if(c[i].type=="add")
	{
            console.log("%cNew dataLayer Push\n", "color: blue; font-size:15px;");
	    console.log(JSON.stringify(c[i].object[c[i].name], null, '\t'));
	}
    }
});

You can grab the code too from this gitHub repository: https://github.com/thyngster/universalanalytics/blob/master/datalayer_monitor.js

A nice way to have this little debugger at hand is to add a new bookmark in Chrome and set the URL to this piece of code. From then on, clicking on the bookmark will enable the debugging for the current loaded page

 

javascript: (function() {
    Object.observe(dataLayer, function(c) {
        for (i = 0; i < c.length; i++) {
            if (c[i].type == "add") {
                console.log("%cNew dataLayer Push\n", "color: blue; font-size:15px;");
                console.log(JSON.stringify(c[i].object[c[i].name], null, '\t'));
            }
        }
    });
})();

bookmark

Not the best debugging tool, but pretty handy, hope someone finds it useful at some point.

David Vallejo

Google Analytics Consultant and implementer. I have some experience with Google Tag Manager
Follow me: @thyng

2 Replies to “Handy dataLayer debugging tool for Chrome”

  1. HI David!
    Please, double check your code for the bookmark. I think you missed additional }) in the end, since without them the script shows unexpected end of input in the console.

    Anyway, thank you for the handy tool!

    1. Hi Ilya, there was some weird copypasting error going here. I’ve updated the post with the correct code version! . Thank you for letting me know about this error.

Leave a Reply

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