• Homeright=arrow
  • Blogright=arrow
  • How to add Google Analytics to your Hugo Site
featureImage

How to add Google Analytics to your Hugo Site

It's highly important to track website performance and analyze traffic on your website. In this regard, Google Analytics is the best solution to get the statistics and insights of your website's visitors and content. This powerful analytic tool is completely free.

Additionally, integrating “Google Analytics” into your Hugo website is very easy and simple.

To set up Google Analytics on your Hugo website, you simply have to follow these steps:

Sign up for a Google Analytics account

At first, you have to sign up on the Google Analytics page to create a Google Analytics Account.

It’s simple to set up an account. go to https://analytics.google.com and sign up with your Google account. If you don't have a Google account, create a google account and then sign up to Google Analytics.

Set Up Your Google Analytics account and add a Property to  get a Measurement ID(previously known as a tracking Id)

After creating an account, you can add properties to the Google Analytics account from the editor/admin dashboard. Enter your account and website name, as well as the website’s URL. you have to select your website’s industry category and the time zone you want the reporting to be in.

After filling up the required fields accept the Terms and Services in order to get your measurement id.

Recommended Reading
thumbnail

How to Install & Setup Hugo Theme

Hugo is one of the fastest modern static site generators. Hugo is very easy to use for developing static websites.

Read article

Configuring Google Analytics to Your Hugo Website

There are two steps to adding Google Analytics to Your Hugo Website.

First, we need to use the Measurement Id that we have created at Google Analytics. To do that, in your config.toml file, add the line

googleAnalytics = "G-000000000"**

Note: ** You will get a new measurement id each time you create a property.

Now you have to use this Google Analytics tracking code on your website. Fortunately, Hugo has a built-in Google Analytics Template. Google Analytics also provides built-in code to use on our sites.

On your Hugo theme, embed the Google Analytics Template or codes into the header.html

Generally, The header file is located at

<HUGO ROOT>/themes/yourtheme/layouts/partials/header.html

You can embed the template or add the code here. 

Next, you have to edit our header.html file to include the template for google analytics. there should be a <head> </head> section at the top.

Using Hugo's analytics template

To add Hugo’s built-in  Google Analytics Template, copy the following codes and paste them just before the end of the tag </head>.

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

Using google analytics provided code

To add Google Analytics built-in code,  just copy the following codes and paste them just before the end of the tag </head>

{{ with site.Params.googleAnalytics }}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', '{{ . }}');
</script>
{{ end }}

Conclusion

And that’s all. You have successfully added your Google Analytics account to track your Hugo website traffic. It is probably the easiest method to track traffic for your Hugo site.

bucket

Build what you love. With a little assist from StaticMania

Get a custom website that’s tailored to fit. Clothes that fit you the best are tailor-made since they are made exactly to match your requirements. We are the tailor for your website. Place your requirements, we will do that for you.

Get Connected