Tester rapidement de nouveaux outils sur son site sans développeur

5 min
B2B
B2C
Conversion
Canal :
Site internet
Levier :
Automation
Créer un compte Google Tag Manager et l’intégrer sur son site internet.
Ajouter ses outils (comme Hotjar, Crisp, Google Optimize ou encore Sumo) directement dans son compte Google Tag Manager.
Prévisualiser l’expérience sur son site avant de publier les outils pour éviter les bugs puis intégrer les outils sur son site en 1 clic depuis Google Tag Manager.
📣 Ce tuto a été écrit avec la collaboration de

Aurélia Zambon

Étape 1

Créer un compte Google Tag Manager et l’intégrer sur son site internet

Dans ce Tuto, Pierre va installer les outils Crisp et Hotjar sur son site www.pierreguilbaud.fr grâce à  l’outil Google Tag Manager.

👉 Commencez par créer un compte sur l’outil Google Tag Manager (vous aurez besoin d’un compte Google) :

👉 Ajoutez le nom de votre compte et choisissez un nom pour votre conteneur (l’espace dans lequel vous allez ajouter des outils). Puis acceptez les conditions d’utilisation :

Une fois cette page validée, vous arrivez sur l’interface Google Tag Manager et on vous proposera de l’intégrer à votre site internet :

Vous avez 2 options :

  1. Copier le code HTML partagé par GTM dans la section <head> et </head><body> de votre site internet.</body>
  2. Installer un plugin sur votre CMS (on vous conseille d’utiliser un plugin si possible, c’est beaucoup plus facile à paramétrer).

👉 Si vous êtes sur Wordpress par exemple, installez le plugin gratuit Google Tag Manager for Wordpress.

👉 Une fois le plugin installé, copiez-collez l’ID de votre conteneur Google Tag Manager :

À partir de maintenant, vous n’aurez plus besoin de toucher au back end de votre site pour intégrer de nouveaux outils.

Et oui, elle est pas belle la vie ? :)


Google Tag Manager est installé et live sur votre site internet !

Étape 2

Ajouter ses outils directement sur Google Tag Manager.

Google Tag Manager regroupe 3 piliers :

  1. Les balises : les outils que vous ajoutez.
  2. Les déclencheurs : les moments et les endroits où les outils vont se mettre en marche.
  3. Les variables : les infos propres à votre site (comme le code de tracking de Hotjar par exemple).

Pour activer un outil sur votre site via Google Tag Manager, vous avez 2 options :

Option 1

L'outil vous fournit un code HMTL à intégrer (exemple de CRISP), dans ce cas vous allez :

  1. Ajouter une balise type HTML (exemple : le code HTML de Crisp)
  2. Ajouter un déclencheur (exemple : la page d’accueil de votre site)

Dans ce cas, le live chat Crisp se déclenchera sur la page d’accueil de votre site.

Option 2

L'outil vous fournit uniquement un Identifiant (exemple Hotjar), dans ce cas vous allez :

  1. Ajouter une balise (exemple : l'outil Hotjar)
  2. Ajouter une variable (exemple : votre ID Hotjar)
  3. Ajouter un déclencheur (exemple : toutes les pages du site)

Dans ce cas, Hotjar se déclenchera sur toutes les pages de votre site afin de mesurer les données.

Commençons par vous montrer comment fonctionne l’option 1 :

👉 Cliquez sur “Balises” dans la colonne de gauche, puis sur “Nouvelle” pour en créer une.  

👉 Commencez par configurer la balise en cliquant dessus :  

👉 Choisissez “HTML personnalisée” afin de pouvoir copier coller le code d’installation de l’outil Crisp (cf plus bas).

Et voici l’espace à compléter avec le code Crisp :

👉 Allez sur l’outil Crisp pour récupérer le code HTML d’installation :

👉 Copiez-le dans l’espace réservé, puis cliquez sur “Déclenchement”  :

L’objectif de la partie déclenchement est de déterminer quand et où doit se déclencher l’outil.

👉 Choisissez “All pages” si vous souhaitez que le live chat apparaisse sur toutes les pages de votre site.  

Et voilà votre Balise complète :

👉 Renommez la Balise “Crisp” pour la retrouver facilement et cliquez sur “Enregistrer” :

Et voilà, Crisp est installé sur Google Tag Manager :

✅ Vous venez d’installer votre premier outil sur Google Tag Manager !

Maintenant, installons Hotjar en suivant l’option 2 :

👉 Cliquez sur “Nouvelle” balise et recherchez l’outil Hotjar :

 👉 Renommez la balise “Hotjar” et ajoutez l’identifiant de votre compte Hotjar (c’est la variable) :

👉Ajoutez l’élément déclencheur de l’outil et cliquez sur Enregistrer :

Paf ! 2ème outil installé sur GTM :).

Bon tout ça c’est bien, mais il serait temps de voir ce que ça donne sur le site non ? :)

Étape 3

Prévisualiser l’expérience sur son site avant de publier pour éviter les bugs puis activer les outils sur le site.

Aller vite c’est bien, mais il ne faut pas non plus aller trop vite.

Il est important de ne pas endommager l’expérience actuelle de votre site.

C’est aussi pour ça que GTM est top, il permet de visualiser à quoi ressemble votre site avec le nouvel outil avant de l’intégrer à 100%.

Parfait pour éviter les bugs !

👉 Cliquez sur le bouton “Prévisualiser” :

Cela va ouvrir votre site internet pour visualiser le résultat avant de le publier :

C’est top pour vérifier qu’un outil comme Crisp marche, mais avec Hotjar on ne voit rien.

Du coup GTM ouvre une deuxième fenêtre pour valider le bon fonctionnement de tous les outils :

Sur cette fenêtre, on voit bien que les “Tags” Crisp et Hotjar ont bien fonctionné puisqu’il est mentionné “Fired 1 time” :  cela veut dire que GTM a repéré que le live chat était bien apparu sur le site comme prévu et que Hotjar mesure bien les données (cf déclencheur : “All pages”).

Vous pouvez ainsi publier l’outil sur votre site internet sereinement en cliquant sur le bouton “Envoyer” de votre interface Google Tag Manager. En effet, rien n’est live tant que vous n’avez pas cliqué sur “Envoyer” après avoir effectué un changement.

✅ Vous venez d’intégrer les 2 outils sur votre site internet via GTM.

Et si vous voulez en ajouter d'autres, il suffit de reproduire l’opération !

Si à un moment vous souhaitez désactiver un outil de votre site, il suffit de le mettre en pause sur GTM et de republier votre balise.

👉 Pour cela, sélectionnez la balise, cliquez sur pause et cliquez sur Envoyer.

Tips : c’est important de mettre en pause les outils que vous n’utilisez plus. Cela permet d’alléger votre site et donc d’améliorer sa performance globale.

Et hop, en 3 clics votre outil n’est plus actif sur votre site !

Étape 4

BONUS

À vous de jouer ! :)
Pierre & Mégane, fondateurs de Marketing Flow