Mise en place de Matomo Tag Manager

Épisode N° 23 de la formation Matomo, publié le 01/10/2021 par Ronan HELLO et mis à jour le 03/10/2024

Vous savez à présent ce qu’est un Tag Manager Système et son fonctionnement général, nous allons maintenant nous pencher sur celui présent dans Matomo.

Activation du TMS

Depuis plusieurs années, Matomo dispose d’un Tag Manager interne, si votre installation de Matomo est récente, vous devriez voir un bouton “Gestionnaire de Balise” juste à gauche de votre accès à l'administration. Si vous voyez déjà ce bouton, passez à la section suivante, dans le cas contraire, pas de panique, nous allons voir comment activer Tag Manager.

Pour activer Matomo Tag Manager, il vous suffit d’utiliser votre compte super utilisateur et de vous rendre dans l’administration de Matomo. Cliquez ensuite sur « Composants » dans la rubrique Système du menu latéral.

Recherchez ensuite dans la liste des plugins installés pour “TagManager” et activez-le. Le plugin devrait être présent dans la liste, sinon téléchargez le directement depuis la marketplace interne de Matomo.

Félicitations, vous venez d’activer Matomo Tag Manager !

Création d’un conteneur

Maintenant que votre Tag Manager est correctement installé, nous allons commencer sa configuration. Cliquez sur le bouton “Gestionnaire de balises” présent dans le menu en haut à droite. La première étape consiste à créer un conteneur vide. Pour cela, cliquez simplement sur le bouton “Créer un nouveau conteneur”.

Vous avez maintenant trois champs à compléter, le premier champ « Contexte » sert à définir le type de conteneur. Actuellement, Matomo supporte uniquement les conteneurs web, mais sera amené à supporter les conteneurs pour les applications mobiles et peut-être même les conteneurs s'exécutant côté serveurs (server-side). Laissez donc le champ sur la valeur « Web ».

Donnez ensuite un nom à votre conteneur, simple et efficace. N’ayant habituellement qu’un seul conteneur par site web, je le nomme ‘Main container’ (ou conteneur principal, j’ai pris l'habitude de tout nommer en anglais).

Le champ suivant sert à ajouter une description à votre conteneur, ce n’est pas obligatoire et souvent inutile lorsque vous ne possédez qu’un seul conteneur.

Pour chaque conteneur créé, Matomo génèrera un identifiant unique par exemple “PUjnfgFA”. Cet identifiant nous servira par la suite pour l’installation de Matomo Tag Manager sur notre site web.

Les environnements

Pour vous permettre de tester Tag Manager sur différents serveurs de développement, l’outil propose différentes configurations pour 3 types d’environnements :

Dev : Pour tester ce que vous souhaitez, découvrir et configurer des balises.
Staging : Pour tester des balises dans une configuration équivalent à votre production, mais sans risque pour votre activité.
Live : Votre environnement de production, aucun bug ne doit y être déployé !

De manière générale, les sites web les plus simples ne disposent pas d’environnement de staging ou de dev une fois mis en ligne, vous utiliserez alors directement l'environnement « Live » pour votre configuration.

Installation du code

Nous allons maintenant voir comment installer le conteneur directement sur votre site web. Cliquez sur le symbole </> afin d’ouvrir la fenêtre popup d’installation.

Dans cette fenêtre, vous trouverez en premier un sélecteur d'environnement. Il faudra bien entendu choisir l'environnement « Live ». Il suffira ensuite de copier le code situé dans l’encart juste en dessous. Ce code est à copier et à coller le plus haut possible dans la section <head> de votre site web et sur l’ensemble des pages.

<!-- Matomo Tag Manager -->
<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_XXxxxXXXxx'; s.parentNode.insertBefore(g,s);
</script>
<!-- End Matomo Tag Manager -->

Afin de faciliter les futures mises à jour de ce code (nous aurons plusieurs fois l’occasion de le modifier par la suite), je vous invite à créer un fichier séparé dans lequel vous collerez le code fourni. Il suffira alors d’inclure ce fichier sur l’ensemble des pages du site web et le tour est joué !

Notre Tag Manager est maintenant correctement déployé sur votre site web ! Mais pour le moment, aucune donnée n’est collectée. Pour cela, dans le prochain épisode, nous allons voir comment déployer une balise avec Tag Manager.

Voir les autres épisodes de la série