Hotjar en quelques mots

Avant de se pencher sur la configuration de sondages via Hotjar sur une single page application, un rapide tour de cet outil s’impose. Hotjar est un outil qui vous permet de comprendre le comportement des utilisateurs sur votre site et d’identifier les éléments qui pourraient les bloquer. Cet outil propose deux principaux rapports:

Hotjars interface 1

Business case

Les sondages sont utiles pour connaître l’opinion des utilisateurs sur certaines pages de votre site en leur posant des questions spécifiques dont les réponses vous aideront à améliorer votre business.

Afin de mieux expliquer comment afficher des sondages spécifiques à chaque étape d’un single page application funnel, nous allons prendre un exemple. Prenons le cas d’une compagnie d’assurance qui souhaiterait implémenter un sondage à chaque étape de son funnel en 10 étapes qui mène à une offre pour une assurance habitation. L’idée est que ces sondages comportent des questions qui changent en fonction de l’étape à laquelle se trouve l’utilisateur et en fonction de sa langue, c’est-à-dire français ou néerlandais dans ce cas-ci. 

L’implémentation classique

Dans le cas d’une implémentation classique, vous souhaiteriez déclencher les sondages en utilisant l’URL de chaque étape du funnel. Cependant, comme il s’agit d’un single page application funnel, l’URL reste le même lorsque les utilisateurs passent d’une étape à l’autre. Il faut donc trouver une alternative pour configurer le déclenchement de ces différents sondages: l’utilisation d’un JavaScript trigger. Lorsque le tag contenant le morceau de code d’Hotjar est déclenché grâce à un JavaScript trigger spécifique, ce dernier va déclencher le sondage défini dans Hotjar qui est associé à ce JavaScript trigger en question.

Link between the tag in Google Tag Manager and the poll in Hotjar 2

Cependant, cette configuration n’est pas optimale et peut rapidement conduire à une importante implémentation en fonction du nombre de tags et de triggers qu’il faut configurer.  En effet, dans cet exemple, il y a 10 étapes dans le funnel et deux langues ce qui signifie que 20 tags et triggers sont nécessaires. Si vous vouliez étendre cette implémentation à d’autres produits (disons n produits avec 10 étapes aussi), vous devriez configurer n (produits) x 10 (étapes) x 2 (langues), ce qui mène rapidement à une implémentation massive.

The classical implementation leads to a massive implementation 3

Comment réduire les coûts d’implémentation et de maintenance?

Pour pallier à ce problème, il est recommandé d’utiliser des conditions à l’intérieur de votre custom HTML tag. Ces conditions indiquent quel JavaScript trigger doit être déclenché en fonction de l’étape que l’on identifie dans cet exemple grâce à un URL virtuel. Ceci garantit que le bon questionnaire est montré à l’utilisateur.

Use conditions in your tag to get a compact implementation 4

Cette configuration permet dès lors de réduire le nombre de tags et de triggers de 20 à seulement 1. Ainsi, vous pouvez réduire drastiquement vos coûts d’implémentation et de maintenance.

Efficient implementation to reduce the maintenance 5


publication auteur Victoire Vincent
AUTEUR
Victoire Vincent

| LinkedinCette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

Tags: