How to add Google Analytics to your Hugo Site
- Md. Saad
- June 05, 2022
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.
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 articleConfiguring 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.
