Debugging Google Analytics for Event Tracking

Google Analytics is the go to option when it comes to your website analytics. It has enterprise level capabilities and allows you to slice and dice your data in just about any way you need. Best of all, it’s FREE*

If you need a report, the chances are that they already have one that is predefined within the tool itself. If you need something a little different, it provides you with a dashboard that you can drop in a range of reporting data to tell the story you need, it will even let you segment the data on a range of different options. Should you require something even more robust, like comparing your Google Analytics data with sales data from another system, then you can use something like Data Studio to bring multiple datasources together.

The thing with Google Analytics though is that it has some limitations. The way in which it collects data is by understanding which page you are currently on, and how you arrived on that page (the referrer).

For example, if you came from Facebook to Page A on your site then Google Analytics would determine that you were referred from a Social Network (Facebook) and landed on Page A. This would be the start of your session, and Page A would be called you landing page.

Let’s take this site for example. We’ll pretend that someone arrives on this site and lands in our Resource section on the Lazy Sizes page. This page is awarded the landing page for that user for this session. After the user reads the content there are a few paths they might take

  1. Click on Download Resource
  2. Click on View on Git Hub
  3. Click on Resources in the breadcrumb trail to view more resources
  4. Click on Resources in the main navigation to view more resources.

If the user does Option 3 then

  1. The Resources page will load
  2. A hit will be counted against the resources page
  3. The Lazy Sizes page becomes the referrer for the Resources page for this session
  4. We avoid a bounce on the Lazy Sizes page (because we’ve continued our journey in the site)
  5. The page view count for this user becomes 2

If the user decides Option 4 then all of those things will also happen. There is no difference in Google Analytics between clicking on different links on the page if the origin and destination are the same.

If the user does Option 1 or Option 2 then

  1. The user will navigate to an external site
  2. The external site, if running Google Analytics will get responsivedesign.is as the referrer, however nothing of this will be tracked in our own Google Analytics
  3. The users visit will be counted as a Bounce (only viewing one page on the site)

This is troubling for me as a site owner because I can not be sure if the user left the page because they didn’t find what they needed, or if they found what they needed and continued to download and use the resource suggested.

This is where Event Tracking comes into play.

Google allows you to apply Click Events that take the place of page impressions to build a picture of how users user your site.

I find these work best when you’re pushing users to other sites like the resource section, or if you’re getting them to download a PDF (you can set Events to count a PDF download as a page view).

Here is the event that I have set on the resource tags

<a onclick="ga('send', 'event', 'Resource', 'Github', 'Lazy Sizes');"  href="https://github.com/aFarkas/lazysizes/">View on Github</a>
<a onclick="ga('send', 'event', 'Resource', 'Download', 'Lazy Sizes');"  href="https://github.com/aFarkas/lazysizes/">View on Github</a>

In laymen turns, when the user clicks the link it calls a GA function that sends and event called Resources, sets it as a Download/Github and Labels it as Lazy Sizes.

These are dynamically set in the template, which means I can either look at all the Resources to see the most popular, or I can see the most popular Download or Github click, or I can specifically see what has been happening with the Lazy Sizes buttons.

Debugging the Events

These are great to set up, but in the process of doing so I found that I was somethings sending the wrong data, I hadn’t encoded things properly, or the call was broken because I missed a semicolon or a closing quote.

By running Chrome (this is the only time I move from Firefox back to Chrome these days) and installing the https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna/related?hl=en plugin you are able to open your console window and see which events are being sent to Google Analytics as you traverse your site.

These aren’t limited to just events, it shows all the data you’re sending to Google each time you move through the site and click around.

Debugging more….

It’s not just for Google Analytics either, this will track just about any beacon that you’re sending to google including GTM, GA, DoubleClick tags.

In my day job the company I work for does a lot of media buying and tracking so it is vital we see how users move through the site to adjust the media spend, this tool allows us to make sure the tracking is working so we can make better business decisions for our clients.

Wrapping Up

Analytics are an important tool in understanding how your users find and use your site and can provide insight into the areas that you need to improve.

Google Analytics is not the only tool though, and using it you are offering all of your own and customer data up to Google for free to do with as they wish.

If privacy is a concern to you, and it should be, look at using something like Fathom Analytics which has a subset of the capabilities that Google provides, but is often enough to cover off what you will need.

*Nothing is ever free. By using Google Analytics you’re freely handing over all of your web site visitor traffic to them so that they can be a more effective advertiser and sell that data on to make money… none of which you will ever see.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.