设置 OpenReplay

Video Tutorial

观看如何开始使用 OpenReplay

如果你不喜欢阅读，可以观看这个视频教程，它将在 3 分钟或更短的时间内教你如何开始使用 OpenReplay

开始使用 OpenReplay 非常简单。

如果你想观看关于如何开始的快速教程，请使用这个 YouTube 视频，否则请继续阅读以获取更多详细信息。

有两种方法可以让 OpenReplay 运行起来：使用脚本或 npm 包。

使用脚本

将代码片段直接复制/粘贴到你的 Web 应用的 </head> 中。该脚本可在 OpenReplay 仪表板的 ‘Preferences > Projects’ 下找到，并且对每个项目都是唯一的。

如果你的网站支持 Google Tag Manager，则可以按照 GTM 分步指南操作。

使用 NPM

首先安装 npm 包。

npm i @openreplay/tracker

然后，从代码库的入口点初始化该包并启动 tracker。你必须在构造函数中设置 projectKey 选项。其值可在你的 OpenReplay 仪表板的 ‘Preferences > Projects’ 下找到。

如果你的网站是单页应用 (SPA)

你可以将 tracker 用作单例实例，这是推荐的使用方式。这样，你就可以在应用的任何位置访问 tracker：

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)

或者你可以直接使用 Tracker 类来手动管理其实例：

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

如果你的 Web 应用是服务端渲染 (SSR)

如果你的 Web 应用是服务端渲染 (SSR)（即 NextJS、NuxtJS），请按照以下代码片段操作。请确保 tracker 在浏览器环境中运行，并且在应用提供给客户端后再调用 tracker.start()（即在 useEffect 或 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();
  }, []);
}