Comment envoyer des événements avec Google Tag Manager

Avec Hotjar Events, vous pouvez envoyer des événements à Hotjar en fonction des actions ou des changements survenant sur votre site. Ces événements peuvent ensuite être utilisés dans Hotjar pour déclencher les outils de Hotjar ou filtrer les données d'enregistrement et de carte thermique.

Avec Google Tag Manager (GTM), vous pouvez utiliser des événements et des déclencheurs dans GTM pour envoyer des événements à Hotjar, évitant ainsi le besoin de placer manuellement du code supplémentaire sur votre site. Cela se fait en créant une balise HTML personnalisée dans GTM contenant le code associé à l'événement. Vous pouvez en apprendre davantage dans la documentation de Google sur les balises personnalisées et déclencheurs.

Dans cet article, nous vous guiderons pas à pas pour envoyer des événements à Hotjar avec GTM en utilisant un exemple où nous envoyons un événement lorsque l'utilisateur clique n'importe où sur une page.

• Comment créer une balise HTML personnalisée pour envoyer un événement à Hotjar
• Comment vérifier qu'un événement est envoyé à Hotjar

Comment créer une balise HTML personnalisée pour envoyer un événement à Hotjar

Google Tag Manager doit être installé sur votre site avant de suivre ce guide. Si vous n'avez pas encore installé Google Tag Manager, vous devrez le configurer en premier. Utilisez l'article de Google Configuration et installation de Tag Manager pour apprendre comment faire.

Créez une nouvelle balise HTML personnalisée dans GTM.

Dans la section Balises, cliquez sur Nouveau.

Cliquez sur Configuration de la balise, puis choisissez HTML personnalisé.

Incluez le script qui enverra l'événement à Hotjar dans le champ HTML.

Dans cet exemple, nous envoyons un événement à Hotjar appelé ‘click’. Voici le script que nous inclurons dans la section HTML de la balise HTML personnalisée. Cela signifie que chaque fois que la balise GTM est déclenchée, un événement sera envoyé à Hotjar via notre API d'événements appelé 'click'.

<script>
  hj('event', 'click');
</script>

<script>
  window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments);};
  hj('event', 'click');
</script>

Cliquez sur Déclencheurs et appliquez le déclencheur pertinent pour déclencher la balise

Dans la section Déclencheurs, vous pouvez également cliquer sur l'icône + pour ajouter un nouveau déclencheur.

Dans cet exemple, nous déclencherons la balise lorsque l'utilisateur clique sur 'Tous les éléments'.

Cela signifie que la balise HTML personnalisée sera déclenchée lorsque l'utilisateur clique n'importe où sur la page. Lorsque la balise est déclenchée, l'événement ‘click’ sera envoyé à Hotjar.

Cliquez sur Enregistrer pour confirmer la configuration de votre balise HTML personnalisée.

Cliquez sur le bouton Envoyer.

Assurez-vous que les modifications sont appliquées à l'environnement en direct et cliquez sur Publier.

Consultez la section suivante sur Comment vérifier qu'un événement est envoyé à Hotjar, pour tester si l'événement est bien envoyé à Hotjar lorsque la balise est déclenchée.

Retour en haut

Comment vérifier qu'un événement est envoyé à Hotjar

Dans l'exemple ci-dessus, nous avons configuré une balise HTML personnalisée pour envoyer un événement à Hotjar basé sur un clic de page. Nous pouvons maintenant utiliser les outils de développement de notre navigateur pour confirmer que l'événement est envoyé à Hotjar avec succès.

Activer le mode Débogage de Hotjar.

Toute page sur laquelle le code de suivi Hotjar est installé peut utiliser nos journaux de débogage. Pour utiliser cette fonctionnalité, ajoutez le paramètre suivant à la fin de l'URL de votre page Web lorsque vous l'ouvrez dans votre navigateur : ?hjDebug=1

Exemples :
https://www.hotjar.com/?hjDebug=1
https://www.hotjar.com/?utm=123&hjDebug=1

Ouvrez les outils de développement de votre navigateur et cliquez sur l'onglet Console.

• Pour ce faire dans Chrome, dans la barre de menu, cliquez sur Afficher > Développeur > Outils de développement
• Pour ce faire dans Firefox, dans la barre de menu, cliquez sur Outils > Outils du navigateur > Outils de développement Web

Une fois que le menu des outils de développement s'ouvre dans le navigateur, sélectionnez l'onglet Console.

Actualisez la page.

Nous vous recommandons de recharger la page après avoir activé le mode débogage et ouvert vos outils de développement, pour vous assurer que vous voyez tous les journaux pertinents qui se produisent lorsque la page se charge. Vous devriez voir plusieurs entrées de journal colorées qui ressemblent à celles-ci :

Déclenchez l'événement sur la page.

Effectuez l'action nécessaire pour déclencher l'événement. Si vous avez suivi l'exemple décrit précédemment dans cet article, vous pouvez cliquer n'importe où sur la page pour déclencher l'événement. Si l'événement a été envoyé avec succès, vous le verrez apparaître dans l'onglet Console comme ceci :

Si vous avez vu votre événement apparaître avec succès dans la Console du navigateur, alors vous avez terminé ! Si vous ne l'avez pas vu apparaître, vous devrez peut-être revoir vos configurations GTM pour vous assurer que le code de l'événement a été implémenté correctement.

Après avoir configuré les événements à envoyer à Hotjar en utilisant GTM, vous commencerez à voir les événements disponibles pour une utilisation dans les outils de Hotjar. À partir de là, vous pouvez actuellement faire ce qui suit avec les événements Hotjar :

• Filtrer les enregistrements par événements.
• Filtrer les cartes de chaleur par événements.
• Créer un segment d'enregistrement qui inclut l'événement filtré.
• Cibler les enquêtes et les widgets de feedback pour se déclencher en fonction des événements.
• Démarrer la capture de session en fonction du déclenchement des événements.

Retour en haut

Voir aussi

• Qu'est-ce que les événements ?
• [Cours] Événements pour les enregistrements
• Référence de l'API des événements
• Quand utiliser les événements et les attributs utilisateur