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

Wenn Sie eine SPA (Single Page Application) entwickeln, müssen Sie lediglich den folgenden Code in das Setup-Skript Ihrer Hauptdatei einfügen.

<script setup>
// note that you can manually import Tracker class if you want to handle the instance manually
import { tracker } from '@openreplay/tracker'
//... your code here
tracker.configure({
  projectKey: "<your project key>",
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();
//... more code here
</script>

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.

Eine Möglichkeit besteht darin, eine Umgebungsvariable in einer .env-Datei im Stammverzeichnis Ihres Projekts anzulegen und der Variable das Präfix VITE_ voranzustellen. Dadurch steht sie Ihnen in Ihrem Vue-Code zur Verfügung. Später können Sie sie über import.meta.env.<your variable name> verwenden.

Hier ein Beispiel:

tracker.configure({
  projectKey: import.meta.env.VITE_VUE_APP_PROJECT_KEY,
});

Wenn Sie eine komplexe Anwendung mit Vue entwickeln, nutzen Sie wahrscheinlich Nuxt oder etwas Ähnliches. Im Abschnitt Tracker-Einrichtung finden Sie das Framework, mit dem Sie arbeiten.

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