How to set up Google analytics for a Hugo website

Get you Google analytics code

Start by heading over to https://analytics.google.com and copy your tracking code.

At the time of writing it can be found under admin > yourwebsite > Tracking Code

Add the code to your site

Google analytics works by pinging Googles servers each time the script gets loaded.
To accomplish this, you want to place the script on the head section of your website.

Method 1 - Using Hugo's internal template

Hugo provides an internal template that you can use to automatically process the code.

Start by adding the tracking code to your site's config.toml file as a top level variable:

googleAnalytics = "<your-code-here>"

Note: Many pre-built themes already include a googleAnalytics variable in the configuration file, so make sure you don't end up with two of them, as only the first occurance will be processed by Hugo

Now let's locate the head section of your site template to add the partial into.

If you are using a theme, the <head> section is almost certainly generated by a partial.

If you don't know where to find the <head> section, try using utilities like grep, or your editors search functionality.

Once you have located the <head> section of your site, go ahead and add this line to it:

{{ template "_internal/google_analytics.html" . }}

This internal template will automatically acquire the tracking code you added earlier to your site parameters, and process it accordingly.

Method 2 - Using a partial

Another way to add the Analytics is to add the Global site tag to a partial, and linking that partial to your sites <head> section.

Once again you need to start by heading over to https://analytics.google.com and copy the tracking script.

The script will look something like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111111111-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-111111111-1');
</script>

Create a new file called google-analytics.html and paste the tracking scipt into it.

Now add the newly created partial to your <head> section:

{{ partial "google-analytics" . }}

Step 3: Test the configuration

Before deploying the changes you should (probably) make sure they works as intended.

An easy way to do this is to browse your local site, and verify that the traffic generated is collected by Google Analytics.

Open the Google Analytics dashboard for your website, and look for a field that says something like “Active users right now”

If the field reports at least one active user (you clicking around on the development server) then congratulations, you have successfully enabled Google Analytics on your Hugo site!

Troubleshooting

If Google Analytics in not picking up your site's traffic, check the following:

Privacy software

Privacy software like Ublock, Ghostery, NoScript etc. will block your tracking script from being loaded and executed.

How to fix:
Disable any such software, or use an incognito window.

Make sure the script is placed in the right place

If your script is not inside the <head> section, it will not be loaded by the client.

How to fix:
Open your browsers development tools, and make sure the script gets loaded and executed correctly.

If you can see your script being loaded in the network tab, or see it in the DOM, verify that you have placed the internal template/gtag partial in the correct place.