[FEATURE] Enable Google Tag Manager

[TheDoubleH]

Describe the feature you want 描述你的功能需求

Implementing Google Tag Manager could alleviate issues with enabling third-party scripts, as this can be handled by Google Tag Manager

Useful reference 有价值的参考

https://developers.google.com/tag-platform/tag-manager https://martijnvanvreeden.nl/how-to-add-google-tag-manager-to-hugo-static-website/ Github Repro for suggested solution: https://github.com/martijnvv/GTM-integration-Hugo https://github.com/martijnvv/GTM-integration-Hugo/blob/master/gtm.html

What got me interested in Google Tag Manager: https://gravitec.net/blog/how-to-add-gravitec-script-to-your-website-with-google-tag-manager/?_ga=2.73306839.577066394.1641967612-676978610.1641967612

[eyllanesc]

@TheDoubleH Is GTM no longer implemented?

https://github.com/HEIGE-PCloud/DoIt/blob/0470f84613208f46fcf4e1fb456c23cac4a1bbee/exampleSite/config.toml#L1022-L1026

https://github.com/HEIGE-PCloud/DoIt/blob/0470f84613208f46fcf4e1fb456c23cac4a1bbee/layouts/partials/plugin/analytics.html#L4-L11

CC: @HEIGE-PCloud

[TheDoubleH]

@eyllanesc Based on how I read it, Google Analytics and Google Tag Manager is two different things. When I go to Google Tag Manager, I have to create a new ID, which is different from the ID created / used by analytics.

The Analytics part works just fine for my site. But the Google Tag manager would make it easier to add different scripts on the fly, and manage those in Google Tag Manager.

[eyllanesc]

@TheDoubleH It seems that you did not understand my comment, I know that GA is different from GTM but the code shows that GTM has been implemented (maybe the name is not correct in the configuration). If you check the code of this site you will see that the code that GTM injects is:

{{ if .Site.Params.gtm_id}}<noscript><iframe src="//www.googletagmanager.com/ns.html?id={{ .Site.Params.gtm_id }}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>{{ end }}

which is implemented in DoIt:

https://github.com/HEIGE-PCloud/DoIt/blob/0470f84613208f46fcf4e1fb456c23cac4a1bbee/layouts/partials/plugin/analytics.html#L10

_{Note: www.googletagmanager.com/ns.html and www.googletagmanager.com/gtag/js although they are different they give the same service, they are different servers that do the same job.}

---

In the config.toml I see 2 sections where GA is indicated:

https://github.com/HEIGE-PCloud/DoIt/blob/0470f84613208f46fcf4e1fb456c23cac4a1bbee/exampleSite/config.toml#L37-L38

and

https://github.com/HEIGE-PCloud/DoIt/blob/0470f84613208f46fcf4e1fb456c23cac4a1bbee/exampleSite/config.toml#L1022-L1026

@HEIGE-PCloud Why are there 2 sections that seem to configure the same task?

[TheDoubleH]

@eyllanesc - I believe that

 # [UA-XXXXXXXX-X] google analytics code 
 googleAnalytics = "" 

is Hugo "standard" feature. (See https://gohugo.io/templates/internal/#google-analytics)

and when I tried that, it didn't work for the DoIt theme - Granted I might have done something else wrong. First time playing with Hugo, let alone this theme.

[eyllanesc]

@TheDoubleH

is Hugo "standard" feature. (See https://gohugo.io/templates/internal/#google-analytics)

And what is the other one?

[TheDoubleH]

@eyllanesc This specific Theme?

Again - I don't know Hugo well enough to know the intricacies. My assumption is, that the one documented on gohugo.io would be the "standard" / generic way of adding google analytics. -- but again - params.analytics."provider" may be a generally accepted theme setting that are used.

In an ideal world, You should be able to change theme without having to update every single configuration.

[eyllanesc]

@TheDoubleH I know something about hugo but I still don't understand why there are those 2 configurations, I have the suspicion that the other configuration is from GTM but with a bad name and with a default server that must be modified so that other servers can also be established. Therefore the second part of this comment is for the maintainer of the project.

[HEIGE-PCloud]

@TheDoubleH @eyllanesc

Does DoIt support Google Tag Manager now?

No.

Then what is {{- printf "https://www.googletagmanager.com/gtag/js?id=%v" . | dict "Async" true "Source" | partial "plugin/script.html" -}} for?

There are two versions of Google Analytics, the old Universal Analytics and the current Google Analytics 4. For UA, the original way of setting things up is by using the analytics.js (now it is recommended to use the gtag.js as well). For GA4, it uses the gtag.js. The way of setting gtag.js up looks something like this:

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

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

Which is quite confusing with the www.googletagmanager.com domain name. But it is not the Google Tag Manager, which uses gtm.js.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

There are two different options in config.toml, which one should I use?

In short, use:

https://github.com/HEIGE-PCloud/DoIt/blob/0470f84613208f46fcf4e1fb456c23cac4a1bbee/exampleSite/config.toml#L1022-L1026

The googleAnalytics option is inherited from the original LoveIt theme, it is used by the internal Hugo template. The DoIt theme supports multiple analytics services, so it uses the [params.analytics] namespace to group all configs together, while the Hugo internal template only reads options from .Site.GoogleAnalytics, so it is deprecated and a custom implemetation of GA is created.

I will update the documentation and add a notice of deprecation for the googleAnalytics option. And here is my question: do we still need the support for the Google Tag Manager or should we recommend people to use the [params.page.library.js] for importing third-party js? Currently [params.page.library.js] does not support defer or async option, but it is possible to add support for it.

[eyllanesc]

@HEIGE-PCloud

And here is my question: do we still need the support for the Google Tag Manager or should we recommend people to use the [params.page.library.js] for importing third-party js?

This discussion allows me to give insight to a larger problem: How to handle requests for new features?

My idea is to analyze each case, but following the guidelines:

DoIt want that feature to be part of the theme?

• If the maintainer of the theme considers that it is, then integrate it without using [params.page.library.js].

• If the maintainer does not consider then it would be advisable to give a workaround such as pointing out how to integrate the feature into the theme through [params.page.library.js], and at this point I would add creating a post on the theme's blog pointing out the workaround so that other users can use it without need to search the GH issues or discussions.

• In other cases, the maintainer does not want to implement the feature but using [params.page.library.js] is not enough, so since HUGO allows you to override the layouts, show how to do it following the best practices so that it is not so easy that it breaks due to a change in the theme.

With the above it allows to have a solution, allows to handle requests efficiently, show the versatility of the theme, etc. For example, implementing GTM does not seem complicated, but since the path is not clear, it takes time to give an answer (positive or negative).

What do you think?

---

On the other hand adding defer and async to [params.page.library.js] would be the most interesting. Please do it.