Instaurer le suivi des événements avec Matomo

Dans Matomo, il existe deux méthodes principales d’instaurer un suivi des événements. La première consiste à utiliser le module Tag Manager intégré à Matomo. La seconde consiste à ajouter des extraits de code JavaScript à votre site web. Découvrez plus en détail comment instaurer les deux méthodes ci-dessous.

Configurer le suivi des événements avec le Tag Manager de Matomo (recommandé)

Si le Tag Manager de Matomo est déjà installé sur votre site, c’est le moyen le plus simple d’instaurer le suivi des événements sur votre site. Il vous suffit de créer une balise pour chaque type d’événement que vous souhaitez suivre. Ci-après, nous vous proposons une procédure détaillée pour la création d’un événement permettant de suivre les clics sur les liens e-mail de votre site.

  1. Instaurer et configurer le Tag Manager de Matomo (créer un conteneur et installer le code du conteneur)
  2. Cliquez sur Tag Manager dans Matomo et accédez à la page Tags.
  3. Cliquez sur le bouton vert pour Créer une balise.
  4. Sélectionnez le type de balise Matomo Analytics.
  5. Précisez le nom de Tag. Par exemple, Événement Matomo – Clic sur le lien e-mail
  6. Confirmez votre configuration Matomo. En cas de doute, utilisez la configuration par défaut.
  7. Sélectionnez Événement comme Type de suivi.

  8. Vous êtes maintenant prêt à ajouter la structure de votre événement dans les champs suivants. Dans notre exemple, il s’agirait de :

    1. Catégorie d’événement : Contact
    2. Action de l’événement : Clic sur le lien e-mail
    3. Nom de l’événement : {{ClickDestinationUrl}}
    4. Valeur d’événement :
      Note : Dans l’exemple ci-dessus, le nom de l’événement est alimenté dynamiquement par un gestionnaire de balises Variable qui extrait les données du site web lui-même. Vous pouvez les consulter en cliquant sur l’icône de code carré située à côté du champ.
      Tag Manager de Matomo - Variable du nom de l'événement

  9. L’étape suivante consiste à sélectionner votre Déclencheur. Cliquez sur le lien Créer un déclencheur maintenant qui vous proposera plusieurs options. Dans cet exemple, il convient de sélectionner Clic sur tous les liens dans la section Clics, ce qui permet de personnaliser les liens à suivre en tant qu’événements.

  10. Dans cet exemple, choisissez Tous les liens e-mail comme Nom du déclencheur.
  11. Pour limiter le déclencheur afin qu’il cible spécifiquement les liens e-mail, il convient d’ajouter certaines informations à la section Déclencher uniquement lorsque (facultatif). Ces étapes vous permettront de vous assurer que seuls les liens e-mail sont pris en compte :
    1. Sélectionnez URL de destination du clic dans le premier champ
    2. Sélectionnez débute par dans le deuxième champ.
    3. Saisissez mailto: dans le dernier champ, qui est le préfixe utilisé pour créer les liens e-mail.
    4. Finalisez le déclencheur en cliquant sur le bouton vert Créer un déclencheur.
  12. Maintenant que le déclencheur est associé aux paramètres de la balise, cliquez sur Créer une balise.
  13. Pour terminer, vous devez publier votre conteneur. Vous pouvez le faire depuis le message de confirmation qui apparaît lorsque vous créez une balise ou en sélectionnant Publier dans le menu.
    Balise Matomo créée avec succès
  14. Une fois votre nouvelle balise de suivi d’événement en ligne, vous devez tester son fonctionnement. Pour ce faire, connectez-vous à votre site et cliquez sur un lien e-mail. Connectez-vous ensuite à Matomo, accédez à la section Visiteurs et cliquez pour afficher le Journal des visites. Cela vous permet de consulter les visites en temps réel. Vous devriez être en mesure de voir votre visite avec l’événement affiché sur le côté droit.
    Journal des visites de suivi des événements

Si vous souhaitez une procédure plus visuelle avec un autre exemple, consultez le Guide de suivi des événements du Tag Manager de Matomo sur le blog.

Configurer le suivi des événements Matomo avec JavaScript

La seconde méthode de configuration du suivi des événements nécessite un peu plus de savoir-faire technique. Il vous faudra intégrer un extrait JavaScript directement dans le code de votre site web. Les liens sont l’un des éléments les plus courants en matière d’intégration au suivi des événements.

JavaScript propose une fonction appelée onClick que vous pouvez ajouter à vos liens. Un lien HTML standard ressemble un peu à ceci :

<a href="mailto:name@example.com" title="Envoyez-nous un e-mail">Envoyez-nous un e-mail</a>

Les liens en HTML contiennent la balise standard a et plusieurs attributs, dont l’ensemble de liens sous href. Il est possible d’étendre les liens HTML à l’aide de la fonction JavaScript onClick afin qu’ils ressemblent un peu à ceci :

<a href="mailto:name@example.com" title="Envoyez-nous un e-mail" onclick="_paq.push(['trackEvent', 'Contact', 'Email Link Click', 'name@example.com']);">Envoyez-nous un e-mail</a>

Comme vous pouvez le voir ci-dessus, le code reprend en grande partie le format du premier lien ci-dessus, mais comporte un attribut onclick supplémentaire. La fonction JavaScript qui déclenche l’événement est placée entre guillemets. Dans l’exemple ci-dessus, cela donnerait :

_paq.push([‘suiviÉvénement’, ‘Contact’, ‘Clic sur le lien e-mail’, ‘nom@exemple.com’]);

L’exemple de code ci-dessus permet de suivre les données d’événement suivantes :

  • Catégorie de l’événement : Contact
  • Action de l’événement : Clic sur le lien e-mail
  • Nom de l’événement : nom@exemple.com

Le principe est de dire à Matomo que vous voulez envoyer des données à la plateforme ‘_paq.push([ ]);’ et ‘suiviÉvénement’ définit le type de données envoyées. Matomo reconnaît alors les deux à quatre attributs suivants comme étant ceux de l’événement : Catégorie, Action, Nom, Valeur.

Vous avez peut-être remarqué que le code ci-dessus n’affiche que trois valeurs après ‘trackEvent’. La raison en est que l’attribut Valeur de l’événement est facultatif. Si un nom ou une valeur n’est pas nécessaire, vous pouvez simplement omettre les derniers paramètres, plutôt que d’en ajouter de vides. Consultez l’exemple ci-dessous pour obtenir un exemple d’événement pour lequel vous souhaiteriez suivre une valeur :

_paq.push([‘suiviÉvénement’, ‘commerce électronique’, ‘Ajouter à la liste de souhaits’, ‘Smartphone’, 1 000]) ;

L’exemple de code ci-dessus permet de suivre l’ajout d’un article à une liste de souhaits, la valeur correspondant au coût de l’article :

  • Catégorie d’événement : Commerce électronique
  • Action de l’événement : Ajouter à la liste de souhaits
  • Nom de l’événement : Smartphone
  • Valeur de l’événement : 1 000

Vous remarquerez que la valeur étant un nombre, elle n’a pas besoin de guillemets simples comme les chaînes de texte précédentes. Si vous souhaitez en savoir plus sur le suivi des événements avec JavaScript, consultez le guide du développeur Matomo.