How to get Google Analytics GA4 to work with Hugo

Question

I have a website that uses Hugo, in particular the hugo-renga theme (https://github.com/nanxstats/hugo-renga/blob/master/exampleSite/config.toml). In the past, Google Analytics has worked perfectly. However, I am trying to switch to Google Analytics 4. I have updated the tag in my config.yaml file:

googleAnalytics: ...

but it doesn't work - Google Analytics detects nothing from my site.

I have also tried :

googleAnalyticsID: ...

but this doesn't work either. What can I do to get it to work?

Answer 1

1. Make sure you've set your googleAnalytics="G-XXXXX" in your config file.
2. Make sure the code you've set is your expected measurement id.
3. Once this is done, deploy the change, go to your front-end, reload the site clearing the cache while having your Network tab of the Dev tools open.
4. Filter the network tab by "collect". Inspect the collect calls.
5. Look whether you can see your measurement id in the tid property of your calls.

If you see your tid, then you're good. Give it two days max and you should start seeing the traffic reflected in reports. Or see real-time reports if you want to confirm further without waiting.

If you don't see your tid, then it looks like your theme ignores the config's GA4 setting, so it might be hardcoded there. You have two ways from here: change your theme to use the right code whether from the settings or just hardcode the right ga4 code, or you can just keep using your UA tracking but ask Google to cast it all into GA4 through the setup assistant.

The best solution here would be ditching UA/GA4 implementation and reimplement tracking through GTM completely. That is if you're serious about tracking and need to do more than trivial pageviews.