上級者向け
代替実装、単一ページのウェブアプリでのピクセルの使用、およびボタンクリックとページスクロールによるコンバージョンのトラッキングに関するヒント。
一般データ保護規則
一般データ保護規則(GDPR)の対象となる国でビジネスを運営する場合は、同規則を順守する方法についてFacebookのGDPRドキュメントでご確認ください。
IMGタグを利用してピクセルをインストールする
IMGタグを使用してピクセルをインストールできますが、別の方法について実装ガイドを参照することをおすすめします。
軽量実装を使用してピクセルをインストールする必要がある場合は、<img>タグを使用してインストールできます。そのためには、ウェブサイトのヘッダーまたは本文内に、以下のコードを<noscript>の開始タグと終了タグで囲んで追加し、{pixel-id}をピクセルのIDに置き換え、{standard-event}を標準イベントに置き換えます。
<img src="https://www.facebook.com/tr?id={pixel-id}&ev={standard-event}" height="1" width="1" style="display:none"/>
<img>タグを使用してインストールされるピクセルでは、クエリ文字列で指定可能なパラメーターもサポートしています。以下はその例です。
<img src="https://www.facebook.com/tr?id=12345 &ev=ViewContent &cd[content_name]=ABC%20Leather%20Sandal &cd[content_category]=Shoes &cd[content_type]=product &cd[content_ids]=1234 &cd[value]=0.50 &cd[currency]=USD" height="1" width="1" style="display:none"/>
制限
- 1回のページ読み込みで複数回起動することはできません。
- UIインタラクション(ボタンクリックなど)でトリガーされた標準イベントやカスタムイベントはトラッキングできません。
- カスタムデータや長いURLを送信するときにHTTP GETの制限を受けます。
- 非同期に読み込むことはできません。
IMGタグインストールの例
以下に、架空のウェブサイトのキーページ全体にわたるMetaピクセルIMGタグインストールの例を示します。ここでは、架空のピクセルID(12345)とカスタムパラメーター(例: cd[currency]=USD)を使用しています。
製品ページにおける、PageViewイベントをトラッキングするピクセルと、ViewContentイベントをトラッキングする別のピクセル
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/>
[カートに追加]ページにおける、PageViewイベントをトラッキングするピクセルと、AddToCardイベント(カスタムデータを使用)をトラッキングする別のピクセル
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/>
購入ページにおける、PageViewイベントをトラッキングするピクセルと、Purchaseイベント(購入に関するデータを使用)をトラッキングする別のピクセル
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/>
iOS 14.5以降の合算イベント測定IMGピクセル
Metaの合算イベント測定は、iOS 14.5以降のデバイスを使っている人のウェブイベントとアプリイベントを測定できるプロトコルです。データが欠落している場合や、部分的なデータしかない場合は、統計モデリングを使用して結果のビューをより完全なものに近づけます。
ピクセルIMGタグを利用する際にこのドキュメントのIMGタグを利用してピクセルをインストールするのセクションに従うか、IMGタグを使用せずに実装ガイドに従うことを強くおすすめします。
不足しているIMGピクセルデータ
ランタイムJavaScript
IMGピクセルを設定する際に、ランタイムJavaScriptを利用してJavaScript Imageクラスを生成し、そのImageクラスをウェブサイトのDOMツリーにアタッチしない場合(例えば、サードパーティJavaScriptライブラリを利用してIMGピクセルを送信する場合)、以下のコードを追加しなければなりません。そうしないとMetaはIMGピクセルデータを受信しません。
var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
const postObj = {
id: {pixel-id},
ev: {standard-event},
cd: {stringified-custom-data},
dpo: {data-processing-options}, // Optional CCPA param
dpoco: {data-processing-option-country}, // Optional CCPA param
dpost: {data-processing-option-state}, // Optional CCPA param
};
nativeBridge.postMessage(JSON.stringify(postObj));
}サンドボックス属性
ピクセルIMGをsandbox属性付きのiframeに配置する場合、allow-scripts値を追加する必要があります。そうしないとFacebookはIMGピクセルデータを受信しません。
自動リダイレクトシナリオのためにAEMを有効にする
AEMの機能が拡張され、広告主の最適化ピクセルイベントが起動される広告主関連の全ウェブページからのコンバージョンが考慮されるようになりました(例えば、広告主が短縮URLや地理的位置によるリダイレクトを利用していたり、ビジネスラインが複数あったり、広告運用を広告会社に依頼していたりする場合など)。これらのシナリオのいずれかに該当しており、AEMを有効にする場合は、次のようにすることをおすすめします。
- コンバージョンの獲得元となる複数の関係ドメインを通じて同じMetaピクセル(同じピクセルIDとピクセルイベント名のペア)を使う
- それらのドメイン全体で、コンバージョン獲得元となるAEMイベントが優先されるようにする
ボタンのクリックをトラッキングする
ビジターがボタンをクリックすると、MetaピクセルのJavaScriptコードによって、関連するフォームフィールドが自動的に検出されMetaに送信されます。
Eコマースのウェブサイトで[カートに追加]ボタンをクリックしても、新しいページには移動しないとします。そのボタンがクリックされたときにイベントを発生させることができます。
この例では、ページの読み込み時にViewContent標準イベントを発生させます。利用者が[カートに追加]ボタンをクリックした場合は、AddToCart標準イベントを発生させます。
そのためには、まず、ページの読み込み時に起動するMetaピクセルコードを読み込みます。
<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code --> 次に、新しいページの読み込み、または[カートに追加]ボタンのクリックのいずれかの時点で、AddToCartを発生させます。ボタンのクリックの処理には、いくつかの方法があります。次の例では、ボタンにeventListenerを追加しています。
<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script> クリックイベントには多くの処理方法があります。いずれの場合も、クリックイベント後にfbq関数を呼び出してください。
ピクセルの実装方法によっては、ボタンがクリックされる前にピクセルヘルパーがエラーを表示する場合があります。ピクセルが正しくイベントを発行していることを認証するには、ボタンをクリックし、ヘルパーのエラー表示を閉じます。
表示内容に基づいてイベントを発生させる
この例では、自分のブログの記事全体を読んだ利用者をトラッキングします。利用者側のアクションは、ページを最後までスクロールすることだけです。
ピクセルを読み込むページのHTMLのサンプルは次のとおりです。
<!DOCTYPE html> <html> <head> <!-- Facebook Pixel Code --> <script> !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', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html> id=fb-fire-pixelが設定されたh1エレメントが表示された時点で、Lead標準イベントを発生させます。エレメントが画面に表示されたことを確認するため、次のコードをページに追加します。
// This code should be loaded together with Meta Pixel
var executeWhenElementIsVisible = function(dom_element, callback) {
if (!(dom_element instanceof HTMLElement)) {
console.error('dom_element must be a valid HTMLElement');
}
if (typeof callback !== 'function') {
console.error(
'Second parameter must be a function, got',
typeof callback,
'instead',
);
}
function isOnViewport(elem) {
var rect = elem.getBoundingClientRect();
var docElem = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
rect.right <= (window.innerWidth || docElem.clientWidth)
);
}
var executeCallback = (function() {
var wasExecuted = false;
return function() {
if (!wasExecuted && isOnViewport(dom_element)) {
wasExecuted = true;
callback();
}
};
})();
window.addEventListener('scroll', executeCallback, false);
};その後、このエレメントが画面に表示されたときのピクセルの起動方法を定義する必要があります。
// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');
// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
fbq('track', 'Lead');
});ページの長さまたパーセンテージに基づいてイベントを発生させる
この例では、ページを一定の長さまたはパーセンテージまで読んだ利用者をトラッキングします。利用者側のアクションは、ページを一定の長さまたはパーセンテージまでスクロールすることだけです。
この最初の例では、利用者が読んだページの長さをトラッキングします。利用者がページの長さの500pxまでを読んだ時点でリードピクセルを起動します。
var executeWhenReachedPageLength = function(length, callback) {
if (typeof length !== 'number') {
console.error(
'First parameter must be a number, got',
typeof length,
'instead',
);
}
if (typeof callback !== 'function') {
console.error(
'Second parameter must be a function, got',
typeof callback,
'instead',
);
}
function getWindowLength() {
return window.innerHeight ||
(document.documentElement || document.body).clientHeight;
}
function getCurrentScrolledLengthPosition() {
return window.pageYOffset ||
(document.documentElement || document.body.parentNode || document.body).scrollTop;
}
var executeCallback = (function() {
var wasExecuted = false;
return function() {
if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
wasExecuted = true;
callback();
}
};
})();
if (getWindowLength() >= length) {
callback();
} else {
window.addEventListener('scroll', executeCallback, false);
}
};
executeWhenReachedPageLength(10, function() {
fbq('track', 'Lead');
});この2番目の例では、利用者が読んだページのパーセンテージをトラッキングします。利用者がページの75%までを読んだ時点でリードピクセルを起動します。
var executeWhenReachedPagePercentage = function(percentage, callback) {
if (typeof percentage !== 'number') {
console.error(
'First parameter must be a number, got',
typeof percentage,
'instead',
);
}
if (typeof callback !== 'function') {
console.error(
'Second parameter must be a function, got',
typeof callback,
'instead',
);
}
function getDocumentLength() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
)
}
function getWindowLength() {
return window.innerHeight ||
(document.documentElement || document.body).clientHeight;
}
function getScrollableLength() {
if (getDocumentLength() > getWindowLength()) {
return getDocumentLength() - getWindowLength();
} else {
return 0;
}
}
var scrollableLength = getScrollableLength();
window.addEventListener("resize", function(){
scrollableLength = getScrollableLength();
}, false)
function getCurrentScrolledLengthPosition() {
return window.pageYOffset ||
(document.documentElement || document.body.parentNode || document.body).scrollTop;
}
function getPercentageScrolled() {
if (scrollableLength == 0) {
return 100;
} else {
return getCurrentScrolledLengthPosition() / scrollableLength * 100;
}
}
var executeCallback = (function() {
var wasExecuted = false;
return function() {
if (!wasExecuted && getPercentageScrolled() > percentage) {
wasExecuted = true;
callback();
}
};
})();
if (getDocumentLength() == 0 ||
(getWindowLength()/getDocumentLength() * 100 >= percentage)) {
callback();
} else {
window.addEventListener('scroll', executeCallback, false);
}
};
executeWhenReachedPagePercentage(75, function() {
fbq('track', 'Lead');
});遅発のピクセルの起動
ウェブサイトの利用者を、利用開始から数秒後にピクセルイベントを起動して追跡することができます。そのためには、setTimeout関数を使用します。
// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
fbq('track', 'Lead');
}, seconds * 1000);これを使用すれば、あまりにも速く移動して実際にはコンテンツを読んでいない利用者ではなく、実際にコンテンツを読んでいる、ページに「積極的に」アクセスした利用者をトラッキングすることができます。
セッション当たりに表示した記事の数に基づいてイベントを発生させる
サイトから一定の数の記事を表示した利用者を追跡するには、セッションカウンターを設置して、その数まで表示された時点でMetaピクセルコードを読み込むことができます。
セッションとは、1回のサイトリクエストにおいて一定の時間枠内にウェブサイト上で発生する一連の利用者行動のことです。利用者のアクティビティが一定の時間枠を示していることがわかるのであれば、ページビューの数を増やすことができます。
site_request当たりのsessionCountViewsの変数を使用すると、カウントしたページビュー数に基づいてMetaピクセルコードを追加できます。
表示される6つ目の記事までをカウントする例
if (site_request.sessionCountViews == 6) {
fbq('track', "ViewContent", {
sessionCountViews: site_request.sessionCountViews,
});
}複数のピクセルによる選択式イベントトラッキング
同じページに複数のピクセルがある場合に、ユニークピクセルごとにイベントを選択的に起動するには、trackSingle機能およびtrackSingleCustom機能を使用する必要があります。
複数のピクセルが初期化されているページで(複数のベースコードを使用するか、1つのベースコード内に結合して)track機能を使用すると、過度の起動や予期しない動作が発生することがあるので、特定の状況でのみ使用してください。
両方の初期化されたピクセルでPageViewを起動し、1つのピクセルで標準イベント(Purchase)を、2つ目のピクセルでカスタムイベントを選択的に起動する例を次に示します。
fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels
// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
value: 4,
currency: 'GBP',
});
// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
//optional parameters
});個々のピクセルのイベントのトラッキング
まれに、ウェブサイトに実装されているピクセルの1つだけにイベントを送信しなければならないことがあります。例えば、送信されるデータをウェブサイトのいずれかのピクセルに制限する場合などです。このようなメソッドは、単一のピクセルのピクセル起動をトラッキングします。これらは次のように呼び出します。
fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);自動構成
Metaピクセルは、ボタンクリックと、ページメタデータ(OpengraphまたはSchema.orgの形式に従って構造化されたデータなど)をウェブサイトから送信して広告の配信と測定を改善し、ピクセル設定を自動化します。この追加情報を送信しないようにMetaピクセルを構成するには、Metaピクセルベースコードで、fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID')をinit呼び出しの前に追加してください。
<!-- Facebook Pixel Code -->
<script>
!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');
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID');
//Insert Your Facebook Pixel ID below.
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->コンテンツセキュリティポリシー
ウェブサイトにコンテンツセキュリティポリシーがある場合、JavaScriptによるhttps://connect.facebook.netからの読み込みを許可してください。注: ピクセルは、次の2つのパスからスクリプトを読み込みます: /en_US/fbevents.jsと/signals/config/{pixelID}?v={version}。