MayADevBe Blog

A Blog about Computer Science

Problems I encountered while setting up Google Analytics with Hugo

Published - 2021-03-04 | 5min

I have recently created this blog with Hugo. I created a theme with different features. Additionally, I have a small list of features that I also want to add. One of these features is connecting the blog with Google Analytics. So in this post, I want to explain what problems I encountered and how it is set-up now.

What is Google Analytics?

Before I start explaining my method, I want to explain what Google Analytics is and why I wanted to use it for my blog. Google Analytics is part of Googles Marketing Platform, which is “a unified advertising and analytics platform for smarter marketing and better results”1. As the name suggests, Google Analytics is used to analyze the traffic of the website. Simply put, you can track how many people visited your website, as well as what posts/parts of the website they read. I believe this is very interesting and helpful information. For example, it could be used to see which posts are popular.

Google offers two different types to connect your website.

  1. Universal Analytics Property/Tracking IDs - This is the older version that only supports web measurement. It can still be set up under advanced options when creating a property.
  2. GA4/Measurement ID - The newer version will be set-up by default.

How to check if it works

As I already mentioned in the introduction, I encountered some problems while trying to incorporate Google Analytics, so I wanted to start with explaining, how you can check if Google Analytics works.

Analytics Dashboard

The first method is checking your analytics dashboard. Check if you can see if a user has visited your website. Another option (if you use the Tracking-ID) is to select ‘Tracking Code’ under the ‘admin’ settings (bottom left corner), select your property, then click on ‘Tracking Info’. You will see a Status section that should say “Receiving traffic in past 48 hours.” as well as the number of active users. You can also send test traffic.

Google Analytics Status

Browser Development tools

If your dashboard does not show you any traffic, you need to check if the script to connect your websites is correct.

  1. Check if the script appears in your HTML code. When you are in the browser on your website, open the developer tools (F12). Under the ‘Elements’ tab, look for the location you added the script.
  2. If the script is there, check if your Tracking/Measurement ID is there and correct.

Adding Analytics

Okay, now that all that is out of the way, let’s talk about actually integrating analytics into the webpage. Analytics is integrated with a script and should be added to every site that you want to track. Therefore, with Hugo, the code can simply be added in the <head> partial, which is used by every site. Before I talk about how the code looks like, let’s talk about the Google site.

Create an Analytics Account and Property

To use Google Analytics you need a Google Account. Then you visit the Google Analytics Website and log-in. You are prompted to create a property. Filling out the information should be straight forward. Depending on what type of property you chose, you need to look for the Tracking or Measurement ID in the admin settings (bottom left corner). This ID is used with the code. If you do not want to create a Hugo theme, but only use this with your own website you can also find the predefined code block with your ID already integrated into the section and you should be done.

For a more detailed tutorial check out Googles Official Tutorial for Analytics

Hugo Internal Template

Now we come to the problems I had, specifically with creating a Hugo theme. Hugo offers an internal Google Analytics template, that is supposed to integrate the code with a variable ID. You just add your tracking ID in the configuration file and use the template in the head section of your website. The first problem I found with this, is that it only supports the Tracking ID. Meaning the newer property doesn’t work, and when I tried it, I only had the newer property. But even after creating another property and using the tracking ID, it didn’t work for me. The script wouldn’t show up in the header.

Use Googles Template

My next try was to not use the template but to add the code from the Google Analytics page and swap my ID with {{ .Site.googleAnalytics }}, to make it variable. I tried both IDs, I wrote the code into a different section of the website and I checked the spelling, and the script would show up on the build website, but the ID would not be substituted.

Override theme

I have to honestly say, that I was done with it at this point. So I copied the head partial from the theme folder into the folder from my blog and used this to manually override the variable part with my ID. I used the code template from Google. And this worked. However, I wasn’t happy, that I couldn’t make it work for the theme.

Use params

After some more research and looking into the Hugo documentation, I finally found a solution. In config.toml i added the following line:

1
2
3
4


	[params]
	# Google analytics
    googleAnalytics = "UA-xxxxxxxxx-x"

With UA-xxxxxxxxx-x being the Tracking ID. (I only tested this solution with the Tracking ID, but I think it should also work with the Measurement ID.) I the head.html I added the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


	<!-- Global site tag (gtag.js) - Google Analytics -->

	 {{ $ga := .Site.Params.GoogleAnalytics }}

	 <script>

	 window.dataLayer \= window.dataLayer || \[\];

	 function gtag(){dataLayer.push(arguments);}

	 gtag('js', new Date());

	 gtag('config', '{{ $ga }}');

	 </script>

	 <script async src\="https://www.googletagmanager.com/gtag/js?id={{ $ga }}"\></script>

This is basically the template from Google, but my Tracking ID is substituted with the Tracking ID from the config.toml file. And instead of just using .Site.Params.GoogleAnalytics, I firstly create an extra variable, which I then use for substitution. And this finally worked.

Conclusion

Sometimes seemingly easy tasks turn out to be harder than you thought. Some of the problems I encountered I know why they happened and others, I’m still not sure. I wanted to write about my experience and problems because I do believe it is important, to not everything will work on the first try. I also have not found a lot of resources about the problems I encountered. I hope this was helpful to you. If you still have any questions check out the Googles Official Tutorial for Analytics as well as the Hugo Documentation or write me on Twitter

  1. https://marketingplatform.google.com/intl/en_uk/about/ ↩︎


Share on:
Comments:
Related Content:
Integrate Comments in SSG Hugo

I integrated a comment feature into my Static Site Generator blog that was created with Hugo. I used the utterances app that is based on GitHub issues.

Integrate Social Media Share Buttons on your Website

A post about why you should integrate Social Media Buttons in your website and how to do it.