Setting up Google Analytics on hugo-apéro
September 9, 2022
TL;DR
In this blog, I summarize the steps necessary to set up Google Analytics on a Hugo-Apéro website.
Introduction
Google Analytics is a useful tool for measuring and understanding engagement with your personal website. In my experience, it is probably the most painless method for accessing detailed tracking data for a Hugo site. Helpfully, most Hugo themes come with it pre-installed through an internal template.
In this blog, I’ll outline the two steps necessary to configure Google Analytics for your Hugo-Apéro website:
Obtain a Google Analytics measurement ID
If you don’t already have one, we first need to sign up for a Google Analytics account. This is straightforward and can be done at their website here. If you already have a Google account, then you can expedite the account setup process by using it.
-
Go to Google Analytics.
-
If you do not have an account, click the blue “Get started today” button and follow the prompts.
-
Otherwise, click the “Sign in to Analytics” button and log in.
Now that we’re logged in to our account, we can create a measurement ID parameter1 to track activity on our site. First, go to the Admin settings by clicking the blue gear on the bottom-left of the page. We need to create an account and then a property, which will track our site using a unique measurement ID.
-
Click the grey gear at the bottom of the lefthand side menu to go to the “Admin” settings.
-
Click the blue “+ Create Account” button.
-
Follow the prompts to setup the account:
- Enter your “Account name”.
- Choose your desired “Account Data Sharing Settings”.
- Click “Next”.
- Enter your “Property name”.
- Choose your desired timezone and currency.
- Click “Next”.
- For “Industry category”, select “Other Business Activity” from the dropdown list.
- For “Business size”, select “Small”.
- Select all applicable ways in which you plan to use Google Analytics, if desired.
- Click “Create”.
- Agree to the Google Analytics Terms of Service. Note that you do not have to do so, but you will be unable to proceed without accepting.
-
Follow the prompts to setup a data stream:
- On the screen that appears, under “Choose a platform”, select “Web”.
- Enter your “Website URL”, which should be your base URL for your personal site.
- Enter your “Stream name”, which is the name for the particular data stream.
- Click “Create stream”.
-
Copy the “MEASUREMENT ID” parameter.
We have now setup Google Analytics to track activity on our website. Note that the process outlined above is applicable for “Google Analytics 4”. It is still possible to use “Google Analytics 3”; however, it will only be supported until the middle of 2023. So if you are establishing a site now, it’s best to use 4 out of the box.
Also note that if you need to access the measurement ID parameter for the data stream in the future, I found this Analytics help page useful.
Configure your Hugo-Apéro website
Google Analytics is built into most Hugo websites through an internal template. These are standard code blocks for common use cases on static websites, e.g., comment boards, Twitter cards, etc. Since Google Analytics is a common feature of most sites, its internal template can easily add the necessary code to each page.
Hugo-Apéro is built to accommodate both Google Analytics 3 and 4. You can check this by ensuring the following lines of code are included between the <head>tags within </layouts/partials/head.html>:
{{ template "_internal/google_analytics.html" . }}
{{ template "_internal/google_analytics_async.html" . }}
These two lines ensure the measurement ID is embedded in the HTML of each page.
To include link our website to the data stream we just created on Google Analytics, we need to use the measurement ID we copied earlier. Within the top level of your <config.toml>, add the measurement ID under the googleAnalytics parameter.
googleAnalytics = "G-ML9FQ66R8"
Make sure to replace the string with your specific measurement ID.
We can now check whether setup was successful by building the site locally and checking for traffic at our Google Analytics account homepage.
-
Add the measurement ID to the
googleAnalyticsparameter within your <config.toml> file. -
Build your site locally by running
blogdown::serve_site(). -
Check your Google Analytics homepage to ensure data collection is active. By clicking on the grey house in the lefthand side menu, you should see some version of the image below.
You can now stop the server using blogdown::stop_server() and push the changes to GitHub. At this stage, you should be able to detect traffic on your live Hugo-Apéro site.
References
I found the following references helpful in adding Google Analytics to this site as well as preparing this blog:
- How to add Google Analytics to your Hugo site by Charly3Pins.
- Adding Google Analytics to your Hugo Site by Gideon Wolfe.
- Setting Up Google Analytics on Hugo by Zachary Deptawa.
-
Measurement IDs are also known as tracking IDs. ↩︎