Configurar o Flowsery Analytics num projeto React Router

Este guia explica como adicionar o rastreamento do Flowsery Analytics a uma aplicação React Router.

Injetar o script a partir do componente raiz

O melhor local para carregar um script global numa aplicação React Router é o componente raiz.

1. Abra o seu componente raiz (normalmente App.jsx ou main.jsx).

2. Adicione dinamicamente o snippet do Flowsery Analytics dentro de um 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
  );
}

Substitua flid_****** pelo Website ID das suas definições do Flowsery Analytics.

Alternativa: abordagem com HTML estático

Também pode colocar o snippet diretamente no public/index.html:

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

Confirmar que tudo está a funcionar

Após fazer deploy de qualquer uma das abordagens:

• Navegue até ao seu site em produção
• Abra o seu painel do Flowsery Analytics e verifique os pageviews recebidos
• Aguarde alguns minutos para que os primeiros dados apareçam

Para opções adicionais como rastreamento em localhost, endpoints de API personalizados ou configuração entre domínios, consulte a referência de configuração do script.