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):
- Analyticsmania posts
- Codestudies tutorials
- Distilled resources
- Lunametrics blog
- Simo Ahava’s blog
- Upbuild blog
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:
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:
- 29 Advanced Google Tag Manager Tips Every Marketer Should Know, (Tip 2: Inject jQuery)
- #GTMTips: Add A Load Listener To Script Elements
- Using jQuery properly in Google Tag Manager
The idea here is to fire the jQuery loading tag in all pages and before any other tag that requires jQuery loaded first.
Respect and adjust to user’s cookie preferences
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.
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.
- 29 Advanced Google Tag Manager Tips Every Marketer Should Know, (Tips: 16, 17, 18)
- Measure SERP Bounce Time With GTM
- Track Content Engagement Via GTM
- Scroll Depth - A Google Analytics plugin for measuring page scrolling
- #GTMTips: Fire Trigger When User Is About To Leave The Page
- Customize The Scroll Depth Trigger In Google Tag Manager
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.
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.