Metaタグをトラッキングタグに設定する

本記事では、PLAINERで作成したデモコンテンツに計測タグをインストールする「トラッキングタグ機能」について記載しています。

トラッキング機能の基本的な概要は以下の記事をご覧ください。

配信したデモの閲覧を計測する（トラッキングタグ機能）

Metaピクセルの基本的な連携

Meta公式ヘルプに従い、Metaピクセルを作成します。その後ベースコードを取得し、トラッキングタグ欄に貼り付けます。

これだけでも、PLAINERデモのページビューの計測が可能となります。

Metaピクセルの応用的な連携

デモの閲覧状況もカスタムイベントで計測することで、Meta広告を使ってデモを配信した後、デモ閲覧を最後まで完了した人にだけ追加で広告を配信するなどの施策を実施することが可能です。

その場合、以下のサンプルをご参考ください。（スクリプトの保守はサポート対象外となっております、ご了承ください）

※「XXXXXX」部分はMetaピクセルIDになります。

※「YYYYYY」部分はPLAINERのコンテンツIDになります。webサイト設置しているデモなどと二重計測にならないよう、コンテンツIDの指定を推奨いたします。コンテンツIDは、PLAINERのデモ公開URLの最後の/（スラッシュ）から?（クエスチョンマーク）までのハイフンあり英数字になります。

Metaピクセル連携サンプル

(function() {

// ==========================================

// 【設定エリア】計測対象とするコンテンツID（UUID）を指定してください

// ※ 複数ある場合は、カンマ「,」で区切って列挙が可能です

// ==========================================

var TARGET_CONTENT_IDS = [

'YYYYYY'

];

// ==========================================

// --- Metaピクセル基本コードの初期化 ---

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,'script',

'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '2166349584160136');

fbq('track', 'PageView'); // 初期ページビュー（アクセス）を送信

// -------------------------------------

var lastMsg = null;

// イベント受信＆指定コンテンツIDのみMetaへイベント送信

window.addEventListener('message', function(e) {

if (!e.data || !e.data.event) return;

var strData = JSON.stringify(e.data);

if (lastMsg === strData) return;

lastMsg = strData;

var ev = e.data.event;

var id = e.data.contentId || 'unknown';

// 指定されたコンテンツIDのリストに含まれていない場合は処理をスキップ

if (TARGET_CONTENT_IDS.indexOf(id) === -1) return;

// PLAINERの特定のイベントを検知してMetaに送信

if (ev === 'plainer_content_operate_start') {

// デモ開始：完全にオリジナルのカスタムイベント名で送信

fbq('trackCustom', 'Plainer_Demo_Start');

console.log('[Meta] Sent: Plainer_Demo_Start');

} else if (ev === 'plainer_guide_view_complete') {

// デモ終了：完全にオリジナルのカスタムイベント名で送信

fbq('trackCustom', 'Plainer_Demo_Complete');

console.log('[Meta] Sent: Plainer_Demo_Complete');

}

});

})();

</script>

設定の確認・テスト

データセットのテストイベント機能を使っていただき、「ウェブサイト」を選択し、PLAINERの対象デモコンテンツのURLを入力いただくと、別タブでデモが開かれます。

正しく設定されている場合、ページビューやデモ開始が記録されています。