Comment puis-je commencer à suivre des données avec Matomo sur des sites Web qui utilisent React ? FAQ

Si vous utilisez React sur votre site Web, vous pouvez commencer à suivre des données dans Matomo de manière transparente en utilisant Matomo Tag Manager. Une fois qu’un nouveau site est créé dans Matomo, le gestionnaire de balises Matomo préconfigurera automatiquement un conteneur avec une balise de code de suivi Matomo qui peut être utilisée pour commencer immédiatement.

Si vous prévoyez d’utiliser un seul conteneur pour plusieurs sites Web, assurez-vous d’utiliser le code de suivi de ce conteneur spécifique lors de la mise en œuvre des étapes ci-dessous.

Suivez les étapes suivantes pour le mettre en place :

Sautez cette étape si vous ne suivez pas une application à page unique (SPA) ou une__application Web progressive (PWA)__. Pour les SPA/PWA, la façon la plus courante de suivre avec précision les pages vues est d’utiliser le déclencheur History Changes :
- Dans Matomo Tag Manager, cliquez sur « Déclencheurs » dans le menu de gauche.
- Trouvez et modifiez votre déclencheur « Pageview ».
- Remplacez « Page URL » par « History Source ». En savoir plus dans ce guide.
- Ajoutez « hashchange » comme valeur d’entrée.
- Cliquez sur « UPDATE » pour enregistrer vos modifications.

2. Injectez le code Matomo Tag Manager JS dans votre App.js (ou d’autres fichiers pertinents), nous vous recommandons de le faire en utilisant la méthode « React.useEffect« . L’exemple ci-dessous montre comment ajouter le code Matomo Tag Manager JS dans une application « Hello World » dans React.js.


    import React from 'react';

    export default function App () {
    React.useEffect(() => {
            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='{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}'; s.parentNode.insertBefore(g,s);
    }, [])

    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
   }

3. Remplacez « ‘{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}’ » par le code du conteneur que vous voulez utiliser, le code du conteneur a le format « ‘container_*.js’ ». Suivez ce guide pour trouver votre code conteneur.

Félicitations ! Vous avez installé avec succès le code de suivi de Matomo Analytics via Matomo Tag Manager. Pour vérifier que les clics sont suivis, visitez votre site Web et vérifiez que ces données sont visibles dans votre instance Matomo.

Feedback on this page