Add Google Universal Analytics Event Tracking in Hugo [shortcode]

When I started using Hugo, I noticed that there are very few plugins or addons which make it easy for you to track users and content. I’ve written about Google Analytics Event Tags and how to implement this in Hugo. But what if you want something simple and easy, that required less effort and HTML code … so I created a shortcode.

This shortcode works perfectly if you are using the Hugo internal google analytics template and using Googles Universal Analytics where your tracking code starts with UA-.

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

In this article, you will

1. Install the shortcode
2. Learn to use and what needs to be tracked
3. Setup a GA testing profile
4. Test and try it
5. Resolve any issues you found

Shortcodes are saved to either of these locations

1. your /<Hugo project>/ Layouts / Shortcodes
2. your /<Hugo project>/ Theme / Theme Name / Layouts / Shortcodes

I prefer option 1 - in case you ever change the theme, you still have the shortcode

Install the Google Analytics Event Tracking Shortcode

First we download the shortcode … then move the shortcode file to my preferred location

1
2
3

cd <your Hugo project>
git clone https://gist.github.com/eb8c580cbfb8c0222e8da03375fb54aa.git 
mv eb8c580cbfb8c0222e8da03375fb54aa/ga-tag.html layouts/shortcodes

Note: If you don’t have git / don’t want to use it - then go download this zip and unzip / save it to your preferred location

How to Use

In markdown content the shortcode looks like ..

{{< ga-tag href="https://damien.co/blog" ga1=Internal-Link ga2=Gist ga3=Demo text="Test Click" >}}

There are no options here - this is the minimum you must have for GA Event Tracking

• Href - destination URL
• Ga1 - Event Category (example: the object like Video)
• Ga2 - Event Action (play)
• Ga3 - Event Label (video name
• Text - text that the reader / user will click

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 in the reports are aligned and useful to you.

And .. here is a real GA Event - why don’t you head over and STAR my Gist … OK

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?

If you liked this please STAR it on my Gist.

Linkage

• Google analytics.js

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.