Flowsery Analytics in einem React Router-Projekt einrichten

Diese Anleitung erklärt, wie Sie Flowsery Analytics Tracking zu einer React Router-Anwendung hinzufügen.

Script aus Ihrer Root-Komponente einbinden

Der beste Ort zum Laden eines globalen Scripts in einer React Router-App ist die Root-Komponente.

1. Öffnen Sie Ihre Root-Komponente (normalerweise App.jsx oder main.jsx).

2. Hängen Sie das Flowsery Analytics Snippet dynamisch innerhalb eines useEffect an:

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
  );
}

Ersetzen Sie flid_****** durch die Website-ID aus Ihren Flowsery Analytics Einstellungen.

Alternative: Statischer HTML-Ansatz

Sie können das Snippet auch direkt in public/index.html einfügen:

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

Funktionsfähigkeit überprüfen

Nach der Bereitstellung eines der beiden Ansätze:

• Navigieren Sie zu Ihrer Live-Website
• Öffnen Sie Ihr Flowsery Analytics Dashboard und suchen Sie nach eingehenden Seitenaufrufen
• Warten Sie einige Minuten, bis die ersten Daten erscheinen

Für weitere Optionen wie Localhost-Tracking, benutzerdefinierte API-Endpunkte oder Cross-Domain-Konfiguration lesen Sie die Script-Konfigurationsreferenz.