Contents
Mixpanelセッションリプレイ導入の前提条件と目的
Web分析担当者・デベロッパー・マーケティング実務者がユーザー行動を可視化するためには、Mixpanelのセッションリプレイ機能が不可欠です。この機能は、ユーザーがサイトやアプリ内で行ったクリック、スクロール、入力などの動作をリアルタイムで記録し、再生可能な形式で確認できます。
導入目的は、「ユーザー離脱原因の特定」「UI/UX改善の検証」「コンバージョン漏れの発見」など、ビジネス課題解決につながる実績データの取得です。公式ドキュメントに基づいた最新手順に従うことで、即日からユーザー行動分析を開始可能です。
JavaScriptタグの埋め込み手順
セッションリプレイ機能を動作させるためには、まずMixpanelのJavaScriptタグをプロジェクトに埋め込む必要があります。公式ドキュメントに基づいた最新手順で進めましょう。
プロジェクトへのタグ追加
- Mixpanelダッシュボードから「Project Settings」を開く
- 「Installation Code」セクションに表示されるスクリプトコードを取得
- HTMLファイルの
<head>内またはページ読み込み直後に以下を記述する
|
1 2 3 4 |
<script type="text/javascript"> (function(m,i,x,p,a,n,s){m[a]=m[a]||function(){(m[a].q=m[a].q||[]).push(arguments)};m[a].l=1*new Date();n=i.createElement("script");s=i.getElementsByTagName("script")[0];n.async=1;n.src=x;n.type="text/javascript";s.parentNode.insertBefore(n,s);})(window,document,"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js","mixpanel"); </script> |
アカウント認証情報の設定
- プロジェクトトークン（Token）を取得し、以下に置き換える必要があります
|
1 2 3 4 5 |
mixpanel.init('YOUR_PROJECT_TOKEN', { debug: true, // デバッグモード有効化 track_pageview: true, }); |
注意点：DOM読み込み完了後（
DOMContentLoadedイベント）にタグを実行する必要があります。SPAの場合は、ルートコンポーネントのライフサイクル内で初期化することを推奨します。
イベントトラッキングの設定フロー
セッションリプレイで正確なデータを取得するためには、必須イベントとカスタムイベントの設定が不可欠です。Mixpanel UIでの操作手順をステップバイステップ解説します。
必須イベントの定義
セッションリプレイ機能を正常に動作させるためには、以下のようなイベントが自動的にトラッキングされます（ユーザーインタラクション、ページビュー、エラーなど）。
| イベント名 | データ内容 | 備考 |
|---|---|---|
pageview |
ページアクセス情報 | 自動トラッキング |
click |
ボタンやリンクのクリック履歴 | カスタムイベント |
form submission |
入力フォーム送信内容 | プライバシー対応必須 |
カスタムイベントの作成手順
- Mixpanelダッシュボード → 「Events」タブにアクセス
- 「Create New Event」ボタンをクリック
-
イベント名と目的を入力し、以下のオプションを設定
-
Event Properties（イベントプロパティ）: ユーザーIDや画面名称など追加情報を指定可能
- Filtering Rules（フィルタリングルール）: 特定のユーザー層に限定してトラッキング
例: 以下のようにカスタムイベントをJavaScriptで送信できます。
|
1 2 3 4 5 |
mixpanel.track('商品詳細ページアクセス', { 商品ID: '[商品ID]', ユーザーID: '[ユーザーID]' }); |
データ送信状況の確認方法
デベロッパーが実装したタグやイベントが正しくMixpanelに送信されているかをリアルタイムで確認するには、以下の手順をとります。
コンソールログの確認手順
- Chrome DevToolsを開き、「Sources」タブを選択
mixpanel-2-latest.min.jsファイルを選択し、console.log()で出力されるデバッグ情報を確認
例: ログに「[Mixpanel] Initialized with token: YOUR_PROJECT_TOKEN」と表示されれば初期化成功です。
ネットワークパケット解析
- DevToolsの「Network」タブを開く
-
「XHR/Fetch」フィルタを適用し、
https://api.mixpanel.com/trackにアクセスするリクエストを確認 -
ステータスコードが「200 OK」であれば正しくデータが送信されています
- エラーが発生した場合は、「Request Payload」をチェックし、
eventやpropertiesの値が正しいか確認します
セッションリプレイの初期表示テスト
導入後の動作検証には、テスト用ユーザーでセッション再生画面を操作する必要があります。以下に手順を示します。
テスト用ユーザーの作成
- Mixpanelダッシュボード → 「People」タブへアクセス
-
「Create Person」ボタンをクリックし、以下の情報を入力
-
Distinct ID:
test_user_001（任意で指定） - Email:
[メールアドレス削除]（テスト用の仮想メールアドレス）
再生画面操作ガイド
- 「Session Replay」セクションを選択し、日付とユーザーIDを指定
- リプレイ画面右上にある「Play」ボタンで再生開始
-
以下の項目が表示されているか確認
-
タイムスタンプ（操作時間）
- マウスカーソル移動やクリック履歴
- スクロール動作とブラウザ画面遷移
注意: テストユーザーで再現したセッションは、14日間保存されます。本番環境での確認が必要な場合は、テスト用アカウントを作成することを推奨します。
エラーメッセージの対処法
導入中に発生するよくあるエラーとその解決策を整理しました。
よくあるエラー一覧
| エラー内容 | 対応策 |
|---|---|
Mixpanel: Token is invalid |
プロジェクトトークンの確認 |
Cannot read property 'track' of undefined |
mixpanel.init()が正常に実行されたか再確認 |
Network Error (503) |
Mixpanelサーバー障害の可能性（暫定対応） |
ブラウザコンソールからのトラブルシューティング
- DevToolsの「Console」タブを開く
- 「mixpanel」を検索し、以下のエラーが表示されているか確認
例:
|
1 2 3 |
Uncaught TypeError: Cannot read property 'track' of undefined at <anonymous>:1:14 |
- この場合、「mixpanel.init()」の呼び出しがされていない可能性があります。HTMLファイルでタグが正しく埋め込まれているか再度確認してください。
まとめ
本記事に従って設定することで、ユーザー行動分析を即日開始可能です。導入ステップは以下の通りです：
- JavaScriptタグの埋め込み：プロジェクトトークンの正しい設定で初期化
- イベントトラッキングの設定：必須イベントとカスタムイベントの両方を網羅
- データ送信確認：コンソールログとネットワークパケットでリアルタイム検証
- セッションリプレイテスト：テストユーザーで再生画面操作を検証
- エラー処理：よくあるエラーに対応する手順を理解しておく
実務においては、導入後の定期的な確認と、イベントの追加・修正による分析精度向上が重要です。