Configurer Flowsery Analytics dans un projet React Router

Ce guide explique comment ajouter le suivi Flowsery Analytics a une application React Router.

Injecter le script depuis votre composant racine

Le meilleur endroit pour charger un script global dans une application React Router est le composant racine.

1. Ouvrez votre composant racine (generalement App.jsx ou main.jsx).

2. Ajoutez dynamiquement le snippet Flowsery Analytics dans un useEffect :

import { useEffect } from 'react';
 
function App() {
  useEffect(() => {
    // Inject Flowsery Analytics script
    const script = document.createElement('script');
    script.defer = true;
    script.setAttribute('data-fl-website-id', 'flid_******');
    script.src = 'https://cdn.flowsery.com/main.js';
    document.head.appendChild(script);
 
    // Remove on unmount
    return () => {
      document.head.removeChild(script);
    };
  }, []);
 
  return (
    // Your app content
  );
}

Remplacez flid_****** par l'identifiant de site de vos parametres Flowsery Analytics.

Alternative : approche HTML statique

Vous pouvez egalement placer le snippet directement dans public/index.html :

<script defer data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js"></script>

Verifier que tout fonctionne

Apres avoir deploye l'une ou l'autre approche :

• Accedez a votre site en production
• Ouvrez votre tableau de bord Flowsery Analytics et verifiez les pages vues entrantes
• Accordez quelques minutes pour que les premieres donnees apparaissent

Pour des options supplementaires telles que le suivi en localhost, les endpoints API personnalises ou la configuration inter-domaines, consultez la reference de configuration du script.