Test Google Analytics

💡

Note: This entry is applicable to Google Analytics 3 but not GA4. Cantilever has not yet transitioned over to regularly using GA4, so this still applies to most of our sites.

Overview

We use Google Analytics (GA) on virtually every site we do. This means we should test to make sure that it is working properly upon launch, and should be testing it continually as new updates go in so that we can be sure there are no regressions.

Most of the time, we implement GA using Google Tag Manager (GTM). GTM is a tag manager, so the site only needs to load GTM, and then GTM in turn loads GA.

Regardless of how GA is loaded, we can test it similarly, using the Google Analytics Debugger for Chrome. However, if it is loaded through GTM, there is an alternate method using only the Google Tag Manager preview pane, which we find a little more intuitive.

Who can do this

Anyone with basic knowledge of the browser.

What you need

  • A site to test
  • Access to the GA property for the site you are testing.
  • Understanding of what custom events need to be tested for, if any.

Steps

Google Analytics Debugger method

TL;DR Summary: To test for events you can go to the Realtime > Events tab in GA. Then click on something that should fire off an event and you should see it register in GA.

Install the Google Analytics Debugger and activate it

The extension requires access to view all of your browsing history. Google already has this if you use Chrome regularly, but if you want to be more restrictive, you can install the plugin in a sandbox user account:

image
If you already have GA Debugger, turn it on via the extension in your browser
image
Open Google Analytics https://analytics.google.com/ and open up the property you are testing. Note the ID. Navigate to correct "View" for the environment you are testing.

For instance, if you are testing staging, navigate to the "Staging" view.

image
Dropdown showing the views within a given property. Cantilever sites should have a "staging" view and a "production" view, amongst some potential others.
Dropdown showing the views within a given property. Cantilever sites should have a "staging" view and a "production" view, amongst some potential others.
Navigate to the site and open your developer tools. Click "Console".

You can right-click any part of the page and click "Inspect" to open the dev tools.

Reload the page. You should see the GA debug information logged to the console. Make sure that the GA ID matches the one you see in GA.
image

This screenshot show the tag firing initially. You can see that it runs ga("create", [The ID]) to start things off. Make sure that ID is what you expect Then it sets some variables, and triggers a pageview event. Within the pageview event, you can see a few of the variables it sends along with that event, such as a language and version. It also sends data like the screen resolution, so that GA can segment based on that info in the future.

Verify that GA sees you on the page using the "Real-Time" tool.
image
Try an event. You should see the event logged to the console, with relevant metadata.
image
Verify that the event you triggered appears in the Real-Time tool.
image
Try the rest of the events on your list and verify that they are sending the right data to GA.

Google Tag Manager Method

If a site uses GTM, you can use GTM’s preview pane to test GA as well. For more background on the GTM preview pane, see

.

Go to GTM at https://tagmanager.google.com/ and turn on Preview Mode.
image
Go to the site and open the preview pane. On "DOM Ready", you should see the GA tag fire.
image
Click the GA tag to see the metadata it sent when it fired. It should include the correct GA ID.
image
Fire an event. It should appear within a new "Interaction" pane within the summary.
image
Using the same steps from the other method, make sure that the event and pageview are appearing in GA itself. Then run through all of your events and test them the same way

A Note on testing GTM

  • GTM is a tag manager that runs on all pages.
  • When testing, you are often looking for custom tag events. We would pretty much never add a custom event for clicking the logo. Similarly, we should always have them for dropdowns, sliders, mobile nav, etc.