本記事では、PLAINERで作成したデモコンテンツに計測タグをインストールする「トラッキングタグ機能」について記載しています。
トラッキング機能の基本的な概要は以下の記事をご覧ください。
GTMとの基本的な連携
Google公式ヘルプに従い、「Google タグ マネージャーをインストールする」ダイアログで取得できたコードをPLAINERのトラッキングコード欄に貼り付けます。
これだけでも、PLAINERデモのページビューの計測が可能となります。
GTMの応用的な連携
デモページビューの計測だけなく、デモの開始や完了も測定することが可能です。事前にタグを作っておく必要があります、詳細はこちらの記事をご確認ください。
※「XXXXXX」部分はアカウントIDになります。トラッキングコード内に含まれています。
※「YYYYYY」部分はPLAINERのコンテンツIDになります。webサイト設置しているデモなどと二重計測にならないよう、コンテンツIDの指定を推奨いたします。コンテンツIDは、PLAINERのデモ公開URLの最後の/（スラッシュ）から?（クエスチョンマーク）までのハイフンあり英数字になります。
GTM連携サンプル
GTM連携サンプル
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXXXX');</script>
<script>
(function() {
// ==========================================
// 【設定エリア】計測対象とするコンテンツID（UUID）を指定してください
// ※ 複数ある場合は、カンマ「,」で区切って列挙が可能です
// ==========================================
var TARGET_CONTENT_IDS = [
'YYYYYY'
];
// ==========================================
var lastReceivedMessage = null;
// イベント受信 ＆ 指定コンテンツIDのみGTMのdataLayerへ送信
window.addEventListener('message', function (event) {
if (!event.data || !event.data.event) return;
if (lastReceivedMessage && JSON.stringify(lastReceivedMessage) === JSON.stringify(event.data)) {
return;
}
lastReceivedMessage = event.data;
var id = event.data.contentId || 'unknown';
// 指定されたコンテンツIDのリストに含まれていない場合は処理をスキップ
if (TARGET_CONTENT_IDS.indexOf(id) === -1) return;
switch (event.data.event) {
case 'plainer_content_operate_start':
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'demo_start',
demo_id: id,
demo_duration: event.data.contentTotalStep
});
break;
case 'plainer_guide_view_complete':
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'demo_complete',
demo_id: id,
demo_duration: event.data.contentTotalStep
});
break;
case 'plainer_guide_view_start':
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'demo_progress',
demo_id: id,
demo_duration: event.data.contentTotalStep,
demo_current_step: event.data.contentCurrentStep
});
break;
default:
break;
}
});
})();
</script>