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 :
👉 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 !
Google Tag Manager regroupe 3 piliers :
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 :
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 :
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 ? :)
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 !
