GTM 連携ブリッジ & GA4 イベント連携ブリッジ

双方向の dataLayer 同期と GA4 互換 API により、Google Analytics 4 の定量的なテレメトリーと MousePlayer の定性的なセッション再生を結び付けます。

1. アーキテクチャの概要 & 機能

現代の Web 分析には、データが分断されるという根本的な課題があります。Google Analytics 4 などの定量分析プラットフォームで分かるのは、サイトで 何が 起きたかです。一方、定性的なセッション再生ツールで分かるのは、 なぜ 起きたかです。 MousePlayer GTM & GA4 連携ブリッジ は、ブラウザーの JavaScript 実行環境内に双方向の同期経路を設け、この隔たりを解消します。

有効にすると、トラッキングスクリプトが専用の二つの中核モジュールを初期化します。

  • セッション再生エクスポーター（initGa4SessionBridge）： セッションが確立すると直ちに、進行中の録画セッションの識別子（mp_session_id）と直接再生用の URL（mp_session_url）を、サイトのデータレイヤーに自動的に追加します。
  • GA4 イベント取り込み（initDataLayerBridge）： データレイヤーの配列に、既存の動作を壊さないリスナーを付けます。GA4 用に追加された独自の E コマースイベントや行動イベントはすべて、カスタムイベント（ce）として、数値・文字列の全パラメーターとともに MousePlayer の分析データベースへ直ちに複製されます。

独自の dataLayer オブジェクトに対応： Web アプリケーションで標準の dataLayer の代わりに、例えば xyzDataLayerのような独自の JavaScript 配列名を使う場合、エンジンは設定された gtm_datalayer_name パラメーターに動的に対応するため、手動でコードを変更する必要はありません。

2. 戦略的なビジネス価値

セッション再生リンクを企業の分析パイプラインに直接組み込むことで、業務に大きな利点が得られます。

ビジネス上の機能 業務への効果
コンバージョン率の最適化（CRO） デジタル分析担当者は、GA4 のコンバージョンファネルでフリクションのある箇所を特定し、チェックアウトの特定の段階でカートから離脱したユーザーの録画をすぐに開けます。
売上のアトリビューション & 監査 購入に至るまでのポインターの正確な軌跡、クリック、ビューポートの状態を確認し、高額な E コマース取引を監査できます。
技術的なデバッグの迅速化 QA エンジニアリングチームは、GA4 の JavaScript 例外イベントや API エラーログと画面の録画を直接結び付けられるため、不具合を手動で再現する必要がなくなります。
カスタマーサポートでの解決 ユーザーのセッション ID が含まれるサポートチケットから、担当者がそのお客様の正確なセッション再生を確認でき、解決までの時間を大幅に短縮できます。

3. Google Tag Manager 設定ガイド

Google Tag Manager 内で再生 URL を取得して Google Analytics 4 に送るには、GTM で次の三つを設定します。

ステップ1：データレイヤー変数を作成

GTM のワークスペースで、 変数 → ユーザー定義変数 に移動し、種類が データレイヤーの変数の変数を二つ作成します。

  • 変数名： dlv - mp_session_id • データレイヤーの変数名： mp_session_id
  • 変数名： dlv - mp_session_url • データレイヤーの変数名： mp_session_url

ステップ2：有効化用トリガーを作成

次に移動します： トリガー → 新規 。トリガーの種類として カスタムイベントを選択し、次のパラメーターを設定します。

  • イベント名： mp_session_ready
  • このトリガーの発生場所： すべてのカスタムイベント

ステップ3：GA4 イベントタグを設定

種類が Google アナリティクス：GA4 イベント のタグを新規作成し、GA4 プロパティにセッションリンクを送信します。

# GA4 Event Tag Configuration Tag Type: Google Analytics: GA4 Event Configuration Tag: [Select standard GA4 Configuration Tag] Event Name: mp_recording_ready # Event Parameters: | Parameter Name | Value | |-----------------|---------------------------| | mp_session_id | {{dlv - mp_session_id}} | | mp_session_url | {{dlv - mp_session_url}} | Triggering: Fire on Custom Event -> mp_session_ready

4. GA4 で探索（カスタムレポート）を設定

GTM タグを導入すると、GA4 が再生 URL をイベントパラメーターとして受信し始めます。このデータをカスタムの探索レポートで分析するには、まずパラメーターをカスタムディメンションとして登録します。

