How to install the new Google Analytics 4 code to your site?

[Jarmos-san]

Google Analytics is now using the new gtag.js tracking code. But Hugo's internal GA template doesn't work with the new code yet. So, I just wanted to give a heads up to people who're not sure how to get it to work.

The code looks something like this - G-XXX012XXYY. And updating the config.yaml with that code instead of the older UA-XXX012XXYY wouldn't work. Fortunately & thanks for @adityatelange's forward thinking, you can easily integrate the new code with ease.

So, here's how you do it.

• Ensure you've updated your config.yml is updated with the new code. So, replace the older value of GoogleAnalyticsID with the new G-XXX012XXYY.

• Copy & paste the following gtag.js snippet into extend_head.html:

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsID}}"></script>
  <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
  
      gtag('config', '{{ .Site.Params.GoogleAnalyticsID}}');
  </script>
  <!-- End of Global site tag (gtag.js) - Google Analytics -->

• Ensure your browser isn't blocking any JavaScript & tracking cookies while running the hugo server in the background. Check your site loads properly on localhost:1313 & you should see something similar to the image below on your Google Analytics dashboard.

  

[melissagwolf]

I just stumbled across this. I use a different template (hugo-xmin), but wanted to report that I was just able to add the new GoogleAnalyticsID with the new G-XX format to my config.toml file and begin successfully tracking visitors to my site without adding the gtag.js file. I'm not sure if this is template specific or if a change has been made so that the new GA4 tracking ID is now compatible with blogdown. Apologies if this does not apply.

[vdinolov]

@melissagwolf Could you share your solution? I am having the same issue and wondering if it is template specific...thanks!

[urwa]

After spending hours trying to add the js tags in the PaperMod submodule extend_head.html. I then read your comment and I only added the following in config.yaml and it worked just fine. I could see my click in Google Analytics when I loaded my site.

services:
  googleAnalytics:
    ID: G-XXXXXXXXX

[whiteboardmonk]

After spending hours trying to add the js tags in the PaperMod submodule extend_head.html. I then read your comment and I only added the following in config.yaml and it worked just fine. I could see my click in Google Analytics when I loaded my site.

services:
  googleAnalytics:
    ID: G-XXXXXXXXX

This worked for me!

[doneber]

I was trying and trying and it wasn't working until I noticed I was using Brave browser to test my site. Lol

[ytrepidorosonomous]

https://discourse.gohugo.io/t/replace-hugos-inbuilt-google-analytics-template-with-minimal-analytics-ga4/43704