Google Analytics Event tracking for gtag.js in Hugo

Google Analytics provides a number of extra tools for the adventurous, besides the usual visitor and page analytics, you can have event tracking which is used to analyse visitor behaviour and interaction. It’s not complicated to start event tracking - but it’s additional work for each article and takes time to do right.

This article is relevant if you are using Google Analytics gtag.js script

If you are using the Hugo internal template or using Googles own analytics.js, then this article on Event Tracking for analytics.js is for you.

In this article, I’ll show you

1. Check the version of Google Analytics you are using is analytics.js
2. Change your config to allow HTML in markdown files
3. Enable event tracking on button clicks
4. Setup an event tracking table for consistency
5. Setup a GA testing profile
6. Resolve issues you might find

Confirm you are using gtag.js in your Theme / Head file

Here is the example code Google Analytics gtag.js - if this looks familiar, then you’re reading the right article.

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

gtag('config', 'GA_TRACKING_ID');
</script>

Allow raw Html in Markdown

By default and for good safety reasons, Hugo doesn’t process HTML in Markdown files. Add this to your config.toml …

1
2

[markup.goldmark.renderer]
unsafe = true

You need to do this so that you can add HTML and event tagging in your markdown content.

Tracking Button Clicks

So now you want to track someone clicking on a link in your website … Here is the basic code

<button onclick="gtag('event', <event>, {'event_category' : <category>, 'event_label' : <label>});">Example Button Text</button>

Then in your markdown file you make it like this ..

1

<a onclick="gtag('event', Share {'event_category' : 'engagement' , 'eventAction' : 'post-title'});" href="http://google.com" target="_blank">Share This</button>

Event Tracking Mapping Table

I recommend to be consistent with how you use Event Tracking .. Here’s a little table that I use, with some examples:

This way, your GA Events report will be useful and comparable.

Setup a GA profile for testing

This is optional but this will increase the accuracy of your GA reports. This way you can test event tracking and browse your development site (and production site) as much as you like without inflatting the user numbers.

Create a separate Test Profile on GA and allow your local IP, then on your main GA Profile, filter out / ignore all requests from your local IP.

Test and Go …

So now you have the idea …

1. Add the shortcode to one of your markdown files
2. Commit your changes to Git
3. Run Hugo server -D and browse to http://Localhost to check every thing is work fine
4. Go to Google Analytics and Real-Time - to see you are showing up on GA
5. Click on the Event Tracking link you have in your content and confirm it shows up in GA

If you find a problem

• check you dont have any extensions, etc blocking GA
• check you GA profile doesn’t exclude your IP address
• check the ‘on-click html’
• did you allow Raw HTML?

How are you using Event Tracking? Please let me know

Linkage

• Searchengine Watch

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.