Google Tag Manager (GTM) stands as a valuable tool for marketers and web analytics consultants who aim to track interactions and manage tags on their websites.
GTM facilitates tagging and tracking without delving deep into the complexities of coding.
However, utilizing the full potential of GTM requires a certain level of understanding when it comes to its features. This is especially true when it comes to Debugging with Google Tag Manager.
This article serves as a comprehensive guide to understanding how to approach debugging in Google Tag Manager.
And of course, debugging is a critical step for ensuring accurate data collection and analytics.
The essence of GTM Preview Mode
Preview Mode is a sandbox environment within GTM that allows you to test and debug your tags, triggers, and variables in real-time before pushing them live.
This feature is instrumental in identifying and resolving issues, ensuring that your analytics data is both accurate and reliable.
Debugging in GTM Preview Mode
Initiating preview mode
To begin debugging, click the “Preview” button in your GTM workspace.
This opens a new browser window or tab. Within this tab, fill out your website’s url and connect.
When connected, the window will display your website along with a debug pane at the bottom.
This debug pane will act as your gateway to understanding how tags are firing on your site.
The debug pane organizes information into tabs such as Tags, Variables, Data Layer, Consent and Errors. This structured approach allows for targeted debugging efforts.
Let’s shortly elaborate per tab what they entail, namely:
- Tags tab: Shows you which tags have fired when you visit a page or an event in relation to an action on the website fired. It helps with checking if your tags are configured correctly.
- Variables tab: Lets you see the current values of the captured information. Think of URLs or user actions, at the moment they are being used. It’s useful for making sure the right information is being tracked.
- Data Layer tab: Displays the details of the information being shared between your website and Google Tag Manager. Think of page titles or ecommerce information which you enter in the dataLayer in the case of recommended event tracking or custom event tracking for example.
- Consent tab: Tells you if visitors have provided consent or denied you consent to collect their data. This is especially relevant with the recent introduction of Consent Mode V2. And of course it allows you to keep up standards in relation to privacy laws.
- Errors tab: Highlights any mistakes or issues with your tracking setup, like wrong codes or failed tag firings. It’s essential for finding and fixing problems quickly to keep your data accurate.
Let’s debug via Google Tag Manager
Step-by-step debug scenario
Let’s walk through a typical debug scenario involving a custom event tag that isn’t firing as expected.
Step 1: Enter preview mode
Initiate Preview Mode in GTM to start the debugging in Google Tag Manager. This will open your website with the GTM debug pane visible at the bottom of the screen.
Step 2: Reproduce the issue
Perform the action on your website that should trigger the custom event. For instance, if the event is tied to a button or link click, go ahead and click it.
Step 3: Analyze the debug pane
Look at the “Tags” tab in the debug pane to see if the custom event tag attempted to fire. If it’s not listed, your tag did not attempt to fire at all.
Step 4: Investigate triggers
If the tag didn’t fire, navigate to the “Triggers” tab to check if the trigger conditions were met.
It’s possible that the conditions specified in the trigger did not match the actual action performed on the site. Hence, look into this and see if updating the current trigger attached to the tag could fix the issue.
If not, it could also be, that the set custom event was not pushed to the dataLayer, even though it’s the event your trigger was set to fire upon.
Look into the Data Layer tab and see what information is pushed via the dataLayer. Is your event trigger correctly set with regards to the dataLayer or does it need updating?
Step 5: Utilize additional debugging tools
If the trigger seems to be configured correctly, there are more routes to obtaining insights.
For example, use the Analytics Debugger extension or Chrome Developer Tools to further investigate.
These are tools that can help with providing additional insights. Also, the tools leverage their capabilities to support in identifying if the expected event parameters were not sent from the website. This could suggest a possible discrepancy in the website’s code or GTM setup.
Step 6: Modify and test
Based on your findings, make the necessary adjustments to your GTM configuration or website code.
Effectively, you can think of updating the trigger(s) attached to the Tag you would like to fire at a certain event occurence.
It could mean updating the dataLayer, for which in many scenario’s, the support of a developer is needed as this requires updates in the website’s code.
After updating what seemed to be the problem, repeat the process from Step 1 to test if the issue has been resolved.
Optional Debugging Techniques
Chrome Developer Tools
Chrome Developer Tools, or DevTools, is a comprehensive suite of web development and debugging tools built into Google Chrome.
DevTools offers a wide array of functionalities for debugging GTM.
You can open DevTools by right-clicking on a page and selecting “Inspect” or by pressing Ctrl+Shift+I (Cmd+Option+I on Mac?). Navigate between tabs to use their specific functionalities for debugging.
Interesting tabs in Chrome’s Dev Environment
Elements tab
In the elements tab, you can inspect the HTML and CSS of your page. It’s particularly useful for verifying that certain elements GTM interacts with (like buttons or links) are correctly configured.
Console tab
The console tab displays JavaScript errors and warnings, which can help identify problems with custom JavaScript code in GTM tags or issues with tag implementations. Also, you can check the dataLayer. Type ‘dataLayer’ in the console and see the result.
Network tab
The network tab allows you to monitor network activity on your website. You can see the requests made by GTM and whether they succeed or fail, which is crucial for troubleshooting tag firing issues. In the search bar, enter ‘collect’ and see the request made:
Notice the G101 in the Request URL for example. It represents the provided consent states for the parameters Advertising and Analytics. In this Case, Ads declines and Analytics accepted. As provided by the visitor of the website.
Application tab
The application tag Provides access to cookies, local and session storage, and cache, crucial for debugging issues related to user tracking, preferences, and state management. The tab is particularly useful for:
- Inspecting cookies: Directly view and manage the cookies set by your website, essential for understanding tracking mechanisms and user sessions.
- Cache management: View cached resources (like scripts or images), aiding in troubleshooting problems where outdated resources affect GTM tag firing.
- Service workers: Inspect and debug service workers, relevant for sites that use offline functionality or background processing that could impact analytics tracking.
Analytics Debugger Extension
Personally, I am a big fan of the Analytics Debugger browser extension. The extension offers ease of use combined with detailed insights into how and what data is gathered and shared with Google Analytics.
When scrolling through your website, after making sure the extension is installed, move to the DevTools environment.
Open up the tab of Analytics Debugger and See information concerning GTM and GA4. It will look as follows:
Also, there is the option to debug for many more platforms, E.g, Adobe’s Analytics and/or Piwik.
Now, scroll through the GTM and GA4 events that occured and look at the information provided to see if additional changes are required for your preferred results.
Additionally, the tool will show information concerning Consent Mode parameters, if SGTM is configured and more.
Other browser extensions for Analytics- and Google Tag Manager debugging
In addition to the Analytics Debugger, several other browser extensions can enhance GTM and analytics debugging by providing additional layers of information or simplifying the inspection process. Think of:
- Tag Assistant by Google: Helps you verify the installation of Google tags on any page, including Google Analytics, Google Ads, and GTM.
- DataSlayer: Debug and test tag management (Google Tag Manager, DTM, Tealium) and analytics implementations.
Of course, there are many other options available in the Chrome Extension Store.
And of course, the same goes for the extension stores of different browser environments such as Firefox, Safari, etc.
Have a look in the store of your choice and look through the available options that are relevant to your needs.
Install, test and learn. In case it does not work as expected, or to your liking, delete and reiteratie untill an extension fits your needs.
Conclusion: deepen your understanding of debugging
Debugging Google Tag Manager is essential for optimizing web analytics efforts and obtaining insights in what your visitors are doing.
By familiarizing yourself with GTM’s debugging features, employing additional tools, and understanding interactions with other Google services, you can ensure precise and effective tracking implementations.
Debugging via GTM is relevant for Google Analytics tags, but also for tags such as the Meta Pixel, and other advertising tags, and more.
The key to effective tag management lies in careful testing and debugging.
It’s a fundamental practice to ensure reliable analytics insights which is fundamental for data-driven decision-making. And that’s what we’re aiming for.
Thanks!
If you found this guide helpful, subscribe to our LinkedIn to receive updates whenever we post a new blog!
Share your experiences or questions about the Facebook Pixel in the comments below!
Geef een reactie