(Last updated June 2014: Read the latest post on the extension, GTM Sonar v1.2.)
I updated my Chrome Extension, GTM Auto-Event Listener Debugger v1.1. I released the first version a couple of days ago. The extension can be used to debug Google Tag Manager’s auto-event tracking and its compatibility with web page markup.
Download the latest version here.
I did some major changes, and here’s the rundown.
I transferred all debugger actions into a pop-up, which opens when you click the Browser Action.
(Last updated June 2014: Read the latest post on the extension, GTM Sonar v1.2.)
Many of the Google Tag Manager articles on this blog could be considered hacks, in that they extend the out-of-the-box features of GTM in ways that will surely not be officially supported by Google. The crux of the problem is that lots of folks are taken by surprise when GTM refuses to work properly on their site, or when they have trouble tracking key elements on the page template.
Over the last couple of posts I’ve mainly been doing proof-of-concept (POC) tests with Google Tag Manager. The great thing about a POC is that you don’t really need to have any viable results or insight-driving technological innovations. The point is to showcase some feature of the platform on which the experiment was conducted.
In this post, I’ll take a care-free step into the world of POCs again. My goal is to do a simple split test in order to identify which variant of a landing page (or key element thereof) produces the most conversions.
Let’s say you want to set up a rudimentary email alert system in your Google Tag Manager implementation. Say, for example, you want to receive an email every time an uncaught error occurs on your website. It’s not a very good use case, since a large website can spawn hundreds of uncaught exceptions in a short period of time, but let’s just pretend for now.
If you know your JavaScript, you’ll know that you can’t send mail using client-side code.
In this post, I’ll walk you through a tutorial on how to create a Google Tag Manager extension. This extension will be a new listener, whose sole job is to listen for changes in the HTML and CSS markup on the page.
The reason I’m teaching you how to create a DOM listener is simple. Ever so often I come across people asking for help, but they are unable to touch on-page code.
If you know your Google Tag Manager, you know that GTM pushes three data layer events into the queue when any page with the container snippet is rendered. Each of these three events signals a specific stage in the page load process. Here are the events (be sure to read my guide on GTM rules to understand further what these events do):
gtm.js - This is pushed into the data layer as soon as GTM is initialized and the container is loaded.
There is a new, updated version of this article for the new version of Google Tag Manager. I strongly suggest you read that as well!
I really enjoy the ad hoc Q&A sessions my blog posts have inspired. I haven’t said this enough, but I am really, REALLY grateful to people who take their time to comment on my posts, even if it’s just say a quick “Hi!”. The main reason I enjoy getting blog comments is because they often turn into blog posts.