PLAINERナレッジセンター
ログイン

Google Analytics4へのデモ閲覧開始/終了データの連携

Google Analytics4への連携

概要

デモ閲覧、ステップ進行、デモ完了のそれぞれをGoogle Analyticsのカスタムイベントとして記録可能

デモ閲覧後の回遊やCVなどを分析可能

手順

  1. Google Tag Managerでのカスタムイベントの設定
  2. Google Analyticsでのカスタムイベント、ディメンション設定
  3. デモ掲載ページ or 一律でGoogle Tag Managerより連携コードを追加
  4. Google Tag Manaerプレビューでのデータ連携確認

💡 GTM,GA4でのカスタムイベントの設定において、GTMやGA4側の設定にはお答えできかねる場合がございます。

各種設定方法

GTM（Google Tag Manager）の設定

カスタムイベントの追加

  • GTMにて「タグ」→「Google アナリティクス: GA4 イベント」で、カスタムイベント(demo_start, demo_progress, demo_complete)を追加
    イベントパラメータ欄にはdemo_id、demo_duration、demo_current_stepを設定してください
  • demo_start
    • demo_id：デモ固有のID 値：{{demo_id}}
    • demo_duration：デモの総ステップ数 値：{{demo_duration}}
  • demo_progress
    • demo_id：デモ固有のID 値：{{demo_id}}
    • demo_duration：デモのステップ数 値：{{demo_duration}}
    • demo_current_step：閲覧されたステップの番号 値：{{demo_current_step}}
  • demo_complete
    • demo_id：デモ固有のID 値：{{demo_id}}
    • demo_duration：デモの総ステップ数 値：{{demo_duration}}
  • 設定例
    demo_start_example.png
    ※測定IDの欄に設定する内容は、GTMおよびGA4の設定によって左右されます。詳しくは貴社内の担当者様へご確認ください。

トリガーの追加

設定した3つのカスタムイベントそれぞれにトリガーを設定します
以下を参考に、それぞれご設定ください

  • トリガーのタイプ：カスタムイベント
  • このトリガーの発生場所：すべてのカスタムイベント
  • 設定例
    202410301255.png

ユーザー定義変数(データレイヤーの変数)の追加

カスタムイベントのパラメータに設定した値を、ユーザー定義変数に追加をしてください

  • demo_id
  • demo_duration
  • demo_current_step
  • 設定例
    　スクリーンショット2024-11-14181719.png　
    ※「この関数への参照」の欄は自動的に設定されます。

デモ

連携コードの設定（CMSへのデモ埋め込み時 or GTMのカスタムHTML）

デモの埋め込みコードとは別に下記コードを挿入 (GTMのカスタムHTML、またはページ自体に記載)
※カスタムHTMLとして設定時には、トリガーを「All Pages」で設定してください

⚠️設定には、基礎的なHTML/CSS/JaveScriptやMAツールの知識が必要です。個別のご質問にはサポートでお答えしかねます

連携コードサンプル

<script>
var lastReceivedMessage = null;
window.addEventListener('message', function (event) {
  if (lastReceivedMessage && JSON.stringify(lastReceivedMessage) === JSON.stringify(event.data)) {
    return;
  }
  lastReceivedMessage = event.data;
  switch (event.data.event) {
    case 'plainer_content_operate_start':
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'demo_start',
        demo_id: event.data.contentId,
        demo_duration: event.data.contentTotalStep
      });
      break;
    case 'plainer_guide_view_complete':
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'demo_complete',
        demo_id: event.data.contentId,
        demo_duration: event.data.contentTotalStep
      });
      break;
    case 'plainer_guide_view_start':
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'demo_progress',
        demo_id: event.data.contentId,
        demo_duration: event.data.contentTotalStep,
        demo_current_step: event.data.contentCurrentStep
      });
      break;
    default:
      break;
  }
}); 
</script>

デモ

GA4の設定

カスタム定義の追加

設定→カスタム定義→カスタムディメンションに下記3点を追加

  • demo_id：デモ固有のID
  • demo_duration：デモのステップ数
  • demo_current_step：閲覧されたステップの番号
  • ※範囲=イベント、イベントパラメータ=(GTMで設定した「イベントパラメータ」と一致する文字列)
  • ※集計方法のご希望によってはディメンションではなく指標に追加してください

カスタムイベントの確認

  • GTM側の設定後、GA4側にカスタムイベント3種を設定されていることを確認（GTM→GA4への設定反映は最大で24時間掛かります。GTMのタグが発火していないと設定が反映されていない場合があります。）
    • demo_start
    • demo_progress
    • demo_complete

デモ

関連記事