Google Analytics4への連携
概要
デモ閲覧、ステップ進行、デモ完了のそれぞれをGoogle Analyticsのカスタムイベントとして記録可能
デモ閲覧後の回遊やCVなどを分析可能
手順
Google Tag Managerでのカスタムイベントの設定
Google Analyticsでのカスタムイベント、ディメンション設定
デモ掲載ページ or 一律でGoogle Tag Managerより連携コードを追加
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}}
設定例
※測定IDの欄に設定する内容は、GTMおよびGA4の設定によって左右されます。詳しくは貴社内の担当者様へご確認ください。
トリガーの追加
設定した3つのカスタムイベントそれぞれにトリガーを設定します
以下を参考に、それぞれご設定ください
トリガーのタイプ：カスタムイベント
このトリガーの発生場所：すべてのカスタムイベント
設定例
ユーザー定義変数(データレイヤーの変数)の追加
カスタムイベントのパラメータに設定した値を、ユーザー定義変数に追加をしてください
demo_id
demo_duration
demo_current_step
設定例
※「この関数への参照」の欄は自動的に設定されます。
デモ（クリックすると別タブで開きます）
連携コードの設定（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.contentTotalSteps
});
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.contentTotalSteps
});
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.contentTotalSteps,
demo_current_step: event.data.contentCurrentStep
});
break;
default:
break;
}
});
</script>
※2026年7月修正： サンプルコードにつきまして、contentTotalStepsをcontentTotalStepと記載していたため修正いたしました。
デモ（クリックすると別タブで開きます）
GA4の設定
カスタム定義の追加
設定→カスタム定義→カスタムディメンションに下記3点を追加
demo_id：デモ固有のID
demo_duration：デモのステップ数
demo_current_step：閲覧されたステップの番号
※範囲=イベント、イベントパラメータ=(GTMで設定した「イベントパラメータ」と一致する文字列)
※集計方法のご希望によってはディメンションではなく指標に追加してください
カスタムイベントの確認
GTM側の設定後、GA4側にカスタムイベント3種を設定されていることを確認（GTM→GA4への設定反映は最大で24時間掛かります。GTMのタグが発火していないと設定が反映されていない場合があります。）
demo_start
demo_progress
demo_complete
デモ（クリックすると別タブで開きます）
