Der Einstieg in OpenReplay ist unkompliziert.

Wenn Sie sich ein kurzes Tutorial zum Einstieg ansehen möchten, nutzen Sie dieses YouTube-Video. Andernfalls lesen Sie einfach weiter, um mehr Details zu erfahren.

Es gibt zwei Möglichkeiten, OpenReplay in Betrieb zu nehmen: über das Skript oder über das npm-Paket.

Kopieren Sie das Code-Snippet direkt in das </head> Ihrer Web-App. Das Skript finden Sie im OpenReplay-Dashboard unter ‘Preferences > Projects’; es ist für jedes Projekt individuell.

Wenn Ihre Website Google Tag Manager unterstützt, können Sie der GTM-Schritt-für-Schritt-Anleitung folgen.

Installieren Sie zunächst das npm-Paket.

npm i @openreplay/tracker

Initialisieren Sie das Paket anschließend im Einstiegspunkt Ihrer Codebasis und starten Sie den Tracker. Sie müssen die Option projectKey im Konstruktor setzen. Ihren Wert finden Sie in Ihrem OpenReplay-Dashboard unter ‘Preferences > Projects’.

Sie können den Tracker als Singleton-Instanz verwenden, was die empfohlene Vorgehensweise ist. So können Sie von überall in Ihrer App auf den Tracker zugreifen:

import { tracker } from '@openreplay/tracker'

tracker.configure({
	projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
})

tracker.start() // returns a promise with session info (sessionID, sessionHash, userUUID)

Oder Sie verwenden die Klasse Tracker direkt, um ihre Instanz manuell zu verwalten:

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();

Verwenden Sie das folgende Snippet, wenn Ihre Web-App serverseitig gerendert wird (SSR) (z. B. NextJS, NuxtJS). Stellen Sie sicher, dass der Tracker in einer Browserumgebung läuft und tracker.start() aufgerufen wird, sobald die App an den Client ausgeliefert wurde (z. B. in useEffect oder componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
}

Wenn Sie den Tracker noch weiter konfigurieren möchten, finden Sie im JavaScript SDK die Liste der verfügbaren Optionen.

Wenn Sie OpenReplay nicht in einer einfachen Anwendung einsetzen, verwenden Sie wahrscheinlich ein Web-Entwicklungs-Framework wie Next.js, Nuxt oder ein anderes. Sehen Sie sich unsere individuellen Tutorials für jedes der unterstützten Frameworks an:

ReactVueAngularNextJSNuxt

Nachdem Sie den Tracker installiert und Ihre Web-App bereitgestellt haben, sollten Sitzungsaufzeichnungen innerhalb weniger Minuten erscheinen. Gut gemacht!

In der Zwischenzeit können Sie mit der Einrichtung fortfahren, um das Beste aus OpenReplay herauszuholen. Je mehr Sie erfassen, desto schneller lassen sich Probleme reproduzieren und beheben: