In order to work with Google Analytics and Google Tag Manager often requires a lot of debugging, there are some really good tools that can help you with your debugging.
Google Analytics Debugger Extension
This is an extension of Chrome that allows seeing what's actually being sent into Google analytics. This information gives us a lot of information on the fly, such as what Google Analytics Property is being used, what kind of hit type is used, events, custom dimension and among many other things. It is displayed on the chrome console.
To use this extension, you need:
- Goes to Chrome extensions
- Search Google Analytics Debugger
- Click on Add to Chrome.
- Click on Add extension.
- Goes to the site where GA or GTM is added.
- Turn it on by clicking its icon to the right of the corner in the address bar
- Open the Chrome console
- Refresh page
This is a Chrome extension that helps you validate implemented Google's product script are working correctly. Using Tag Assistant you can validate all the events fired on Google's product implemented.
- Validate if GTM or GA is active on your site. Show if there is some error with the implementations.
- Record. You can validate data in real-time.
To use, you need:
- Goes to Chrome Extensions
- Search Google Tag Assistant
- Click on Add to Chrome
- Click on Add extension
- Click blue tag icon in the right of the corner in the address bar.
- Click Enable
- Refresh your page
- If any Google's products are implemented on that page, you will start seeing a particular number within that blue tag icon which represents the count of tags found in the main window of Google Tag Assistant.
- Click any tag you want to get more details about.
- Information as what data was passed, what could be improved, how many events were fired, etc.
Tags found by Tag Assistant is not the same ones that you have on GTM. In this case, a tag is a script of Google's product found on the site.
if you want to debug tags within GTM and see variables, use Google Tag Manager's Debug Feature.
Google Tag Manager's Debug Feature.
Google Tag Manager has a debug mode in its interface to test any change before publishing it. The good part with this tool is that it allows you to see what tags are firing and which ones are not, and the values for all built variables when a trigger is fired, so, you can dive deeper into the data. Also, you can validate which values are available depending on three default events:
- Dom Ready
- Window loaded
This is very valuable while implementing GTM on a site since it allows you to actually see what the changes you've made really do.
To use, you need:
- Goes to GTM interface
- Click on the Preview button in the top right corner(near submit button)
- After you enable this mode, a large orange notification banner will appear.
- Navigate to the site where the GTM container code is implemented.
- Refresh the page
- Debug console window will appear at the bottom of your browser.
This console is displayed only on your computer as you preview the site, and is not visible to your other websites visitors.
One of the tools is the console of your browser. It's found under the Development Tools and can easy accessed by pressing Cmd + Opt + J.
Since GTM is heavily dependent on JS, we can have access to dataLayer on the DOM. And of course, we can also use it to push variables into the dataLayer for testing proposes.
Table of Content