Formation Matomo

Mise en place du Data Layer

  • Episode N° 28
  • Difficulté difficile
  • Publié le 01/10/2021 par
  • Dernière mise à jour le 21/12/2023

Vous avez croisé ce terme plusieurs fois depuis le début du chapitre sur Matomo Tag Manager, c’est le moment de rentrer dans les détails.

A quoi sert un Data Layer ?

Un Data Layer est un tableau JavaScript dans lequel nous allons pouvoir ajouter des propriétés personnalisées afin de les exposer à Matomo. Le Data Layer agit alors comme un pont entre certaines données de votre base de données et Matomo.

En plus d’exposer des données personnalisées, vous avez la possibilité de créer et d’émettre des événements personnalisés qui peuvent vous servir à configurer des déclencheurs dans Matomo Tag Manager.

En clair, le Data Layer vous permet de créer une configuration sur mesure et d’aller beaucoup plus loin dans la mise en place d’un suivi personnalisé.

Mise en place du Data Layer

Afin de mettre en place le Data Layer de Matomo, vous devez avoir accès au code source du site web. Vous devrez ensuite localiser le code de suivi de Matomo Tag Manager.

La configuration du Data Layer se résume à placer les quelques lignes de code suivantes juste avant le code de suivi sur chacune de vos pages. Vous comprenez maintenant l’intérêt d’avoir placé le code de suivi de Matomo Tag Manager dans un fichier séparé. 

Code du Data Layer seul :

var _mtm = _mtm || [];

Code du Data Layer avec le code Matomo Tag Manager :

<script>
    var _mtm = _mtm || [];
</script>

<!-- Plus loin dans votre page -->

<script>
var _mtm = window._mtm = window._mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src='https://matomo.mon-site.fr/js/container_PUjfngFA.js'; s.parentNode.insertBefore(g,s);
</script>

Compatibilité inter-TMS

En réalité, lorsque je mets en place un Data Layer pour moi ou un client, j’utilise toujours une syntaxe différente… celle de Google Tag Manager. Comme pour les paramètres UTM des URL de campagne, Matomo est capable de prendre en charge la syntaxe du Data Layer de Google Tag Manager, ce qui permet de partager ce même code entre les deux outils. 

Pour synchroniser le dataLayer de Google Tag Manager et de Matomo après le chargement de la page, vous devez ajouter un petit script que j'ai éllaboré permettant à Matomo de récupérer chaque information poussée dans le tableau javascript dataLayer de Google.

Il vous suffit de déployer ce code dans une balise HTML personnalisée en utilisant le même déclencheur que votre balise de suivi classique.

<script>
let syncDataLayer = function(array, callback) {
    array.push = function(e) {
        Array.prototype.push.call(array, e);
        callback(array);
    };
};
syncDataLayer(window.dataLayer, function(e) {
window._mtm.push(dataLayer.at(-1))
});
</script>

Tutorial complet sur mon repo Github : https://github.com/openmost/datalayer-sync.

J’utilise donc cette syntaxe, plus simple et plus commune :

dataLayer = [{
    'prenom': 'Ronan',
    'nom': 'HELLO',
}];

Si vous souhaitez en savoir plus sur le fonctionnement du Data Layer de GTM, vous trouverez toutes les informations nécessaires dans l’article que j’ai rédigé sur le sujet.

Pour la suite des exemples, je conserverai la syntaxe standard de Matomo étant donné que cette formation à pour but de vous faire monter en compétences sur l’outil.

Remonter des données personnalisées

Maintenant que le Data Layer est en place, (et peu importe la syntaxe que vous avez choisi), nous allons apprendre à faire remonter des valeurs dans des variables personnalisées.

Ajouter des variables au Data Layer

La première étape consiste à créer une nouvelle entrée dans notre tableau JavaScript _mtm. Pour cela, il suffit de créer un objet qui contiendra toutes les entrées “clé : valeur” à envoyer vers Matomo. Comme ceci :

let data = {'firstName': 'Ronan', 'lastName': 'HELLO'};
_mtm.push(data);

