Hugo + Google Tag Manager

September 2018 · 7 minute read
The following assume basic knowledge of Google’s Tag Manager, analytics and JavaScript, Hugo installed and an existing Hugo project.

Google Analytics code snippets as well as other popular analytics options (eg. Yandex Metrica) can be found on millions of sites across the Internet. Understanding your site’s traffic and digging deeper into specifics is what analytics is all about. If your site is associated with a business, you might also have deployed marketing campaigns, whose impact you want to measure with goals, or other means, utilizing relevant code snippets in your site. Starting from the basic minimum Google Analytics script, one can escalate to tens or even more scripts inserted at various pages/places in a website. If you combine these with usability enhancement and visual enhancement scripts, a site’s source code can become clattered with numerous hard to manage scripts.

Specifically for a Hugo powered site, in which it is usual to find combined html syntax and Go html/template syntax, unless you use only the internal templates (for Google Analytics, etc.) or similar custom ones, your sources could quickly become cluttered with code snippets, making it very difficult to read and work through the code. Also, possible changes/fixes to code parts could potentially lead to bugs or errors, difficult to fix when the source code is so cluttered and mixed. So, if you are looking to manage numerous tags you will probably find that migrating to Google Tag Manager will make your work easier, faster and more effective.

To utilize the power of Google Tag Manager in your Hugo-powered website you can create two partials, for the two separate parts of the base Google Tag Manager script, the <noscript> part going to the <body> and the <script> part going into the <head>. To get the script and the relevant ID you need to create a Google Tag Manager account and then create a new container.

Resources for Google Tag Manager

There are many resources related to Google Tag Manager, including the official documentation. Among all the resources that I came across while researching and learning in order to create all the tags, triggers, variables required for my website’s performance, I found the most up-to-date and most valuable ones, in terms of information provided, ideas, examples, downloadable code and links to other useful resources, to be the following (ordered alphabetically):

Based on combined material from the above resources I created an aggregated recipe for Google Tag Manager, as I see it fits better my requirements for my website. Google Analytics and Google Tag Manager can work independent to each other, but since Google Tag Manager can incorporate Universal Google Analytics, there is probably no reason not to combine the two tools. If you have already injected Google Analytics code snippets to various places in your site, you should probably start by migrating to Google Tag Manager, your current functionality, so you will not lose any valuable analytics information in the process.

When entering the Google Tag Manager world, if you consider using Google Analytics tags, the first thing you should create is a Google Analytics settings variable (or more if you use more than one tracking ID) with your Google Analytics tracking-ID. This kind of variable can be used in Google Analytics Tags to reuse the same base information from tag to tag (part or all info can be overwritten in each tag).

Main logic sections

The Google Tag Manager recipe I use on my site is split to logic sections according to the main scope of the associated tags, triggers and variables. Section folders have been used to group each scope related functionality, so it can be easier to modify logic sections in the future. The main logic sections are the following:

  1. Injecting jQuery through Google Tag Manager

    Depending on your site’s loading strategy you might or might not like the idea of injecting jQuery through Google Tag Manager. In case you would like to follow this option you can find all the related information I used to implement this in the following tutorial/guides:

    The idea here is to fire the jQuery loading tag in all pages and before any other tag that requires jQuery loaded first.

  2. Respect and adjust to user’s cookie preferences

    This logic part is associated with users' cookie policy, cookie preferences, GDPR related regulations and how you can accommodate all this functionality in your website with the help of Google Tag Manager. This part, is also associated with my previous article A GDPR cookie-consent banner for Hugo, as this provides the missing functionality required for the cookie-consent banner to work as expected. The relevant resources for implementing this logic are the following:

  3. Tracking traffic, outbound and inbound links

    This is the logic associated with mainstream tracking traffic functionality. You can expand as much as you like based on your needs. The following resources provide material related to my implementation but you can find much more in there, such as various ideas for tracking and relevant examples, code, or resources.

  4. User dwell time, scroll depth, exit time

    One of the custom and more meaningful measurements for a page is page dwell time, meaning, how long users actually spend on your pages. Scroll depth can be particularly useful for blog posts, showing user engagement(?). The following resources describe possible implementations for these indicators, among other interesting options.

  5. Keeping Personally Identifiable Information (PII) out of Google Analytics

    According to Google Analytics usage guidelines, Analytics customers are prohibited from sending Personally Identifiable Information to Google. This information, if any, must be removed prior to sending analytics data to Google. To do so, you must take appropriate steps to process the collected data and remove the PII related data. The following resources describe such methods.

  6. Prevent from tracking your own, or your team’s traffic

    It is common practice to prevent own traffic, being recorded to Google Analytics, so that we have a clean picture of actual website usage and traffic. There are various methods to achieve this, like filtering traffic from a domain, or IP. Another method that works very well and is very flexible and independent of IP is to use a query parameter to set a cookie that will be used to essentially tag a client. You can in turn filter this parameter in a Google Analytics view to separate traffic coming from this “labeled” client(s).

The above resources should provide enough directions and examples to implement your own Google Tag Manager recipe for your Hugo-powered site. Many of the resources include full recipes that can be imported to Google Tag Manager console and utilized with minimal modifications.

Enjoy coding!

Above opinions and any mistakes are my own. I am not affiliated in any way with companies, or organizations mentioned above. The code samples provided are licensed under the Apache 2.0 License and rest content of this page is licensed under the Creative Commons Attribution 3.0 License, except if noted otherwise.
Tags: Hugo, GTM, tags