Начать работу с OpenReplay очень просто.

Если вы хотите посмотреть краткий видеоурок о том, как начать, воспользуйтесь этим видео на YouTube; в противном случае продолжайте чтение для получения дополнительных сведений.

Есть 2 способа запустить и настроить OpenReplay: с помощью скрипта или npm-пакета.

Скопируйте и вставьте фрагмент кода непосредственно в </head> вашего веб-приложения. Скрипт можно найти в панели управления OpenReplay в разделе ‘Preferences > Projects’; он уникален для каждого проекта.

Если ваш веб-сайт поддерживает Google Tag Manager, вы можете воспользоваться пошаговым руководством по GTM.

Сначала установите npm-пакет.

npm i @openreplay/tracker

Затем инициализируйте пакет из точки входа вашей кодовой базы и запустите трекер. В конструкторе необходимо задать параметр projectKey. Его значение можно найти в панели управления OpenReplay в разделе ‘Preferences > Projects’.

Вы можете использовать трекер как экземпляр-синглтон, что является рекомендуемым способом его использования. Таким образом, вы можете обращаться к трекеру из любого места вашего приложения:

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

Используйте приведённый ниже фрагмент, если ваше веб-приложение использует серверный рендеринг (SSR) (т.е. NextJS, NuxtJS). Убедитесь, что трекер запускается в окружении браузера и что 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();
  }, []);
}

Если вы хотите подробнее настроить трекер, см. JavaScript SDK, где приведён список доступных параметров.

Если вы используете OpenReplay не в простом приложении, то, скорее всего, вы используете фреймворк для веб-разработки, например Next.js, Nuxt или другой. Ознакомьтесь с нашими индивидуальными руководствами для каждого из поддерживаемых фреймворков:

ReactVueAngularNextJSNuxt

Теперь, когда вы установили трекер и развернули своё веб-приложение, записи сессий должны появиться в течение нескольких минут. Отлично!

А пока вы можете продолжить процесс настройки, чтобы получить максимум от OpenReplay. Чем больше вы фиксируете, тем легче быстро воспроизводить и устранять проблемы: