Debugging a dataLayer push event in Google Tag Manager

A question on the Google Tag Manager support forum caught my attention and I wrote a response there, which is now the basis for this blog post.

In case you were ice climbing in the Hymalayas or under a rock for the last couple weeks, Google released a Tag Management platform called Google Tag Manager last week.  This platform enables marketers to manage marketing tracking tags without the need for IT involvement to launch new tags or make tag changes.

The Data Layer Feature of GTM

One of the very awesome features of Google Tag Manager is called the “dataLayer”.  This is a concept whereby key information about the state of a page, session, and visitor is baked into a JSON object in the page, making this information available to GTM and other tools.  The dataLayer concept is not proprietery, so it can be used by anything – even another tag management tool.

The dataLayer can be setup initially during building of the page and rendered into the page source, or added to later via a “push” of data that could be completed on any kind of browser event.  Therein rests a huge opportunity, and some challenges.

As one user put it on the GTM support forum:

[info]
So I’ve been playing with GTM a bit now and this events thing is doing my head in. I have a Macro: Name: “EventEvent” dataLayerVariableName “event”. This in theory should extract all values from a dataLayer push when it receives something like
dataLayer.push({‘event’: ‘testGTMevent’}).

Now let’s create a rule around this. Rule name: “TestEvent” Conditions: “EventEvent equals testGTMevent”. So far so easy. Let’s build a tag. Tag Name: “test tag alert” Tag Type: “Custom HTML Tag” HTML: ”
<script>alert(‘foo’);</script>”
Rule: TestEvent

This should as soon as the
dataLayer.push({‘event’: ‘testGTMevent’})
is fired pop open an alert box. Thing is, it doesn’t. Any ideas?
[/info]

The Debugging Process

The answer to the above question isn’t direct.  Why isn’t it working?  I don’t know.  I’d have to debug it.  So, here’s some insight into how debugging Google Tag Manager works.

First, enable the Preview + Debug mode within GTM.

You can do this through the Version management UI for your container.

Second, see what the dataLayer object contains using your browser debugger console.

Third, once you’re in Preview + Debug mode, you can see what tags are firing when.

Along with this, watch the debug console in your browser debugger print out what GTM is doing.

Coming to an Answer

To complete debugging for the question posed above, we would need to determine that:

• The dataLayer push event is modifying the GTM object and correctly adding to it
• That GTM is hearing this and running its rules against it
• And that a GTM rule triggering a tag runs properly

If anything is broken along the way, then start by looking into the Macro inside GTM.

So, there you have it!  A little about how to debug issues with Google Tag Manager…  Hope this helps!

-Caleb