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.

[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!

[satani99]

@whiteboardmonk i have tried everything i can think of but i somehow can't connect the google analytics to hugo papermod theme.
can you please help me?

[whiteboardmonk]

@whiteboardmonk i have tried everything i can think of but i somehow can't connect the google analytics to hugo papermod theme. can you please help me?

I've added a small block like this in my hugo.yml

You need any help in particular?

[satani99]

I have done the same but it's not working.
Are you hosting the site on GitHub pages? I'm hosting on that.

[duladissa]

@satani99 along with the below config in hugo.yaml you need to add the google_analytics.html as well

1. hugo.yaml

services:
  googleAnalytics:
    id: G-XXXXXXXXXX
  instagram:
    disableInlineCSS: true
  twitter:
    disableInlineCSS: true

2. Create layouts/_internal/google_analytics.html and copy the content from here https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html

3. Search in your project google_analytics.html and you should see themes/PaperMod/layouts/partials as below screenshot

[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

[danieltak]

Should the documentation be updated to the Hugo doc services?

Currently it is like this https://github.com/adityatelange/hugo-PaperMod/wiki/Installation:

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

And seems to not work...

[duladissa]

Along with the below config in hugo.yaml you need to add the google_analytics.html as well

1. hugo.yaml

services:
  googleAnalytics:
    id: G-XXXXXXXXXX
  instagram:
    disableInlineCSS: true
  twitter:
    disableInlineCSS: true

2. Create layouts/_internal/google_analytics.html and copy the content from here https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html

3. Search in your project google_analytics.html and you should see themes/PaperMod/layouts/partials as below screenshot