Google Tag Manager Event Listeners: How to Debug (Part Two)
In the first installment of this two part series, we created our first Google Tag Manager event listener to track all outbound link clicks. In part two, we are going to test this setup and make sure that our trigger logic fires tags with the correct outbound link information.
Preview and Debug mode
To kick off this process, enter Preview and Debug mode. Preview and Debug mode is Google Tag Manager's default testing console that tracks all on-page events and the tags, triggers and variables that are being triggered with each event.
Brief interruption: For information on this tool, as well as other GTM debugging tools, please take a look at my article, Google Tag Manager Debugging Tools.
Once we have received confirmation that the preview mode is enabled (orange bar in the screenshot below), it is time to navigate to our website. If you correctly entered preview mode on your website, then you should have seen a window open at the bottom half of the page with the GTM branding.
(Preview mode notification in the Google Tag Manager interface)
(Preview mode enabled on a website)
Within the preview console, you will notice three sections that contain information about events happening on the page and GTM elements that are triggered.
Section One: The event sidebar that displays all of the Google Tag Manager triggers in chronological order of when they are triggered, as well as any DOM/dataLayer interactions.
Section Two: To the right of the event sidebar is a summary section that displays the individual tags, variables and dataLayer content that is fired for with each event
Section Three: The final portion of the interface is the GTM element navigation tab. This section allows you to rotate through the tag, variable and dataLayer information that is associated with the selected event.
Now that we understand what is happening in preview mode, lets click on an outbound link and see if our tag is triggered.
In my example, I clicked on a link titled "Google Tag Assistant" and a trigger titled, gtm.linkClick appeared in the event sidebar. gtm.linkClick represents the built-in link click listener that we used as our trigger method.
*(Our tag appears on the right click!)*
Since our tag appears on this action, it clearly represents that my trigger was set up correctly, but let’s drill into our tag to make sure that it is the proper event tag and is sending the right information. To do this, simply click on the **GA - Outbound Link Click - All Pages** tag to reveal information about the tag that was triggered.
Within this tag we will see that it is an event tag and sending the right field values of *Outbound Links - Click - element url
But let’s make sure that the dynamic value for element url is being passed correctly. To see if the right string is being passed, click on the “Variables” link in the debugger navigation and scroll down to the element url. As you are able to see from this information, the element url is being passed correctly.
Now that we have confirmed that the trigger is working and the appropriate information is being collected, you may assume that we are finished, but we still have one more step left before we can be content with our GTM setup.
The final step is to check if the data was successfully collected by the Google Analytics server and being reported in our account. There are two ways to determine if this process is happening.
The first way to validate this process is to see what information is being sent with each pixel and if the server successfully received the cookie information. In order to test for this process, we must bring up the browser developer tools and on the Network tab search for elements that contain collect?. This is what every Google Analytics pixel is prepended with and will point us to the type of tracking that is being tracked with each pixel. Once we have located pixels with "event" in the filename, drill in and look within the headers section to see if there are values for three parameters ec, ea, el that match the information with our tag. If this is confirmed, then the information is being collected correctly.
The second way test is to look at the real-time reporting in Google Analytics. The real time reports on server hits only seconds after they occur and informs us if the data is being reported.
Once we have validated our GTM implementation with both methods, we can officially write off on the implementation and publish our tag to production.
Congrats on creating, testing and publishing your first Google Tag Manager event listener!