How to make site updates to support Google Analytics 4

support
1

Hey, all. As many are aware, Google is sunsetting “Universal” analytics and encouraging everyone to switch to Google Analytics 4. I believe I’ve followed their instructions, but nothing is showing up in my GA account, so I’m curious what others have done to make the switch.

My params.toml file contains a “google_analytics” variable where I put my tracking code (and which has been functioning with my old “UA” code thus far). I’ve switched that to my new tracking code, but nothing is being passed through to GA.

Is there something else I need to switch somewhere?

Thanks!

1 Like
2

Hi, the name of the parameter probably depends on your theme, in stock Hugo it’s “googleAnalytics”.
Another thing that’s needed is that your theme should generate the proper code for google analytics. The stock Hugo template (Internal Templates | Hugo) does that automatically, if you use a recent enough Hugo version (I’m not sure which version added GA4 support, I know that I had to upgrade from 0.72 to make it work.)
HTH

1 Like
3

Thanks. As I write this, I’m using the latest Hugo (0.97.3 extended), and the latest version of the Academic theme (v5).

Having said that … it appears to be working after all. It was just a little slow to register on the GA end.

4

GA4 support was added to the non-async version of the built-in Google Analytics (see: hugo/tpl/tplimpl/embedded/templates at master · gohugoio/hugo · GitHub )

You may want to check, and then update, the theme’s call for GA from google_analytics_async.html to google_analytics.html.

From:

{{- if .Site.GoogleAnalytics }}
    {{ template "_internal/google_analytics_async.html" . }}
{{- end}}

To:

{{- if .Site.GoogleAnalytics }}
    {{ template "_internal/google_analytics.html" . }}
{{- end}}

Since you said you have a google_analytics param, then the theme is using its own GA code and param.

To use the built-in GA feature, add the above code shown (non-async version) somewhere in your theme’s baseof.html or head.html file. Then use the built-in param googleAnalytics ="G-" in your config.toml (top-level; before any [] sections).

Edit: You can delete the custom param google_analytics in your params.toml file so the theme will not add its own GA embed–assuming it’s conditional, if not, there probably is a separate disable setting from the theme.

It should work then.

Shalom!

:slight_smile:

5

It is safe to assume that the default internal (_internal/google_analytics.html) is also async, looking at the code it looks like so, but I’m not 100% sure:

If so, then any reason to keep using the old one?

6

Or just create Google Analytics 4 property and once you will have your G-xxxxxxx use minimal approach by pasting the code in your website header.

Paste minimal code into your page <head> after <title> tag. Replace G-XXXXXX with your tracking/measurement ID.

But before you do, make sure you set Data Stream data retention to 14months from default 2 and link your GA4 web data stream with Google Search Console.

2 Likes
7

Thanks for the extra notes! I would have skipped those without your suggestions.

1 Like