Acheter Heatlens 299 €

Installer et configurer Heatlens

Du fichier zip à votre première heatmap, en un quart d’heure environ.

  1. Vérifier les prérequis
  2. Installer le plugin
  3. Créer une campagne de heatmap
  4. Connecter votre bandeau de consentement
  5. Masquer les données personnelles
  6. Applications monopages
  7. Consulter et exporter les rapports
  8. Dépannage

1. Vérifier les prérequis

  • Heatlens pour Matomo 5 : Matomo auto-hébergé 5.14.1 ou ultérieur, avec PHP 8.1 ou ultérieur.
  • Heatlens pour Matomo 6 : Matomo auto-hébergé 6.0 ou ultérieur.
  • Un compte super utilisateur Matomo, et un accès aux fichiers du serveur ou le droit de téléverser des plugins.
  • Vos sites sont déjà suivis par Matomo via matomo.js ou Matomo Tag Manager. Heatlens n’ajoute aucun code de suivi supplémentaire.

Heatlens ne fonctionne pas sur Matomo Cloud, qui n’accepte pas les plugins tiers.

2. Installer le plugin

Option A : copier les fichiers (recommandé)

Décompressez Heatlens.zip dans le dossier plugins/ de votre Matomo, de façon à obtenir plugins/Heatlens/plugin.json. Vérifiez que l’utilisateur du serveur web peut lire les fichiers, puis activez Heatlens dans Administration → Système → Plugins. En ligne de commande :

cd /var/www/matomo
unzip /path/to/Heatlens.zip -d plugins/
./console plugin:activate Heatlens

Option B : téléverser le zip depuis Matomo

Par défaut, Matomo désactive l’envoi de plugins, pour des raisons de sécurité. Pour l’autoriser, ajoutez cette ligne sous [General] dans config/config.ini.php :

[General]
enable_plugin_upload = 1

Allez ensuite dans Administration → Marketplace, choisissez Upload a plugin, sélectionnez Heatlens.zip et activez-le. Vous pouvez retirer la ligne une fois Heatlens installé.

3. Créer une campagne de heatmap

Une campagne indique à Heatlens quelles pages enregistrer, et dans quelle proportion. Allez dans Heatmaps → Gérer les heatmaps et créez-en une :

Pages
Ciblez par chemin exact (/tarifs), préfixe de chemin (/blog/), URL exacte ou « URL contenant ». Les paramètres de requête et les fragments sont ignorés et ne sont jamais stockés.
Appareils
Ordinateur, tablette et mobile ont chacun leur heatmap. Ajustez les seuils de largeur si votre mise en page change à d’autres tailles.
Échantillonnage
La part des visites éligibles à enregistrer. Commencez à 100 % sur les pages peu fréquentées, et baissez-la sur les pages très visitées.
Quota de pages
La campagne cesse d’enregistrer une fois ce nombre de pages vues atteint.
Conservation
Le nombre de jours pendant lesquels les données sont conservées. Laissez vide pour suivre vos réglages de conservation Matomo.

Les administrateurs du site peuvent créer, suspendre, reprendre et supprimer des campagnes. Les utilisateurs ayant un accès en lecture au site peuvent consulter les rapports.

Heatlens n’enregistre rien tant que le visiteur n’a pas donné son accord. Si votre site utilise déjà les fonctions de consentement de Matomo, Heatlens les suit :

_paq.push(['requireConsent']);
// une fois que le visiteur a donné son accord
_paq.push(['setConsentGiven']);

Si votre bandeau de consentement propose un choix distinct pour les heatmaps, appelez plutôt ces fonctions, et seulement une fois que le visiteur a réellement donné son accord :

_paq.push(['Heatlens.setConsentGiven']);
// quand le visiteur retire son consentement
_paq.push(['Heatlens.forgetConsentGiven']);

Le consentement aux seuls cookies ne vaut pas consentement aux heatmaps. Si le suivi Matomo lui-même requiert un consentement, celui-ci est aussi nécessaire.

5. Masquer les données personnelles

Heatlens masque ces éléments dans le navigateur du visiteur, avant tout envoi :

  • les champs de formulaire : champs de saisie, zones de texte, listes déroulantes et zones modifiables ;
  • tout élément portant data-matomo-mask, data-heatlens-mask ou data-matomo-ignore, et tout ce qu’il contient ;
  • par sécurité, les adresses e-mail et les suites de quatre chiffres ou plus trouvées dans le texte.

Les frappes au clavier, les valeurs des champs, les scripts et les feuilles de style externes ne sont jamais collectés. Un motif de texte ne peut pas reconnaître tous les noms ni toutes les adresses : marquez donc toute zone qui affiche des données personnelles en texte simple :

<div class="account-summary" data-heatlens-mask>
  Connectée en tant que Camille Martin, 12 rue des Roses
</div>

6. Applications monopages

Continuez à envoyer une page vue virtuelle Matomo à chaque navigation, comme vous le faites déjà pour Matomo :

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

Heatlens démarre un nouvel enregistrement après chaque page vue. Si une vue termine son affichage bien plus tard, par exemple après un chargement de données, appelez ceci une fois qu’elle est à l’écran. Ne l’appelez pas à chaque mise à jour de composant :

_paq.push(['Heatlens.trackPageView']);

7. Consulter et exporter les rapports

Ouvrez Heatmaps et choisissez une campagne. Passez des clics aux mouvements et à la profondeur de défilement, et de l’ordinateur à la tablette ou au mobile. La carte de défilement affiche la ligne de flottaison moyenne : ce que la plupart des visiteurs voient avant de faire défiler la page. Les rapports suivent le sélecteur de dates de Matomo.

Exportez un rapport en JSON pour vos propres analyses, ou en image PNG de la heatmap superposée pour vos présentations et vos tickets.

8. Dépannage

La campagne reste vide

  • Vérifiez que le visiteur a donné son consentement : dans une fenêtre de navigation privée, acceptez votre bandeau, puis parcourez une page ciblée par la campagne.
  • Vérifiez le taux d’échantillonnage et les règles de pages : un chemin exact ne correspond pas à /tarifs/ si vous avez saisi /tarifs.
  • Les bloqueurs de contenu qui bloquent Matomo bloquent aussi Heatlens.

Matomo ne charge pas le code de suivi de Heatlens

Heatlens ajoute son code à matomo.js. Si le serveur web ne peut pas écrire dans ce fichier, Matomo ne peut pas le mettre à jour lors de l’activation. Lancez ces commandes, puis videz vos caches :

./console custom-piwik-js:update
./console cache:clear

Le problème persiste ?

Ouvrez un ticket sur notre portail de support en indiquant vos versions de Matomo, de PHP et de Heatlens. Les délais de réponse figurent dans la politique de support (en anglais).

Voir les tarifs Heatmaps et RGPD