Add support for google analytics v4

[torrayne]

The Google analytics template doesn't work with Google Analytics v4 (gtag.js) #7954. v3 analytics.js is not depreciated so we should support both using hasPrefix to tell the difference.

It should be noted that gtag uses the async attribute. Which is more like google_analytics_async.html. I'm not sure if we should move the changes to that template instead. The naming of the template is also confusing. See #8261.

Privacy settings anonymizeIP and respectDoNotTrack are supported while useSessionStorage is not. I could only find one document with instructions for session storage but in my testing it still set cookies.

[coliff]

This looks like a good PR! I haven't built/tested it, but glancing over the code it works how I would have expected it to. We'll have to update the Docs too.
We'll have to mention that if a user has a GA4 property ID then they should use the "_internal/google_analytics.html" template as the "_internal/google_analytics_async.html" won't render the new gtag template you added.

[bep]

OK, @djatwood could you add a couple of lines to the relevant docs section below /docs in this repo?

[torrayne]

I'm happy to update the docs. I could also add gtag support to google_analytics_async.html I just wasn't sure. What do you think about that?

[bep]

I could also add gtag support to google_analytics_async.html I just wasn't sure. What do you think about that?

No, let's drop that, that creates too much stuff to maintain.

I suggest that we mention that in the docs is that "for v4, use that other template".

[torrayne]

Alright I believe everything should be ready for review now.

[natalianunez]

@djatwood, can you help me? I'm trying to use ga v4. So I'm setting the config .toml file as the docs, the baseof.html it's using the {{ template "_internal/google_analytics.html" . }} but still not tracking. May I miss something because I don't realize how to change this variable doNotTrack , when I render the site:

var doNotTrack = false;
if (!doNotTrack) {
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-xxxxxxxxxx', { 'anonymize_ip': false });
}

It's always false and doesn't execute the script.

Sorry if I sound stupid, but I'm a noobie in all that stuff.

[torrayne]

I don't know if I have enough information. doNotTrack needs to be false for tracking to run. It's a double negative. Do you have any errors in your console? Are you using any browser other than chrome? Safari and Firefox will block GA

[bfeif]

@natalianunez I'm having the same issue as you. Everything looks fine, and the request goes through with Status: 200 in the browser. However, still nothing is getting sent to google analytics. Is anybody else still having an issue with this? I raised the issue on discourse.hugo.io as well.

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.