Il ne nous reste plus qu'à envoyer cet objet contenant nos valeurs à Matomo. La méthode la plus simple est d’utiliser la fonction JavaScript push(), comme ceci :

_mtm.push({'cle': 'valeur'});

Et le tour est joué, au chargement de votre page, ces données seront envoyées à votre Data Layer. Nous allons maintenant voir comment récupérer et exploiter les valeurs que nous venons d’ajouter au Data Layer.

Créer une variable de couche de données

Vous savez désormais comment ajouter des données à votre Data Layer, mais toujours pas comment récupérer ces valeurs dans votre interface Matomo. Pour débuter, rendez-vous dans l’interface de Matomo Tag Manager et créez une nouvelle variable personnalisée.

Définissez le type de variable sur “Couche de données”. Donnez un nom à cette variable de manière à bien comprendre ce qu’elle contient. Je vous invite à préfixer le nom de cette variable par les lettres ‘DL’ pour signaler que la valeur provient du Data Layer.

DL - Firstname

Renseignez ensuite le nom de l’entrée telle que définie dans l’objet du Data Layer comme suit :

firstName

Une fois ces informations renseignées, cliquez sur “Créer une nouvelle variable” pour sauvegarder votre configuration. Votre variable de couche de données est maintenant fonctionnelle et vous pouvez y accéder depuis n’importe quel déclencheur ou balise.

Libre à vous d’utiliser ce mécanisme pour optimiser la collecte des données de votre site web ou plateforme. L’usage d’un Data Layer est spécifique à chaque projet, mais est relativement courant dans le cadre des sites e-commerce.

TP : Configurer UserID avec Matomo Tag Manager

Si vous vous souvenez, plus tôt dans cette formation nous avons parlé et mis en place le UserID afin d’avoir un journal des visites le plus complet possible. Avec la mise en place du suivi par Tag Manager, notre nouvelle configuration ayant écrasée la précédente, cette fonctionnalité n’est plus en place. Nous allons voir comment configurer le UserID pour Tag Manager.

Création de la variable de couche de données

Pour cela, créez une nouvelle variable de couche de données et nommez la ‘DL - User ID’, définissez ensuite le nom de la variable dans le Data Layer sur ‘userId’. Sauvegardez votre variable fraîchement créée.

Modification de la configuration initiale

Nous allons maintenant devoir modifier la variable “Configuration Matomo” afin de lui passer cette nouvelle variable ‘DL - User ID’ en paramètre. Pour cela, modifiez la variable “Configuration Matomo” et trouvez le champ ‘User ID’ (situé plutôt vers le bas du formulaire). Sélectionnez ensuite la variable nommée ‘DL - User ID’. Comme ceci :

{{DL - User ID}}

Publication du conteneur

Sauvegardez ensuite cette configuration et publiez une nouvelle version du conteneur. Vous pourrez nommer cette version ‘Add support for UserID’. Profitez-en également pour activer le mode de prévisualisation si vous souhaitez bénéficier de cette aide pour la prochaine étape.

Ajout de l’identifiant dans le Data Layer

Nous allons maintenant devoir pousser l’identifiant de nos utilisateurs dans le Data Layer des pages concernées. Pour cela, il faut créer un objet JavaScript et l’ajouter au tableau _mtm comme ceci :

_mtm.push({'userId': 'identifiant utilisateur'})

Vous remarquerez que cette fois-ci, nous avons créé l’objet et ajouté au tableau en une seule ligne de code, plutôt cool non ?

Vérification de la configuration

Une fois ces modifications effectuées, vous pourrez constater que votre fonctionnalité UserID fonctionne maintenant parfaitement.

N’hésitez pas à utiliser le Data Layer de Matomo pour aller plus loin et créer des fonctionnalités incroyables !

Gérer des événements 

La première partie vous a plu ? Alors celle-ci devrait vous plaire encore plus ! Nous allons apprendre à créer et envoyer des événements personnalisés. Cette pratique lèvera la dernière barrière technique sur la collecte de données.

