Tracking Matomo : Suivi des clics avec Matomo

Créé par vistalid r&d, Modifié le Jeu, 7 Mai à 4:00 H par vistalid r&d

Dans un contexte de mesure d’audience et d’optimisation de l’expérience utilisateur, il est essentiel de pouvoir suivre précisément les interactions des visiteurs sur un site web. Parmi les outils de web analytics, Matomo. L’une des fonctionnalités clés de Matomo est la collecte des événements de clics, qui permet de mesurer les actions des utilisateurs en détail.

Pourquoi suivre les clics avec Matomo ?

Le suivi des clics permet de comprendre :

Quels éléments sont les plus consultés (boutons, liens, modules interactifs).
Quels appels à l’action fonctionnent le mieux.
Comment les utilisateurs naviguent dans les parcours proposés.
Où se situent les points de friction ou les zones de non-interaction.

Ces données sont précieuses pour ajuster l’ergonomie du site, améliorer le taux de conversion ou simplement évaluer l’efficacité de certains contenus.

Mise en place du tracking des clics sur un site web :

Matomo propose une fonctionnalité de tracking d’événements personnalisés, permettant de tracer n’importe quelle interaction utilisateur, y compris les clics. Pour ce faire, il est possible d’utiliser une approche simple basée sur des attributs HTML et des classes CSS.

Structure recommandée :

Pour suivre un clic, il suffit d’ajouter à l’élément HTML concerné :

Une classe CSS dédiée (par exemple track-click).
Trois attributs personnalisés :
- data-category : pour regrouper les événements dans une même catégorie.
- data-action : pour décrire l'action effectuée (ex. : "clic").
- data-name : pour identifier précisément l’élément déclencheur (ex. : "bouton contact").

Cette structure permet une collecte claire et organisée des données.

NB : Si vous voulez tracker une page ajouter cette ligne script dans la page à tracker :

_paq.push(['trackEvent', 'Catégorie', 'Action', 'Nom', Valeur]);

Exemple de balise HTML :


  Contactez-nous

Exemple pour formulaire custom :

 
     
       {{ form_widget(form.children['submit_' ~ form.vars.name], {
                                    'attr': {
                                        'data-action': 'submit-form',
                                        'data-category': 'suivi-statistiques',
                                        'data-name': 'contact-form',
                                        'class': 'btn track-click btn-form_builder_1 form-custom-submit-btn'
                                         }
                                        }) }}

Exemple pour formulaire de contact :


    
        {{ form_widget(form.submit_contact, {
            'attr': {
          'data-action': 'submit-form',
           'data-category': 'suivi-statistiques',
           'data-name': 'contact-form',
           'class': 'btn track-click'
            }
        }) }}

Si vous voulez intégrer le suivi de tracking matomo sur une ancienne version du CMS < 3.7.2, injectez le code suivant dans JS custom :

Vous pourrez y visualiser sur le dashboard Matomo via l'url https://vistalid-statistiques.fr/ :

L'historique des actions de clics dans le dashboard Matomo via le menu : Visiteurs > Journal des visites

2.Les statistiques des clics (disponibles en J-1) via : Comportement > Événements : là vous pouvez voir les événements par 'catégorie', 'nom' et 'action'

Comme illustré dans les captures ci-dessous :

-Pour tracker le succès du submit des formulaire remplacer le script qui existe déjà par :

function trackCustomFormSuccess() {
  const formSuccess = document.querySelector('.custom_form_success');
  if (!formSuccess) return;
  if (typeof window._paq !== 'undefined' && Array.isArray(window._paq)) {
    _paq.push([
      'trackEvent',
      'suivi-statistiques',
      'form-submit',
      "succès de l'envoi du formulaire personnalisé"
    ]);
  } else {
    setTimeout(trackFormSuccess, 500);
  }
}

function trackContactFormSuccess() {
  const formSuccess = document.querySelector('.contact_form_success');
  if (!formSuccess) return;
  if (typeof window._paq !== 'undefined' && Array.isArray(window._paq)) {
    _paq.push([
      'trackEvent',
      'suivi-statistiques',
      'form-submit',
      "succès de l'envoi du formulaire de contact"
    ]);
  } else {
    setTimeout(trackFormSuccess, 500);
  }
}

function activateMatomoTrackingActions() {
      let elements = document.querySelectorAll('.track-click');
            elements.forEach(function (element) {
               element.addEventListener('click', function () {
                    let category = element.dataset.category || 'CTA';
                    let action = element.dataset.action || 'Click';
                    let name = element.dataset.name || element.textContent.trim();
                        if (typeof _paq !== 'undefined') {
                                    _paq.push(['trackEvent', category, action, name]);
                                }
                            });
                        });
                    }

     const observer = new MutationObserver(() => {
           const state = tarteaucitron.state;
          if (state?.matomocloud === true || state?.matomo === true ) {
           activateMatomoTrackingActions();
           trackCustomFormSuccess();
           trackContactFormSuccess();
           observer.disconnect();
            }
      });

 observer.observe(document.documentElement, { childList: true, subtree: true });

Pièces jointes (4)

69fc9b03f152b.mbtDgKTI3xILyR9nVTDpQW-xz1bOIrEJfQ.png
149 KB

69fc9b03f152e.VBLDxDPbobWVlxl30hLhmXdpvov1yAXQ7Q.png
126 KB

69fc9b03f152f.1y4Torg40SFowMBun-C93U30Z0fVsKR0uA.png
157 KB

69fc9b03f1530.5-S26jfDl313Njkb1m-spCfTlVT0QSlmGA.png
123 KB