Den Tracker in einer React-Anwendung zum Laufen zu bringen, ist ganz unkompliziert.

Wenn Sie eine SPA (Single Page Application) entwickeln, müssen Sie lediglich den folgenden Code in Ihren Einstiegspunkt einfügen:

import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: "<your project key>", 
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

Alternativ können Sie auch die Klasse Tracker direkt verwenden, um ihre Instanz manuell zu verwalten:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

Mit anderen Worten: Sie können den Tracker zu Beginn des Skripts instanziieren und ihn, sobald die Seite geladen ist, über einen Hook useEffect starten.

Aus Sicherheitsgründen sollten Sie Ihren projectKey nicht fest in den Code Ihrer Anwendung schreiben. Speichern Sie ihn stattdessen in einer Konfigurationsdatei oder einem Umgebungssystem.

Je nach Projekt-Setup stehen mehrere Ansätze zur Verfügung:

• Umgebungsvariablen: Wenn Sie Create React App verwenden, nutzen Sie dessen integrierte Unterstützung für Umgebungsvariablen
• Konfigurationsdateien: Verwenden Sie dedizierte Konfigurationsdateien, die von der Versionskontrolle ausgeschlossen sind
• Umgebungsverwaltung: Tools wie dotenv helfen, unterschiedliche Schlüssel für verschiedene Umgebungen zu verwalten

Hier ein Beispiel:

// Access the key from environment variables
const openReplayKey = process.env.REACT_APP_OPENREPLAY_KEY;

Wenn Sie eine komplexe Anwendung mit React entwickeln, nutzen Sie wahrscheinlich Next, Remix oder ein ähnliches Framework. Im Abschnitt Tracker-Einrichtung finden Sie das Framework, mit dem Sie arbeiten.

Wenn Sie Probleme bei der Einrichtung des Trackers in Ihrem React-Projekt haben, wenden Sie sich an unsere Slack-Community und fragen Sie direkt unsere Entwickler!