Comment utiliser les modèles personnalisés sur Google Tag Manager ?

15/01/2019 – Monique

  • Outils utilisés

    Google Tag Manager

  • Prix

    Gratuit

  • Difficulté

    Intermédiaire

En mai 2019, Google a présenté une nouvelle fonctionnalité dans son gestionnaire de balises Google Tag Manager (GTM) : les modèles personnalisés. Vous êtes passés à côté de cette nouvelle quand elle a été annoncée ? Moi aussi !

Heureusement, je me suis rattrapée depuis et j’ai bien fait ! GTM est constamment mis à jour et est amélioré constamment, mais l’arrivée des modèles personnalisés est pour moi l’un des changements les plus significatifs ayant été introduits ces dernières années dans Google Tag Manager. Pourquoi ? Comment s’en servir pour vos besoins analytics ? Je vais tenter de répondre à ces questions dans cet article ! 

A quoi servent les modèles personnalisés ?

Si vous utilisez Google Tag Manager régulièrement, vous savez sûrement qu’en plus des balises et des variables déjà pré-configurées, vous pouvez injecter votre propre code HTML/ JavaScript pour suivre des évènements plus complexes sur votre site ou sur votre application. Ces scripts personnalisés sont l’occasion de mettre en place un tracking plus efficace de vos différentes actions marketing mais ils présentent également un risque pour votre site, puisqu’ils modifient souvent le contenu de vos pages et peuvent également dégrader leur vitesse de chargement.

Avec les modèles personnalisés, Google Tag Manager met en place un environnement plus sûr pour injecter du code sur votre site grâce à la nouvelle interface d’éditeur de modèles qui permet aux utilisateurs de créer et de partager facilement leurs propres configurations JavaScript et HTML personnalisées, tout en veillant à ce que le code soit optimisé pour un meilleur déploiement dans le navigateur Web.

Une balise HTML personnalisée

modèle personnalisé google tag manager

Après : un modèle personnalisé

Pourquoi les modèles personnalisés sont plus sécurisés que les scripts HTML personnalisés ?

  • Les modèles personnalisés utilisent une version de JavaScript en sandbox (= bac à sable). Avec cette version de JavaScript, certaines opérations sensibles nécessitent l’utilisation d’API associées à des permissions qui sont prédéfinies par Google (vous pouvez les retrouver ici). Ces API assurent que les modifications potentiellement dangereuses et/ou intrusives sont faites de manière contrôlée.
  • Les modèles peuvent être réutilisés, ce qui veut dire que vous devrez charger moins de code sur votre site, et qu’il sera donc plus stable.
  • En plus d’apporter plus de sécurité, les modèles personnalisés rendent la collaboration entre les développeurs et les non-développeurs plus facile : par exemple, si vous savez coder, vous pouvez créer un modèle dont vos collègues pourront ensuite se servir sans avoir besoin de votre aide. De plus, grâce à la librairie de l’éditeur de modèles, vous pouvez utiliser les modèles créés par d’autres utilisateurs ou même partager les vôtres.

Cas d’usage : comment créer un cookie avec un modèle personnalisé en 5 étapes ?

Maintenant qu’on sait à peu près ce qu’est un modèle personnalisé, il est temps d’en créer un ! Pour cet article, nous allons aborder un cas plutôt simple : la création de cookie.

Créer ses propres cookies peut être utile dans plusieurs cas de figure : par exemple, si on veut savoir si un livre blanc est réellement efficace pour nous aider à obtenir des conversions, créer un cookie qui sera déposé dans le navigateur de l’utilisateur à chaque fois qu’il téléchargera le document nous permettra de connaître la proportion de prospects qui vous ont contacté et qui ont téléchargé le livre blanc.

Etape 1 : Dans l’onglet « Modèles », on va cliquer sur « Nouveau » pour accéder à l’éditeur de modèles. On commence par décrire notre modèle (nom, description,etc.° et par choisir si on veut le partager avec la communauté GTM. Pour cela, il faut cocher la case «  J’accepte les Conditions d’utilisation de la galerie de modèles de la communauté  »

Etape 2 : Passons ensuite à l’onglet « Champs ». Dans cet onglet, vous devez configurer l’interface et les champs que l’utilisateur devra remplir à chaque fois qu’il devra utiliser la balise. Pour ça, on doit également choisir comment l’utilisateur devra remplir les champs : saisie de texte, case à cocher…

Pour mon modèle, il y aura 4 champs à configurer :  

  • Ajout ou suppression du cookie 
  • Nom du cookie
  • Description du cookie
  • Valeur du cookie

 N’hésitez pas à utiliser les icônes d’aide si vous avez un doute sur ce que doit contenir chaque champ.

Configuration du menu déroulant pour choisir le nom du cookie

Etape 3 :

Pour notre modèle, on va faire appel aux 3 API suivantes :

  • querypermission pour utiliser l’autorisation getcookies, qui permet de déterminer si un cookie peut être lu, en fonction de son nom
  • getcookievalues pour récupérer le nom du cookie
  • setcookie pour ajouter ou supprimer le cookie si le cookie est autorisé à être lu.

Ainsi, l’API cookie requiert l’utilisation de 4 paramètres : le nom du cookie (cookieName), sa valeur (cookieValue) et ses options liées au cookie (domaine : path, durée d’expiration : max-age…)

Etape 4 : En fonction des API appelées dans notre code, les autorisations dont notre modèle a besoin ont été prédéfinies automatiquement, tout ce qu’il nous reste à faire, c’est de les compléter. Dans notre cas, il faut spécifier les cookies qui seront autorisés à être lus ; ce sont ceux que l’on a défini dans l’onglet « Champs ».

C’est bon, notre modèle est prêt ! Vous avez sans doute remarqué que l’on a pas du tout consulté l’onglet « Tests ».  C’est une fonctionnalité optionnelle qui sert tester un modèle sans avoir besoin de le déployer votre balise, ce qui est utile pour le tester le modèle en temps réel, pendant que vous l’écrivez.

Etape 5 : Il est maintenant temps d’utiliser notre modèle. Pour cela, il faut créer une nouvelle balise. 

Ensuite, il faut remplir les champs que l’on a configuré et sélectionner un déclencheur.

C’est bon, on a presque fini ! Avant de partir, vérifions que notre modèle et notre balise fonctionnent correctement :

  • On vérifie d’abord que la balise est bien déclenchée dans le mode prévisualisation
google tag manager

Ensuite, l’inspecteur va nous permettre de voir si le cookie est bien stocké par le navigateur. Avec Google Chrome, faites un clic droit pour accéder à l’inspecteur, puis appuyez sur « Application » et ensuite sur « Cookies » . 

J’espère que ce article vous donnera aussi envie de créer vos propres modèles ! Si c’est le cas, voici quelques ressources plus exhaustives pour vous aider : 

Si vous voulez utiliser mon modèle, il est disponible dans la librairie de modèles : il s’appelle « Création de cookies ».

Abonnez-vous pour être prévenu quand j’écrirai un nouvel article 🙂 

Laisser un commentaire

©  2019 | Monique Bayama