Configurar Flowsery Analytics en un proyecto React Router

Esta guia explica como agregar el seguimiento de Flowsery Analytics a una aplicacion React Router.

Inyectar el script desde tu componente raiz

El mejor lugar para cargar un script global en una aplicacion React Router es el componente raiz.

1. Abre tu componente raiz (generalmente App.jsx o main.jsx).

2. Agrega dinamicamente el fragmento de Flowsery Analytics dentro de 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
  );
}

Reemplaza flid_****** con el Website ID de tu configuracion de Flowsery Analytics.

Alternativa: enfoque con HTML estatico

Tambien puedes colocar el fragmento directamente en public/index.html:

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

Confirmar que todo funciona

Despues de desplegar cualquiera de los enfoques:

• Navega a tu sitio en produccion
• Abre tu panel de Flowsery Analytics y busca las visitas entrantes
• Espera un par de minutos para que aparezcan los primeros datos

Para opciones adicionales como seguimiento en localhost, endpoints API personalizados o configuracion entre dominios, consulta la referencia de configuracion del script.