OpenReplay のセットアップ

Video Tutorial

OpenReplay を使い始める手順を動画で見る

文章を読むのが苦手な方は、3 分以内で OpenReplay を使い始める方法を解説したこの動画チュートリアルをご覧ください

OpenReplay を使い始めるのは簡単です。

簡単なチュートリアルをご覧になりたい場合は、こちらの YouTube 動画をご利用ください。詳細については、このまま読み進めてください。

OpenReplay を立ち上げて実行する方法は 2 つあります。スクリプトを使用する方法と、npm パッケージを使用する方法です。

スクリプトを使用する

コードスニペットを、Web アプリの </head> 内に直接コピー＆ペーストします。スクリプトは OpenReplay ダッシュボードの ‘Preferences > Projects’ にあり、プロジェクトごとに固有です。

Web サイトが Google Tag Manager をサポートしている場合は、GTM のステップバイステップガイドに従うこともできます。

NPM を使用する

まず、npm パッケージをインストールします。

npm i @openreplay/tracker

次に、コードベースのエントリーポイントからパッケージを初期化し、トラッカーを開始します。コンストラクターで projectKey オプションを設定する必要があります。その値は、OpenReplay ダッシュボードの ‘Preferences > Projects’ で確認できます。

Web サイトがシングルページアプリケーション（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();

Web アプリがサーバーサイドレンダリング（SSR）の場合

Web アプリがサーバーサイドレンダリング（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();
  }, []);
}