GA4 の管理でカスタムディメンションを登録

Google Analytics 4 の画面で、 管理 → データの表示 → カスタム定義 に移動し、 カスタムディメンションを作成をクリックします。

  • ディメンション名： MousePlayer Session URL
  • 範囲： イベント （または、セッション範囲のパラメーターに付加する場合は セッション ）
  • イベントパラメーター： mp_session_url

セッション確認用の探索を作成

GA4 の 探索 セクションで、新しい 自由形式 の探索を作成し、個々のユーザージャーニーを調べます。

  • 行： 次を追加します： Event name、 Transaction ID （E コマースの場合）、または Landing page。
  • 列／ディメンション： 新しく作成したカスタムディメンションである MousePlayer Session URLを含めます。
  • 値： 次を追加します： Event count または Total users。

生成されるレポートの表では、GA4 の指標の横に直接クリックできる URL が表示されます。統計上の外れ値から、すぐに録画の再生へ移れます。

5. GA4 の標準レポートに再生 URL を追加

探索に加えて、GA4 のレポートライブラリを使い、次のような標準レポートにもカスタムディメンションを組み込めます： トラフィック獲得、 ページとスクリーン、 E コマース購入数。

標準レポートの表を変更

  1. GA4 で標準の詳細レポートを開きます（例： レポート → エンゲージメント → ページとスクリーン）。
  2. 右上にある レポートをカスタマイズ の鉛筆アイコンをクリックします（管理者のアクセス権限が必要です）。
  3. 右側のパネルの レポートデータで、 ディメンションをクリックします。
  4. 次を MousePlayer Session URL プライマリまたはセカンダリのディメンション一覧に追加し、表示するよう設定します。
  5. 次をクリックします： 保存 → 現在のレポートへの変更を保存。

保存すると、標準の獲得表やコンバージョン表を確認する分析担当者は、 MousePlayer Session URL をセカンダリディメンションとして追加し、通常のトラフィックセグメントごとに訪問者の行動を直ちに目で確認できます。

6. JavaScript API & GA4 / GTM 互換性リファレンス

MousePlayer は、標準の gtag()形式のコマンドを使う直感的な GA4 互換 JavaScript API と、公開グローバルオブジェクト（window.MousePlayer）を提供します。開発者は、コンソールでセッション URL を取得したり、B2B 顧客 ID を付加したり、外部のヘルプデスクやエラートラッカーに再生リンクを挿入したりできます。

1. 再生 URL の直接挿入（Intercom / Zendesk / 独自の連携ブリッジ）

ブラウザーのコンソールや独自のスクリプトから、次を使って、進行中の訪問者セッションの完全な再生 URL を直接取得できます： window.MousePlayer.getSessionUrl()。

// Example: Retrieve the active session URL and attach it to Intercom chat metadata if (window.MousePlayer && window.MousePlayer.getSessionUrl) { var replayUrl = window.MousePlayer.getSessionUrl(); console.log('Active Replay:', replayUrl); // Attach to Intercom Messenger metadata if (window.Intercom) { Intercom('update', { 'mouseplayer_replay_url': replayUrl }); } }

2. 独自の B2B 顧客 ID の設定（user_id）

ログイン済みの SaaS または B2B のお客様を識別するため、独自の user_id （データベース ID、メールアドレス、UUID など）を、スクリプトの初期設定時、または実行時に GA4 の構文を使って動的に渡せます。

// Method A: Set user_id dynamically at login (GA4 / gtag style) mp('set', 'user_id', 'USR-987654'); // Method B: Set via config object mp('config', 'YOUR_CHANNEL_ID', { user_id: 'USR-987654' }); // Method C: Direct SDK invocation window.MousePlayer.setUserId('USR-987654');

3. 非同期のデータ取得方法

独自のタグ管理スクリプト内で、標準の GA4 のコールバック構文を使ってセッションのメタデータを非同期に取得できます。

// Retrieve active session URL mp('get', 'session_url', function(url) { console.log('Session URL:', url); }); // Retrieve visitor ID (Client ID equivalent) mp('get', 'client_id', function(clientId) { console.log('Visitor ID:', clientId); });

記載されている商標はすべて各所有者に帰属します。MousePlayer とこれらのプロバイダーとの間に取引関係はありません。