Testing Google Analytics Implementation

One part of analytics implementation should always be testing of said implementation. There are multiple reasons to verify implementation, ranging from simple "There is no data in the reports" to, "It does not look like our conversion event is tracking accurate information".

Before starting testing any tagging implementations, ensure you have "business tagging requirements document" on hand, and you do understand all of the required interactions that need to be tested from business perspective.

What is "business tagging requirements document" you might ask - This document simply describes high level reporting requirements applicable to the business. It could contain requirements such as:

  1. Track Page Views, Visits, Visitors and Bounce Rate on home page
  2. When visitor scrolls down to plans table, record the event
  3. For each successful visitor conversion into paying customer, record the event as a goal, and track goal value.

Describing best practices around how the document should look like, is probably a topic for a separate post. The format of the document does not matter that much, as long as both parties involved (business and analytics) are able to collaborate on bringing analytics requirements to life.

High Level

At a high level there are 3 things that you always need to focus on when testing every single page for correct Google Analytics implementation

  1. Codeblock - This includes Google Analytics or Tag Manager code block present on the page
  2. Page View events - These events happen immediately when you land on the page, and populate such metrics as page views, visits, bounce rate
  3. Custom Interaction events - These events happen on specific interactions on the page, such as button clicks, purchase conversions, modal popups, and any other event that was part of tagging requirement.

Codeblock

Codeblock is an essential part of loading a tag on the page. Without correct codeblock present, tag will simply not work. Codeblock is simply a <script> tag, that is usually put in the <head> section of the page, that is responsible for loading correct JS file, which in turn will enable tracking on the pages.

Testing codeblock

Depending on the browser, navigate to the testing page, perform right click anywhere on the page and select "view source". You should be able to find codeblock similar to below in the <head> section of the page.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'UA-XXXXXXXXX-1');
</script>

Things to doublecheck:

  • Ensure each <script> tag has the closing </script> tag.
  • Double check UA-XXXXXXXXX-1 number that it matches the one indicated in the Google Analytics interface
  • Both function calls gtag('js', new Date()) and gtag('config', 'UA-XXXXXXXX-1') must be present in the codeblock
  • Check the "src" attribute points to the correct url

If you are using tag manager solution to load tags on the pages, codeblock will look different.

Now it's time to check if codeblock loads Google Analytics JS file correctly.

Fire up Developer's Console by pressing F12 (works for Chrome, Firefox and Edge browsers). Select "network" tab, and filter on "collect". Now press F5

You should see only 1 "collect" request. This is page view event, tracked by google analytics. Congratulations! Basic tracking functionality is working as expected on current page.

Click on the request, a new window will open to the right, showing all the details collected with the page view event. Here is how it looks like for hitmetrics.io landing page:

There are a lot of parameters transferred with every "collect" request. This is how Google Analytics able to collect information about your visitors, and later create reports based on these requests. At this stage, check the correctness of 2 values:

  1. dl - Should contain url of the page, with search parameters (values that come after "?")
  2. dt - Page title.

Testing Custom Events

Since now we now Google Analytics tag is loaded successfully on the pages, we need to ensure custom events are also working as expected. This phase will mostly test implementation of the events by IT team on the pages, rather than Google Analytics functionality. In other words, if you did not modify Google Analytics JS file directly before loading on the page, custom events are fully functional. The only reason custom events not firing as expected would be due to implementation.

It is recommended that you test every single custom event indicated in the business requirement document, to ensure you have appropriate tagging on the pages.

Let's get to it. Custom event requests are sent to google analytics servers using identical requests, that can be filtered on "collect" word. So keep the developer's console setting as you left them after testing page view events. Now locate the custom event interaction that should be present on the page (button click, modal popup, payment conversion) and trigger it.

In the case of hitmetrics.io, I will be testing "Viewed Plans" event. We try to track a number of interactions on our landing page, and "Viewed Plans" event fires when visitor scrolls all the way down to our pricing table. We would like to track this event to understand how effective our plans section at converting visitors. This way we can track number of people viewing table, and number of people converting, thus calculating conversion metrics of visitors becoming customers after viewing plans table:

And here is how request data looks like:

It is important to confirm at this stage, that values passed in the request are the correct ones. Pay special attention to 4 variables:

  • ec - Event Category
  • ea - Event Action
  • el - Event Label

Additionally ensure all requests return "200" HTTP code, which means they were successful.

And that is all to it!

Bonus: Google Analytics Debugger

There is an awesome extension for Google Chrome browser - https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna/related?hl=en when downloaded and enabled, it will print out all detailed interactions into developer tools console automatically.

Let us help you with all the tagging needs for your business, we can handle tagging recommendations, implementation, testing and of course reporting.

Simply write us a line at info@hitmetrics.io