Débugger et prévisualiser votre conteneur
- Episode N° 27
- Difficulté intermédiaire
- Publié le 01/10/2021 par Ronan HELLO
- Dernière mise à jour le 05/10/2021
Depuis le début de cette section sur Matomo Tag Manager, nous réalisons des modifications sans réellement voir ce qui se passe, et surtout sans savoir si cela fonctionne !
Je me doute que vous me faites confiance, mais c’est encore mieux de pouvoir tester par soi-même. Nous allons donc voir comment être autonome sur la gestion des erreurs et la mise en place des balises qui demandent un peu plus de connaissance technique.
Activer le mode prévisualisation
Matomo dispose d’un mode de prévisualisation qui se matérialise par l’apparence d’un bandeau en bas du site web. Ce bandeau sert à visualiser les différentes balises et leur déclencheur associés en condition réelle.
Pour afficher ce bandeau, il vous suffira de cliquer sur “Prévisualisation / débogage" dans le menu du conteneur. Au moment où vous cliquez, le mode s'active et la page sur laquelle vous êtes se recharge. Il est donc possible d'activer/désactiver le mode de prévisualisation depuis n'importe quelle page du Tag Manager.
Une fois le mode activé, vous devriez voir apparaître un petit paragraphe en haut de chaque page. Ce paragraphe vous indique un code à ajouter dans l’URL pour pouvoir partager le mode prévisualisation avec une autre personne. Techniquement vous n’avez pas à ajouter ces paramètres pour votre ordinateur vu que vous êtes déjà connecté à Matomo.
Visitez ensuite le site web que vous souhaitez prévisualiser, vous devriez voir apparaître le bandeau en bas de votre écran.
Dans ma configuration, cela ne fonctionne pas sans les paramètres d’URL, je dois donc systématiquement les ajouter. C’est dû au fait qu’un cookie mtmPreviewMode doit être déposé par Matomo sur le navigateur.
Si même avec ces paramètres d’URL le bandeau ne s’affiche pas, tentez de vider votre cache avec le combo de touches suivant : CTRL + MAJ + R
Timeline des événements
Nous allons maintenant nous intéresser de plus près au fonctionnement de ce bandeau de prévisualisation. Ce bandeau est découpé en trois zones, la première zone en haut est simplement un menu de navigation interne. Sur la gauche, nous avons une timeline représentant les différents événements capturés. Et sur la partie droite, toutes les données liées aux événements et filtrables par le menu de la première zone.
Nous parlerons en premier de la timeline des événements car c’est ici que débute le chemin des données. Dans cette timeline, vous retrouverez par ordre chronologique l’ensemble des événements émis par les visiteurs. Cette timeline débutera toujours pas un événement mtm.PageView qui correspond à l'événement émis par votre navigateur au chargement de la page
Les différentes actions liées aux événements
En cliquant sur le nom d’un événement dans la timeline, vous pourrez voir les différentes actions qui en découlent de manière instantanée.
(N’oubliez pas de re-cliquer sur ‘Events’ pour revenir sur un état global et non une vue filtrée par événement)
Les balises
Premièrement, le premier onglet ‘Tags’ nous permet de voir quelles balises ont été déclenchées ou non lors de cet événement. Vous avez également plus bas la liste des balises qui ne se sont pas encore déclenchées. Ces deux tableaux vous permettent de calibrer correctement les déclencheurs pour vos balises.
Les déclencheurs
Ensuite, l’onglet ‘Triggers’ sert à visualiser quels déclencheurs se sont activés au moment où l'événement à été émis. Pratique pour déceler une mauvaise configuration de déclencheurs, mais relativement peu utile.
Les variables
Le troisième onglet contient des données extrêmement intéressantes qui vous aident à comprendre comment fonctionne un outil d’analyse d’audience. C’est ici que vous pourrez visualiser les données de configuration.
Par exemple, dans le cadre d’une balise statistique Matomo, on pourra observer l’ensemble des réglages que nous avons fait lors de la création de la variable ‘Configuration Matomo’.
Le data layer
Ce quatrième onglet permet de visualiser les données présentes dans le tableau javascript DataLayer. Je ne rentre pas en détail maintenant dans le fonctionnement du data layer car un épisode complet lui est dédié dans la suite de cette formation.
(Ce sont des données brutes envoyées depuis la page, qui nécessitent une intégration par un développeur).
Les logs
Dans le dernier onglet ‘Logs’ on retrouve l’ensemble des étapes de construction du conteneur, et des événements produits dans la page. Ces logs sont complets et permettent de détecter chaque incohérence ou dysfonctionnement de vos balises.
Vous devez être connecté pour pouvoir commenter. Se connecter