Comment configurer Hotjar avec Cookiequiet

Que stocke Hotjar dans le navigateur du visiteur ?

La documentation de Hotjar liste les cookies et éléments de stockage qu’utilise son code de suivi, tous internes puisque le script s’exécute sur votre domaine. Parmi eux :

Les cookies de test (_hjCookieTest, _hjLocalStorageTest, _hjSessionStorageTest, _hjTLDTest) sont supprimés juste après avoir été déposés. Hotjar dépose ses cookies sur le domaine de premier niveau, ils couvrent donc chaque sous-domaine, et la documentation indique que cela ne peut pas être limité à un seul sous-domaine.

Au-delà des cookies, Hotjar collecte ce dont les heatmaps et les enregistrements ont besoin : clics, défilements, mouvements de souris et contenu de la page. Hotjar ne classe pas ses cookies à votre place : sa documentation invite les propriétaires de sites à demander à leur propre conseil comment les classer et s’il faut utiliser un outil de consentement. Dans Cookiequiet, Hotjar se range dans la catégorie mesure d’audience, et le scanner le nomme quand il trouve le code de suivi.

Comment ne charger Hotjar qu’après consentement ?

Option 1 : marquer le code de suivi. Hotjar recommande de placer le code dans le head de chaque page, via le template de votre site. Placez-le juste après la balise Cookiequiet et ne changez que la balise d’ouverture :

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
<script type="text/plain" data-cq-category="analytics">
  /* code de suivi Hotjar de votre page Sites, inchangé */
</script>

Cookiequiet l’exécute quand la mesure d’audience est accordée : immédiatement lors des visites suivantes où le choix enregistré l’inclut, et au moment du clic quand le visiteur accepte pendant la visite. Jusque-là, rien ne se charge depuis Hotjar et aucun cookie _hj n’est déposé. Un seul code de suivi Hotjar peut s’exécuter sur une page : retirez donc toute copie qu’ajoute un plugin ou un réglage de plateforme. Le guide sur le blocage des scripts détaille le balisage.

Option 2 : Google Tag Manager. Hotjar documente trois façons d’installer via Tag Manager ; la balise Hotjar Tracking Code de la liste des modèles est la plus simple à placer derrière le consentement. Donnez-lui un déclencheur Événement personnalisé sur cq_consent, certains événements personnalisés, avec la condition cq_analytics equals true, et réglez les options de déclenchement des balises sur une fois par page : Cookiequiet pousse cq_consent à chaque chargement de page où un choix est enregistré et après chaque choix. Vous pouvez aussi ajouter analytics_storage sous « Require additional consent for tag to fire », que Cookiequiet accorde avec la catégorie mesure d’audience. Le guide Google Tag Manager met en place les variables.

Option 3 : le paquet npm. Dans une application qui utilise @hotjar/browser, n’appelez sa fonction init qu’une fois la mesure d’audience accordée, par exemple dans un écouteur de l’événement cq:consent que Cookiequiet émet sur window, avec les catégories accordées dans detail.categories.

Le bloqueur automatique classe aussi l’hôte du script Hotjar sous mesure d’audience : une copie injectée par un plugin ou un gestionnaire de balises est donc retenue jusqu’au consentement. Un code de suivi écrit en dur dans le HTML sans marquage s’exécute avant que Cookiequiet puisse l’arrêter.

Hotjar a-t-il sa propre API de consentement ?

La documentation du code de suivi de Hotjar ne décrit aucune commande de consentement. La fonction hj() accepte des appels comme identify, event et stateChange, dont aucun ne met la collecte en pause. Pour respecter un refus, il faut ne pas charger le script. Côté visiteurs, Hotjar gère une page Do Not Track où chacun peut demander à Hotjar de cesser de traiter ses données sur tous les sites qui l’utilisent.

Et les applications monopages ?

Hotjar détecte par défaut les changements d’URL dans les applications monopages : il doit donc se charger une fois par chargement complet de page, pas à chaque route. Son guide Tag Manager prévient que les déclencheurs de changement d’historique entrent en conflit avec cette détection. Un déclencheur cq_consent se déclenche aux chargements complets et lors des choix, ce qui correspond. Si vous envoyez hj('stateChange', url) à la main, protégez-le avec la même vérification du consentement. Les guides des frameworks, comme React, montrent comment lire le choix dans les composants.

Points propres à l’UE

• Les enregistrements de session capturent ce que les visiteurs voient sur la page. Hotjar masque par défaut les frappes au clavier et vous permet de masquer du texte, des images et d’autres éléments avec ses réglages de suppression ; vérifiez-les avant de collecter des données, car la suppression a lieu dans le navigateur et ne peut pas s’appliquer une fois la session envoyée.
• _hjSessionUser dure 365 jours. Le tableau des cookies de votre bandeau et votre politique cookies doivent le lister avec cette durée de vie, que le scanner renseigne.
• Les attributs de l’API Identify sont des données personnelles sur des utilisateurs connectés. Ne les envoyez qu’après consentement, et mentionnez Hotjar comme sous-traitant dans votre politique de confidentialité.

Comment tester ?

1. Ouvrez le site dans une fenêtre de navigation privée et cliquez sur Tout refuser. Dans les outils de développement, aucun cookie commençant par _hj n’existe et l’onglet réseau ne montre aucune requête vers Hotjar.
2. Effacez les cookies, cliquez sur Tout accepter, rechargez : _hjSessionUser_ et _hjSession_ apparaissent.
3. Dans Hotjar, la page Sites confirme l’installation après une visite.
4. Consultez le registre des consentements dans le tableau de bord Cookiequiet.

Cookiequiet est gratuit pour un site, ciblage géographique compris ; Starter coûte 3 € par site et par mois, avec des pages vues illimitées.