How to add Google Analytics Event Tracking 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 that 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 event tracking code works perfectly if you are using the Hugo internal google analytics template or using Googles own analytics.js.

If you have migrated to Google gtag.js then I have a version of this shortcode - just contact me.

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 a GA Testing Profile
5. Test this
6. Resolve issues you might find

Check using Hugo internal template or Google analytics.js

Most likely your site this is using Hugo’s internal Google Analyics template; and this uses analytics.js.

To confirm, do a find and look for this code

{{ template "_internal/google_analytics.html" . }}

You can also double check and look in either theme/layouts/partials/head.html or theme/layouts/partials/footer.html. Look for the reference to the template or Googles own code and the reference to analytics.js (line 6, highlighted below).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Now you’ve confirmed your site is using analytics.js

Allow RAW Html in Markdown

By default and for good safety reasons, Hugo doesn’t process HTML in Markdown files. You need to add this to your config.toml, if you own the site and understand the risk …

1
2

[markup.goldmark.renderer]
unsafe = true

Tracking Button Clicks

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

<button onclick="ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);">Example Button Text</button>

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

1

<a onclick="ga('send', 'event', 'GA', 'Example', 'Link');" href="http://google.com" target="_blank">See the little example</a>

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:

Setup a GA profile for testing

This is optional and I recommend you do it, if you haven’t done so already … and it will increase the accuracy of your GA reports.

Create a separate Test Profile on GA and allow your local IP, then on your main GA Profile, filterou out / ignore all requests from your local IP. This way you can test event tracking and browse your development site as much as you like.

Test and Go …

So now you have the idea …

1. Save the file
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 your GA profile doesnt 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
• Kodify

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.
Find our more about me.