Hugo et Google Analytics

Le problème

Bon, si vous nous lisez depuis un moment, vous n’êtes pas sans savoir qu’on est assez fan de Hugo par ici.

Et dans le contexte de cet article, Hugo permet d’utiliser Google Analytics, Disqus, et bien d’autres outils, simplement en paramétrant quelques arguments.
Exemple ici, avec Google Analytics.

Concrètement, Hugo propose des templates HTML qui font tout le boulot à notre place, et c’est sacrément cool, pour peu que ces derniers soient importés par le thème choisi.

Seulement voilà, début octobre, Google Analytics a fait une mise à jour, appliquée à tout nouveau compte et ça change pas mal la façon d’envoyer des évènements:

• remplacement de l’ID de suivi par un ID de mesure, qui n’est lui, pas créé automatiquement à la création du compte,
• utilisation obligatoire de https://www.googletagmanager.com/gtag en lieu et place de https://www.google-analytics.com/analytics.js

Liste non exhaustive évidemment, mais c’est ce qui va nous concerner dans le cas présent.
Et côté Hugo, … bah c’est pas encore à jour 😥, presque, mais pas encore, la PR n’est pas encore mergée.
Alors, comment on fait en attendant ?

La solution

Bon, du coup, vu qu’on ne peut pas utiliser le template existant, il faut écraser l’import du template ({{- template "_internal/google_analytics_async.html" . -}}), et le remplacer par le code adéquat:

• Dans les layouts du thème actif, trouver dans quel layout est importé le template _internal/google_analytics.html ou _internal/google_analytics_async.html
• Copier le layout dans le folder layout, en suivant la même arborescence
• Remplacer l’import par le code suivant le template proposé par GA:

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

  gtag('config', 'ID-GA');
</script>

et puis c’est tout… bon, c’est plus un workaround qu’une solution, en attendant que le template soit mis à jour coté Hugo.