OpenReplay 설정

Video Tutorial

OpenReplay 시작 방법 영상으로 보기

글을 읽는 것이 번거롭다면, 3분 이내에 OpenReplay를 시작하는 방법을 보여 주는 이 동영상 튜토리얼을 따라 해 보세요

OpenReplay 시작은 간단합니다.

빠른 튜토리얼 영상을 보고 싶다면 이 YouTube 동영상을 이용하시고, 그렇지 않다면 계속 읽어 자세한 내용을 확인하세요.

OpenReplay를 실행하는 방법은 스크립트를 사용하거나 npm 패키지를 사용하는 두 가지가 있습니다.

스크립트 사용

코드 스니펫을 웹 앱의 </head>에 그대로 복사하여 붙여넣습니다. 스크립트는 OpenReplay 대시보드의 ‘Preferences > Projects’에서 확인할 수 있으며 프로젝트마다 고유합니다.

웹사이트가 Google Tag Manager를 지원한다면 GTM 단계별 가이드를 따라 설정할 수도 있습니다.

NPM 사용

먼저 npm 패키지를 설치합니다.

npm i @openreplay/tracker

그런 다음 코드베이스의 진입점에서 패키지를 초기화하고 트래커를 시작합니다. 생성자에서 projectKey 옵션을 반드시 설정해야 합니다. 이 값은 OpenReplay 대시보드의 ‘Preferences > Projects’에서 확인할 수 있습니다.

웹사이트가 싱글 페이지 애플리케이션(SPA)인 경우

트래커를 싱글턴 인스턴스로 사용할 수 있으며, 이 방식을 권장합니다. 이렇게 하면 앱 어디에서나 트래커에 접근할 수 있습니다:

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)을 사용하는 경우

웹 앱이 서버 사이드 렌더링(SSR)을 사용한다면(예: NextJS, NuxtJS) 아래 코드 스니펫을 따르세요. 트래커가 브라우저 환경에서 실행되는지, 그리고 앱이 클라이언트에 제공된 후(예: useEffect 또는 componentDidMount 안에서) tracker.start()가 호출되는지 확인하세요.

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();
  }, []);
}