Imaginez que vous souhaitez déclencher une balise à un moment très précis qui ne correspond pas forcément à un événement standard JavaScript, impossible pour le moment ! Mais nous allons voir comment créer des événements personnalisés, pour que Matomo puisse se greffer dessus et déclencher des balises quand bon vous semble. Vous pourrez alors créer et configurer autant d’événements que vous le souhaitez.

Cette pratique est très utilisée pour baliser des tunnels de vente ou des tunnels de configuration, chaque étape émettant un événement particulier et unique, vous permettant de définir à quelle étape se trouve votre utilisateur. Vous pourrez alors dès maintenant baliser vos tunnels de conversions et déclencher des objectifs personnalisés en fonction de vos besoins.

Déclencher un événement personnalisé

Pour déclencher un événement, le procédé est similaire à celui vu précédemment pour les variables. Il nous suffira simplement de définir le nom de notre variable sur le mot clé event comme ceci :

_mtm.push({'event': 'nom_de_mon_evenement'});

Plutôt simple non ? La difficulté n’est en réalité pas dans la syntaxe mais plutôt de définir à quel moment votre événement doit se déclencher. Assurez-vous donc que votre événement ne se déclenche que lorsque vous le souhaitez, et non quand la page se charge (ce qui serait inutile puisqu’un événement ‘mtm.start’ existe déjà pour ce type de déclenchement).

Vous voyez, pas beaucoup plus complexe que les variables finalement, nous n’avons même pas de configuration à réaliser côté interface de Matomo Tag Manager.

Inspecter le Data Layer

Dans l’épisode précédent, nous avons vu comment prévisualiser et débugger nos balises à l’aide du bandeau de prévisualisation. Je vous avais alors demandé d’attendre pour parler de l'onglet Data Layer, et bien n’attendons plus et parlons-en !

Activez-le mode de prévisualisation de Matomo Tag Manager et rendez-vous dans l’onglet Data Layer du bandeau. On retrouvera alors deux tableaux :

  • Le premier nous permet de visualiser quelles données ont été ajoutées avec l’événement sélectionné dans la timeline des événements (souvenez-vous, c’est la liste sur la gauche)
  • Le second nous donne un aperçu des données contenues dans le Data Layer après l’émission de cet événement.

Dans mon cas de figure, mon Data Layer est plutôt simple et ne contient pas beaucoup de données.

Une fois votre configuration conforme à vos attentes, vous pouvez désactiver le bandeau de prévisualisation.

J’espère vous avoir donné envie d’aller plus loin dans la configuration de Matomo et parcouru un grand nombre des cas de figures que vous risquez de croiser.

Allez, ne t'arrête pas maintenant !
Épisode précédent
Épisode suivant
Commentaires

Vous devez être connecté pour pouvoir commenter. Se connecter

  • Publié par comofp

    Bonjour Ronan, merci pour votre formation ! C'est très clair. Est-il possible de déployer Matomo Tag manager sans avoir recours à un dataLayer ? Notamment en se contentant des balises et déclencheurs de base.

    La dataLayer est-il indispensable si je souhaite mettre en place des balises et variables personnalisées ? Merci!

    1. Publié par Ronan

      Bonjour,

      Oui bien entendu, le dataLayer ne sert qu'a exposer données personnalisées, Tag Manager peut très bien fonctionner sans.

      Concernant les variables personnalisées (aujourd'hui il vaut mieux utiliser les dimensions personnalisées), le dataLayer est l'endroit le plus adapté pour exposer des données qui seront collectées dans des variables/dimensions personnalisées. Si vous n'êtes pas à l'aise avec ce système, vous pouvez exposer les données dans des balises HTML <meta> ou en utilisant des attributs data-. Ces trois techniques fonctionnent parfaitement, mais je privilégie l'utilisation du dataLayer.

      Au plaisir, Ronan HELLO

Vous préférez une formation Matomo sur-mesure ?

Je réalise des formations professionnelles sur-mesure. Si ça peut vous intéresser, n'hésitez pas à me contacter 🤓

Je fais une demande