How to add Google Analytics to your Hugo site

Quick tutorial how to integrate Google Analytics in a Hugo website.

cover image

Google Analytics

First of all what you need is to obtain a Google Analytics tracking ID. For that you need to sign up at Google Analytics. Then, you need to create a tracking ID following the next steps:

  • Click on Admin button (on the bottom left corner).
  • Click on Create Account button.
  • After all the steps filled, click the Create button and accept the terms and conditions.

After the completion of these steps you will obtain your tracking ID. Copy it for add to your Hugo site later.

Hugo configuration

Now it’s turn to add the tracking ID to your site. The easiest way for do it is using the Hugo’s internal template provided by Hugo. You just need to add a new variable called googleAnalytics with the tracking ID obtained from the previous step in your config.toml like:

googleAnalytics = "UA-123-45"

The next step is to add the following snippet of code in your site:

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

You should search for the head partial template and add it inside the <head></head> tags.

Checking the integration

Before passing that to production you can test it running your site locally performing the next command:

hugo serve

The default url on localhost is http://localhost:1313.

Open again or refresh Google Analytics on a different tab.

Check the dashboard and you should be able to see the number under the section Active Users right now as 1 like the picture below: active-users

Hugo's content and templates managing

How to organize your content and create your templates to get maximum value from Hugo.

Building static blog with Hugo

Quick steps to create your own static blog with Hugo and install a theme from the catalogue. After that, push your site to GitHub and deploy it with GitHub Pages.
#hugo #github
comments powered by Disqus