How to Use Chrome Dev Tools For Debugging Google Analytics and GTM

Google Chrome Dev Tools allow you to test and debug your analytics implementation to ensure the level of data integrity matches your expectations. As a web analytics consultant I frequently see the consequences of where there has been little or no attempt to test and debug Google Analytics and Google Tag Manager.

This will almost inevitably affect data quality and can lead to a lack of confidence in web analytics data. This means such organisation lack critical website performance and behavioural data and may make poor decisions as a result. A good development and testing process for GTM will help avoid the wrong insights being made and improve confidence in the reliability of web analytics within your organisation.

In this blog I will guide you through how to use Chrome Dev Tools.

1. Open Chrome Dev Tools:

Chrome Dev Tools are a range of web developer tools which you can access for free from the Google Chrome browser. They can allow you to edit pages, but more importantly they enable you to examine elements on a page and diagnose problems quickly, even without access to Google Analytics or Google Tag Manager.

To access Dev Tools simply right-click on the web page you are interested in (avoid clicking on any iFrames) and from the drop-down menu select ‘Inspect’. Alternatively, you can go to the menu in your Chrome browser and select More Tools > Developer Tools. Short cuts include:

Windows: F12 or CTRL + SHIFT + J

Mac OS: CMD+OPT + J

2. The Tabs in Chrome Dev Tools:

You will now see Dev Tools has a device mode (3) and various tabs along the top of the console. The device mode allows you to simulate mobile devices and test responsive and device-specific viewports. You can also emulate sensors such as geolocation and simulate device orientation to test accelerometer data.

The main Dev Tools tabs which provide valuable data and insights are:

Elements Tab: This is great for inspecting different elements on a web page. You can use it to identify CSS selectors, Class attribute, element ID and text to use in your click and element visibility triggers and tags in GTM.

Console Tab: The console logs messages and can run JavaScript. It’s excellent at checking for error messages that might be blocking Google Analytics or GTM, such as those caused by Content Security Policies and incorrect implementations. Many browser extensions, such as Google Analytics Debugger, display useful information in the console tab. In addition, it can be used to show detailed information on each tracking call sent to GA.

Sources Tab: This enables you to debug JavaScript, pause your code with breakpoints, run snippets of code from any page and find unused JavaScript.

Network Tab: This allows you to view and debug network activity and so is a vital tool in checking Google Analytics calls and parameters. You can inspect every pageview, event, custom dimension and other metrics sent to Google Analytics.

3. Dev Tools Settings:

Before you proceed to use Chrome Dev Tools, we first need to open the Settings window. Ensure you have Dev Tools open and press F1 and this should open the Settings window. Now go to ‘Network’ and select ‘Disable cache (while DevTools is open)’ and then under the ‘Console’ section select ‘Preserve log upon navigation’.

Disabling the cache prevents the browser loading previous versions of your web page when you are making changes to it so that you can see your changes. Preserving the log on navigation means you won’t lose data as you navigate from one page to another.

4. The Network Tab:

In the Network tab enter “Collect?” in the filter on the left-hand side of the page and do a hard refresh (F5). This is the measurement protocol used by GA to send data. This forces the Network tab to show all the calls made by GA.

Under ‘Name’ you can click on the Collect call in the Network tab and see the on ‘Headers’ all the data being passed to Google Analytics. In the example above, I’ve selected the first call, and we can see the pageview tag, the label (full URL), the path (/ for homepage) and page title.

By scrolling down the Headers tab, we can also see the GA Property ID, GTM ID and custom dimensions. This would show up if the wrong GTM script is being used or if we are sending data to the incorrect GA property. We can also go to our Google Analytics property to validate the nature of each custom dimension. If necessary, we could then check they are working by comparing their values in the console to what we would expect to see according to their definition.

5. Debugging Events:

Remain in the Network tab and see if you can trigger an event you want to validate. This might be clicking on a page element or navigating to another page. This will generate a new Collect call and so select it under ‘Name’. Below we can see the event category (ec), event action (ea) and the event label (el). This allows us to confirm if the tag is firing correctly and that the event details are as expected.

6. Multiple Installations of GTM Detected in Google Tag Assistant:

If you use the Chrome extension Google Tag Assistant, you may have found that it sometimes informs you that a site has multiple installations of Google Tag Manager. This happened to me for my own site and I become paranoid that I’d somehow duplicated my GTM implementation.

However, Dev Tools is the perfect solution to validate if this is the case or not. Before you proceed make sure you have disables Google Tag Manager preview and debug mode.

Using the Network tab again, enter “gtm.js” in the filter. Then, whilst holding down the “All” button refresh the page to force GTM to load the container. Under ‘Name’ you should see how many containers are loading on your site. On my site I can see just a single GTM container loading and so this confirms that I don’t have multiple GTM scripts loading. This is a common bug with Google Tag Assistant and so before you jump to conclusions use the Dev Tools Network tab to validate if it is a real problem or not.

7. GTM Tag Assistant Shows Multiple Containers Loading:

When using GTM Tag Assistant you may notice that two containers load on each pageview. This is normal because it is needed to allow the preview mode to work and is nothing to worry about. If you are concerned, just follow the above instructions and you will find the second container load has “gtm_debug” in the name.

Finally:

Testing and debugging are crucial to the implementation of Google Analytics and Google Tag Manager. Chrome’s Dev Tools are an essential element of a good testing and debugging regime. Take time to get to know how to utilise Dev Tools because they may save you a lot of pain later in the process if you don’t use them. They are invaluable in helping you ensure a high level of data integrity in your web analytics deployment.