Acheter Heatlens 299 €

Configurer et intégrer Heatlens

Français
English

Documentation RC1 · mise à jour le 10 octobre 2026 · Historique des versions

  1. Créer une première campagne
  2. Configurer le consentement
  3. Masquer les données privées
  4. Vérifier la première collecte
  5. Intégrations avancées — facultatives

Ce guide commence après l’installation du plugin. Le parcours courant comprend une première campagne, le consentement, le masquage et la vérification de la collecte. Les intégrations JavaScript et CSS en fin de page sont facultatives.

Créer une première campagne

Après l’installation, commencer avec une page de test contenant uniquement des données fictives. Préparer les deux étapes suivantes (consentement et masquage) avant d’autoriser sa collecte.

  1. Dans le bon site Matomo, ouvrir Heatmaps → Gérer les heatmaps → Créer une heatmap.
  2. Donner un nom identifiable à la campagne et cibler la page de test. Tester son URL dans le formulaire : elle doit correspondre. Ne pas mettre de paramètre privé dans cet exemple.
  3. Choisir 100 % d’échantillonnage, un petit quota (par exemple 20 pages), la capture automatique et le consentement requis. Conserver les autres options par défaut pour ce premier essai.
  4. Enregistrer la campagne. L’instantané sera capturé par une visite éligible après accord ; saisir une URL ne déclenche pas une capture à distance.

La référence des réglages détaille les règles d’URL, les quotas et les appareils.

Le réglage par défaut exige un consentement explicite. Si Matomo utilise requireConsent, Heatlens respecte l'accord donné au suivi Matomo :

_paq.push(['requireConsent']);
// Après accord réel du visiteur :
_paq.push(['setConsentGiven']);
// Au retrait :
_paq.push(['forgetConsentGiven']);

Pour un accord distinct aux heatmaps :

_paq.push(['Heatlens.setConsentGiven']);
_paq.push(['Heatlens.forgetConsentGiven']);

Ces appels n'annulent ni un refus du suivi Matomo ni l'opt-out. Un accord aux cookies seul ne suffit pas. Désactiver l'exigence de consentement de la campagne change ce comportement : le faire uniquement après avoir défini sa politique.

Masquer les données privées

Les champs de formulaire, zones éditables et éléments portant data-heatlens-mask, data-matomo-mask ou data-matomo-ignore sont masqués avant l'envoi. Masquer explicitement les noms, adresses et zones privées affichés hors formulaire. Le filtrage des e-mails et des longues suites de chiffres ne détecte pas toutes les données personnelles. Les sélecteurs supplémentaires sont propres à la campagne.

Exemple de zone à masquer avant capture :

<div data-heatlens-mask>Nom et adresse du client</div>

Vérifier la première collecte

Le plugin doit avoir passé la vérification d’installation. Utiliser la campagne et la page de test préparées ci-dessus.

  1. Dans un navigateur de test, refuser puis accepter le consentement : aucune collecte Heatlens ne doit partir avant l’accord requis. Après accord, cliquer, déplacer le pointeur et défiler, puis attendre quelques secondes.
  2. Ouvrir le rapport sur aujourd’hui ou toute la collecte, sans segment, avec le bon appareil et la bonne version. Attendre au moins une page vue, un instantané et des points sur les interactions réalisées.
  3. Vérifier le masquage avec des données fictives, les exports JSON/PNG et l’arrêt de collecte après retrait du consentement.
  4. Supprimer uniquement la campagne de test lorsqu’elle n’est plus utile. Adapter le ciblage, le quota et l’échantillonnage de vos campagnes réelles à vos besoins.

Si un résultat manque, suivre le diagnostic par symptôme. Pour lire les résultats au quotidien, passer au guide d’utilisation.

Intégrations avancées — facultatives

Ces options concernent les sites qui en ont besoin. Elles ne sont pas nécessaires pour démarrer une heatmap avec la capture automatique sur une page classique.

Applications monopages (SPA)

Conserver une page vue Matomo virtuelle par navigation :

_paq.push(['setCustomUrl', location.href]);
_paq.push(['trackPageView']);

Un rendu très tardif peut nécessiter Heatlens.trackPageView après affichage. Cet appel redémarre la collecte Heatlens : ne pas le doubler systématiquement avec chaque trackPageView, ni l'exécuter à chaque mise à jour d'un composant.

Déclencheur JavaScript

Dans le code du site, avant la première page vue :

_paq.push(['Heatlens.setTrigger', function (campaign) {
    return campaign.id !== 42 || window.analyticsAudienceReady === true;
}]);

Remplacez 42 par l’identifiant de la campagne dont vous souhaitez vérifier la condition d’audience. Le callback synchrone doit retourner exactement true. false, une exception ou une Promise refusent la collecte. La condition est réévaluée lors des interactions et des envois, et sur les pages SPA. Une condition refusée abandonne les événements en attente ; les premières interactions admises ne sont pas reconstruites rétroactivement. null retire le callback. Consentement, exclusion, ciblage, quota et échantillonnage restent prioritaires. Cette condition côté navigateur ne constitue pas un contrôle d’accès serveur.

Capture manuelle

Dans les options avancées, choisir « Capture de l’instantané : Manuelle ». Après consentement et démarrage de la collecte sur une page éligible, préparer l’état souhaité (menu ouvert, contenu chargé), puis exécuter dans la page mesurée :

_paq.push(['Heatlens.captureSnapshot', ID_HEATMAP]);

Le point entre Heatlens et captureSnapshot est la syntaxe d’une méthode de tracker Matomo. En diagnostic, Matomo.getAsyncTrackers()[0].Heatlens.captureSnapshot(ID_HEATMAP) renvoie true si la capture a été mise en file, pas une confirmation du serveur. false indique qu’aucune collecte courante n’est éligible (consentement, ciblage, échantillonnage, quota ou configuration encore en chargement). Attendre son démarrage avant l’appel. La capture reste soumise à l’URL de référence, au masquage et à la révision active. Elle ne remplace jamais un instantané existant : créer une nouvelle version, recharger la page ou envoyer sa nouvelle page vue Matomo, puis refaire la capture. Les images encore non chargées peuvent devenir des blocs ; attendre leur chargement.

Styles de consultation

Pour un style uniquement visible dans la heatmap, ajoutez une règle dans une feuille accessible sur le site :

html.heatlens .cookie-banner { display: none; }
@media (max-width: 700px) { html.heatlens .content { font-size: 18px; } }

La page du visiteur ne reçoit pas cette classe. Le tracker enregistre uniquement les propriétés autorisées et les identités structurelles des éléments déjà capturés. Les styles agissent sur la carte et son PNG, y compris à la largeur personnalisée. Une nouvelle version d’instantané est nécessaire après modification. Imports, ressources externes, variables et sélecteurs complexes ne sont pas pris en charge ; les limites de capture responsive restent applicables. Ces styles ne remplacent jamais les règles de masquage : masquer visuellement dans le rapport ne supprime pas le contenu capturé.

Voir aussi les limites du rendu.