Comment utiliser Hotjar avec Kameleoon ?

3 min readNov 29, 2021

Qu’est ce que la solution Hotjar ?

La solution Hotjar permet de comprendre le comportement des internautes sur votre site. Si un outil tel que Google Analytics vous permet de voir dans la masse le comportement des internautes et de prioriser vos actions d’optimisation, Hotjar vous permet de mieux comprendre les raisons de leur éventuel abandon.

Hotjar est très complet. Il intègre notamment une solution permettant d’enregistrer des sessions d’internaute. Visualiser ces sessions, donne un peu l’impression d’être derrière le siège des internautes. Vous pouvez-voir ou se trouve son curseur, ses scrolls, ce qu’il tape avec son clavier, où il clique… Les données sont toutefois anonymisés et par défaut, les éléments saisis par l’internaute sont masqués.

Hotjar propose aussi notamment:

de l’analyse automatique de formulaire (sans nécessité de réaliser du développement javascript de votre côté). Je reste personnellement persuadé que la plupart des indicateurs remontés sont peu actionnables cf mon article sur le tracking de formulaire et que la mise à disposition d’un grand nombre d’indicateurs a plutôt tendance à noyer le web analyste dans l’information qu’autre chose
des cartes de chaleurs
des enquêtes en ligne.

Pour chaque fonctionnalité étudiée séparément, Hotjar n’est probablement l’outil le meilleur. Formissimo par exemple, est plus complet en ce qui concerne l’analyse des formulaires. Mais, pour son prix, et l’étendu de ses fonctionnalités, Hotjar est sans comparaison possible.

Qu’est-ce que la solution Kameleoon ?

Kameleoon est une solution française d’A/B testing et de personnalisation, d’un prix très raisonnable en comparaison avec les géants Optimizely et Visual Website Optimizer. Contrairement à AB Tasty, l’un de ses principaux concurrents, Kameleoon ne propose pas nativement une solution de session recording (mais propose comme AB Tasty des cartes de chaleur).

Installation et gestion de la privacy

Il est possible d’installer Hotjar via Kameleoon. Toutefois, je ne le recommande pas. Je vous conseille plutôt d’installer Hotjar via votre gestionnaire de tags (Tag Commander, Google Tag Manager…), et de veiller à ce que la solution Hotjar ne soit déclenchée que pour les internautes qui l’autorisent.

Attention également à bien mettre à jour votre pages détaillant les cookies déposés de votre site.

Comment mettre en place les cartes de chaleur (Heatmap) de Hotjar sur des pages testées avec Kameleoon ?

Sur Hotjar, les pages sont identifiées normalement par leur URL, mais si vous avez lancé un test, l’affichage de certaines pages variera suivant l’internaute.

Pour lancer une heatmap sans se baser sur une URL, il faut déclencher un “trigger” via Javascript.

window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('trigger', #TRIGGER_NAME#);

Où #TRIGGER_NAME# doit bien entendu être remplacé par une chaîne de caractère de votre choix.
Vous pouvez récupérer la variante en cours de votre test via Javascript :

// Le code javascript posé dans GTM doit toujours être encapsulé 
// dans une variable anonyme afin d'éviter d'altérer des 
// variables globales et donc potentiellement de générer des 
// régressions
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
(function(){ 
 // On parcours l'ensemble des tests
 for(var i=0 ; i&lt;Kameleoon.API.experiments.length ; i++){
  // On déclare la variable JS qui contiendra le nom du trigger
  var hj_trigger_name = 'test';
  // Sommes-nous actuellement ciblés par le test ?
  if(Kameleoon.API.experiments[i].targeting==true){
    if (#EXPERIMENT_ID# == Kameleoon.API.experiments[i].id){
     hj_trigger_name = hj_trigger_name+'_' + 
      Kameleoon.API.experiments[i].displayedVariation.name.toLowerCase().replace(' ','_'); 
     hj('trigger', hj_trigger_name);
    }
   }
 }
})();

Ce code est à adapter en fonction de vos vrais besoins. Il est fort probable que vous ayez également besoin de transmettre dans le trigger l’URL de la page en cours. En effet, lors de mes derniers tests, l’internaute devait choisir un trigger javascript ou une règle basée sur l’URL (les deux critères ne pouvaient être combinés).

Comme vous pouvez-le voir, c’est possible, mais la mise en place n’est pas aussi évidente que lorsque réalisée directement depuis une solution d’AB Testing.

Comment étudier les sessions d’une variante de test Kameleoon particulière ?

Les versions payantes de Hotjar permettent de tagger automatiquement via Javascript certaines sessions.

Cela permet notamment de pouvoir étudier particulièrement les internautes qui ont réalisé un comportement particulier (cliquer sur une bannière), ou qui ont été exposés à un contexte particulier (produit non disponible, message d’erreur lors d’une création de compte, affichage d’une version particulière d’une page AB testée…).

La syntaxe à utiliser pour tagger une session est la suivante :

hj('tagRecording', #TAG_NAME#);

Où #TAG_NAME# doit bien entendu être remplacé par une chaîne de caractère de votre choix.

Il est possible de déclencher ce tag de manière automatique.

if (Kameleoon.API.experiments.length &gt;= 0) {
    for (var i = 0; i &lt; Kameleoon.API.experiments.length; i++) {
        if (Kameleoon.API.experiments[i].targeting == true) {
            if ('function' == typeof(hj)) {
                hj('tagRecording', [(Kameleoon.API.experiments[i].name + '::' + Kameleoon.API.experiments[i].displayedVariation.name).toLowerCase()]);
            }
        }
    }
}

De cette manière, il vous sera possible d’étudier les sessions des internautes ayant vu la variante particulière de votre test A/B.