Google Tag Manager makes your life easier, but is still a technical solution in need of troubleshooting and debugging. While Google offers Tag Manager now to anyone looking to sign up, some potential adopters are hesitant to implement the product until they find answers about how they can test whether the product is working appropriately for their site.
They are not alone. While beta testing the Google Tag Manager solution, I had several questions about how to validate that my tags were working properly and that data was being sent to not only GTM, but also to the services that I configured (namely AdWords conversion tracking and Doubleclick).
Judging from the number of emails we have received from potential users of Google Tag Manager about whether the system provides reporting or other assurance that tags have fired, this appears to be a common concern from the potential GTM user base.
The truth is that right now the product is very robust from a technical standpoint – in my testing and troubleshooting, it works exactly as it should. It's an elegant and lightweight solution for tagging your site.
With that said, like any new program coming out of a stealth alpha release, the interface for the program, ease of troubleshooting and the way you mark up your pages quality assurance is not clear today as it will be months from now. At the moment, troubleshooting Google Tag Manager requires an intermediate to advanced understand of coding in JavaScript, knowledge of how http headers are sent to servers and the installation of browser extensions to verify that everything is working as intended.
Fortunately, there are not only resources available from Google, but also several tools for your browser that allow you to debug and troubleshoot your installation. Here are 5 methods that you can use to make your life easier as you experiment with and implement Google Tag Manger.
1) Write Good Code and Validate Your JavaScript
This may sound obvious, but as they say in sports, “the best offense is good defense”. This couldn't be more true in tagging your website; most errors will be the result of end user coding errors and your best defense will be to write validated code. We know that the folks at Google have painstakingly tested and ensured that their JavaScript tagging method works appropriately. They created an enterprise level product that is meant to work seamlessly across millions of websites with thousands of unique technology combinations. You can trust that their code will work (and if it doesn't, they will issue a fix seamlessly behind the scenes). But can you trust your own?
Where most installations will fall short is with incorrect page markup on end user websites. This will likely be in the form of incorrect syntax causing JavaScript errors or improper calling of data layer and macro functions native to GTM.
The easiest way to troubleshoot your JavaScript is within your browser. In Chrome for Mac, you can get here from the view menu:
In Firefox for the Mac, it looks like this:
In both browsers, you may find quirks and nuances specific to each – this is just the nature of the beast when it comes to cross-browser testing. With that said, the principles are the same: if you have an error in your JavaScript code, there is a decent chance that this error will not only affect the line of code it was written on, but also all of the JavaScript on the rest of your site! This may include Google Tag manager and any other dynamic content on your site.
The process for fixing is straight forward, but may take a while. Identify errors, go to your code and attempt to fix the errors, then check your console again to see if errors are still popping up. Once your debugging console shows no errors, you can move on to the next step.
2) Use Google Tag Manager's Preview Link to debug in Firefox with Firebug
First of all, please note that this method works best in the Firefox Browser with Firebug installed.
Each time that you modify your Google Tag Manager installation within the interface, you will need to create a new version of your code in order to publish it to the web. Before deploying a major initiative, it is highly recommended that you test your installation to make sure everything is working properly. You can do this using the Save and Preview button when creating a new container. We go over this and other debugging strategies in our Google Tag Manager Tutorial found here.
When clicking on this button, you will see the option to view your site in debug mode
Then as you navigate your site, you will see the status of your tags at the bottom of your screen.
While using the debugger method outlined above for Firefox and Firebug will let you know whether your tags are being fired, this method does not let you see the exact data that you are sending to these tagging programs. Therefore, this method is meant to be a way of doing basic checks on your installation. To see the exact values submitted, I recommend using Google Chrome's Developer Tools.
3) Use the Google Chrome Browser's Developer Tools
If you have a need to see the exact data that you are submitting via Google Tag Manager, you will need a solution that provides the exact compiled code that you are sending. Fortunately, this is something that can be achieved quite easily in Google Chrome, using the browsers built in Developer Tools.
On a Mac, you can access developer tools through the view menu.
You will notice that an entire console is enabled at the bottom of your screen with several options. You will also notice that much of these tabs are completely blank. This is because you will need to refresh your browser in order for this information to be populated. Refresh your browser and go to the Network tab.
Within the network tab, you will notice all kinds of excellent information. You will see the images for your site, scripts that you have in place, and (hopefully) that your Google Tag Manager code has fired correctly, as well as any tags that you have added to your container. For example, in the above picture we can see that both GTM and Google Analytics are in pristine working order.
The network tab in Chrome is an invaluable troubleshooting tool for any webmaster or website owner, and it goes well beyond just using GTM. You can use this tool to fully understand the footprint of your site on the web, how your images or scripts may affect load time, and to understand the actual values you are sending across the web each time a visitor comes to your site. This can be very powerful and revealing!
4) Understand the Benefits and Drawbacks of Other Debugging Tools
In addition to the two tools above, there are several other tools that you can use to debug your GTM installation. In the interest of time, I will not get into details for the benefits of each. Here are some additional tools to consider if Firebug and Chrome don't meet your needs:
- Firebug Lite (works on all browsers vs. just Firefox for full version)
- Charles
- Fiddler (Windows only)
- Live HTTP Headers for Firefox
- Safari's Built in Activity Window
While I am familiar with these tools, I do not have an extensive list of benefits/drawbacks for each. If anyone reading this has a strong recommendation for any of these tools, please do leave a comment!
5) Implement a tag on your site with Google Analytics, and then view your real time reporting in GA to make sure your tags are firing properly
Have you tried the above and still unsure of what to expect? Or maybe you are afraid to try the above? There's one more option that I recommend to get the answers that you need, and that is the Real Time analytics feature in Google Analytics.
If you are unsure of whether everything is firing properly, why don't you try to see what you are sending to your website in real time? This should be very easy to accomplish. Start by installing GTM per Google's instructions, and then tag a relatively obscure sub-page with GTM and your Google Analytics Tracking code.
While this method only ensures that your Google Analytics installation is properly sending traffic, it also allows you to test your Macros, Rules and your data layer using absolute values, instead of speculating that your code is working properly because tags were fired.
You can achieve this by looking at the content report for your site and see who is visiting the page with your tagging placed on it.
There are Many Ways to Troubleshoot Your Google Tag Manager Installation
Until a formal debugging and troubleshooting tool is published, you will need to be diligent with the way you install GTM to make sure that you have coded everything correctly, and that the data you are sending to your analytics and remarketing tools is accurate. This post is designed to get you on the right track, and there are many more places that you can go if you still need help. My recommendation would be to utilize an official GTM partner to help you get started in the right direction (note: my company, Three Deep Marketing is a Tag Manager partner).
Do you still have questions about how this should all work? Please leave a comment and I'll get back to you as best I can!