Hugo Logo

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 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. 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="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:

EventCategoryLabel
Searchengagementsearch_term
ShareengagementArticle Title
Generate LeadengagementSubmit Contact Form
DownloadengagementPDF / Filename Name
SocialexternalTwitter

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

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. 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