Comment implémenter de manière efficace des sondages Hotjar sur une single page application? | Articles

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:

  • Le premier, le rapport analytique, donne un aperçu du comportement en ligne de vos utilisateurs. Ceci peut se voir via par exemple les heatmaps qui indiquent les éléments d’une page qui enregistrent le plus/le moins d’interactions de la part des utilisateurs et qui permet donc d’identifier les éléments les plus/les moins performants, ou encore via les enregistrements qui permettent de suivre le parcours des utilisateurs sur le site.
  • Le feedback rapport permet de collecter des informations sur l’opinion des utilisateurs de votre site via notamment les sondages.

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:

Prenez Contact

Semetis | Rue de l'Escaut 122, 1080 Bruxelles - Belgique

welcome@semetis.com

Connectez-vous

Cookie Policy

This website uses cookies that are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy. By accepting this OR scrolling this page OR continuing to browse, you agree to our privacy policy.