Unfortunately, I have spent the last 24 hours so deep in the google seo suite it’s sending me that “u up?” text at 3am. Somehow more true to the analogy than I care to admit, the entire expierence has been a disapointment for everyone involved, in ways that prior to this experience I would have thought impossible.

I think this screenshot sums up the experience pretty well:

Anyway, I’m not here to talk about how much I hate google, I’m here to talk about how to set up a google analytics 4 tag on a hugo site. This will hopefully be short and sweet, but I’m not making any promises.

Throw out your tag manager snippet.

Normally I use the google tag manager to handle the tags, mainly for ease of updating with 101 random cookies and tracking pixels. HOWEVER, using the honest to god snippet they provide for the tagmanager just straight up does not work (citing being depricated, only for the help docs to be cyclical and not actually provide a solution).

Set up a new property in google analytics 4

simples.

Add the Tag to the Website

So this will slightly differ depending on how you want to lay out your config. I’m setting mine to params.seo.ga4, but you can set it to whatever you want.

[params.seo.ga]
ID = "G-XXXXXXXXXX"

once thats in place create a new file in layouts/partials called ga4.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

  gtag('config', '{{ .Site.Params.seo.ga4.ID }}');
</script>
{{ end }}

Bonus Copilot suggestion:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{ if .Site.Params.ga4 }}
{{ with .Site.Params.ga4 }}
{{ with .trackingId }}
<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 }}
{{ end }}
{{ end }}

You can add this optional dataLayer script for an easy entry point for custom events

1
2
3
4
5
6
7
8
9

   <!-- OPTIONAL dataLayer -->
  <script>
    var dataLayer = window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      host: window.location.hostname,
      page:'{{ .Title }}',
      categories:'Your dataLayer'
    });
  </script>

Add the Tag to the Header

Add the following to the header partial

1

{{ partial "ga4.html" . }}

The only thing left to do is to test it, and then wait for the data to come in.

Personally I swear by this plugin, it’s originally for chrome but it’s been ported to firefox and works great. You can find it here: https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna