search

theNewDynamic / gohugo-theme-ananke

Ananke: A theme for Hugo Sites
https://gohugo-ananke-theme-demo.netlify.com/
MIT License
1.13k stars 1.14k forks source link

Google Analytics async code not working with new gtag.js global tagging system #535

Closed m0nt3cr1st0 closed 2 years ago

m0nt3cr1st0 commented 2 years ago

Hello everyone,

When trying to configure GA for my site, I could see from the source code that the async version of the script was being used (not sure why, but that one was not working)

On the other hand, if I modify ./themes/ananke/layouts/_default/baseof.html to use Hugo's internal template for the synchronous version then it works like a charm.

This might not be a bug per see but I misunderstood the theme documentation, is there any clever way to do this? Or is it expected that if I want to use the synchronous version I have to do that manual tweak?

budparr commented 2 years ago

Hi @m0nt3cr1st0 yes, that's what you need to do to swap out the templates. The async does work though. If you're having problems, maybe ask on the Hugo forums.

m0nt3cr1st0 commented 2 years ago

Thanks for your answer and your time @budparr !

Aweponken commented 2 years ago

@budparr Are you sure that the async version still works? Looking at the Hugo docs it's recommended to use the sync version for Analytics V4.

When using Google Analytics v4 use _internal/google_analytics.html.

And when I'm looking at the code for sync it seems to support both the V3 and V4, whereas the async code does not (and is not updated since 2018). Perhaps this issue should be re-opened?

I'm trying to get Google Analytics to work but without luck. I'm also pretty fresh with Hugo so bare with me. First attempt I added the layouts/_default/baseof.html in my repo and modified the internal template within it to use the sync version. That didn't work as I got a bunch of executing "page/single.html" at <partial "site-scripts.html" .>: error calling partial: partial "site-scripts.html" not found when trying to build. Perhaps I can't override default templates when I've installed the theme as a Hugo submodule?

In my second attempt I added the gtag.js script tag to layouts/partials/site-scripts.html, but for some reason it's not getting picked up.. Below is the content I added to the file if that helps.

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

    gtag('config', 'G-AABBCCDDEEFF');
</script>
emctl commented 2 years ago

@Aweponken - FWIW, can you try adding:

<head>
{{ template "_internal/google_analytics.html" . }}
{{ template "_internal/google_analytics_async.html" . }}
</head>

to layouts/partials/head-additions.html (or create that file if not present)

Ensure the config.toml has your GA id.

The key for me was changing the filename to head-additions.html

Aweponken commented 2 years ago

@emctl Hmm yes, have you tried that solution? I'll give it a go! EDIT: Works like a charm! Thanks a lot!

It seems I've might have jumped the gun too soon here. My second approach with adding the script tag to layouts/partials/site-scripts.html seem to work like a charm.

budparr commented 2 years ago

Versions before GA 4 should still work through July. Anything to add, @regisphilibert ?

regisphilibert commented 2 years ago

Created a ticket to discuss this. https://github.com/theNewDynamic/gohugo-theme-ananke/issues/546

emctl commented 2 years ago

@emctl Hmm yes, have you tried that solution? I'll give it a go! EDIT: Works like a charm! Thanks a lot!

It seems I've might have jumped the gun too soon here. My second approach with adding the script tag to layouts/partials/site-scripts.html seem to work like a charm.

Yes @Aweponken - This worked for me and was my fix

regisphilibert commented 2 years ago

Wait @emctl so you added both internal templates?

emctl commented 2 years ago

@regisphilibert - yes:

<head>
{{ template "_internal/google_analytics.html" . }}
{{ template "_internal/google_analytics_async.html" . }}
</head>

with a v4 GA code (i.e. googleAnalytics = "G-<bla>")

RoninTech commented 2 years ago

I'm just updating my Hugo Ananke website to Google Analytics 4 (GA4). Website source is here. I'm noticing that the page headers don't look right. According to the GA4 instructions, every page header should contain:

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

  gtag('config', 'G-QT3G9GJDXC');
</script>

As described above by others above, I created layouts/partials/head-additions.html and added the following lines to it:

<head>
{{ template "_internal/google_analytics.html" . }}
{{ template "_internal/google_analytics_async.html" . }}
</head>

That resulted in every page having the following GA script blocks in the header:

<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'G-QT3G9GJDXC', 'auto');

    ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

    <head>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-QT3G9GJDXC"></script>
<script>
var doNotTrack = false;
if (!doNotTrack) {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-QT3G9GJDXC', { 'anonymize_ip': false });
}
</script>

<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'G-QT3G9GJDXC', 'auto');

    ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

</head>
  </head>

The first and third script blocks are not required according to Google's GA4 tagging instructions. The second gtag script block is the one we need. I can get rid of the third block by changing layouts/partials/head-additions.html to:

<head>
{{ template "_internal/google_analytics.html" . }}
</head>

The first script block appears to be created by lines 39-40 of baseof.html in themes/ananake/layouts/_default/. If I copy baseof.html to layouts/_default/basof.html and remove these lines, every page's header now only contains the following GA related script block:

<head>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-QT3G9GJDXC"></script>
<script>
var doNotTrack = false;
if (!doNotTrack) {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-QT3G9GJDXC', { 'anonymize_ip': false });
}
</script>

</head>
  </head>

This looks good from a GA4 perspective except now every page has 2 <head> sections which probably isn't ideal. To fix this I simply removed the head tags from layouts/partials/head-additions.html so now it only contains:

{{ template "_internal/google_analytics.html" . }}

And now everything "seems" to be ok. I'd like to hear opinions from more experienced hugo/ananke folks on whether what I have done makes sense or could have unintended consequences.

Thanks for your patience reading this! :-)