Facebook広告まとめ（5）：「Facebookピクセル」の設置方法

facebook広告

先日、Facebookピクセルについて紹介いたしました。（前回記事：Facebook広告まとめ（4）：広告を運用するなら知っておくべき「Facebookピクセル」でできることとは？）

Facebook広告を運用する上で、広告運用者やマーケターにとって非常に役立つ機能です。
ただ、設置方法は少々複雑です。
今回は「Facebook ピクセルの設置」について少し詳しく説明したいと思います。

手順１. Facebook ピクセルの作成

広告マネージャの[Facebookピクセル]タブに移動します。
[ピクセルを作成]をクリックします。
ピクセルの名前を入力します。1つの広告アカウントに割り当てられるピクセルは1つだけなので、自分のビジネスを代表する名前を選んでください。
※ピクセルの名前は、後で[Facebookピクセル]タブから変更できます。
規約に同意するボックスにチェックを入れ、[次へ]をクリックします。

手順２. コードの取得

次に[ピクセルコードをインストール]という画面に移ります。（広告マネージャのピクセルページ[アクション] > [コードを表示]からでも確認できます。）
今回はタグマネージャーを使用することを想定しない方法を紹介するので、[コードを貼り付け]をクリックします。
すると、ベースコードと呼ばれるコードが表示されます。コード全体をコピーします。
ウェブサイト全体に実装する場合は、ウェブサイト全体の共通テンプレートの<head>タグの間に貼り付けます。

手順３. ベースコードの設置

Facebook ピクセルを設置する上で、最初のステップになります。
作業内容は簡単でコード（ベースコード）を全ページの</head>の直前に貼り付けるだけで、設置は完了です。

<head>  <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', '999999999999999'); // Insert your pixel ID here. fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=999999999999999&ev=PageView&noscript=1" /></noscript>   </head>

※ベースコードでできること
pixelはコードが設置しているページにアクセスすることによって、ユーザーのCookieにそのページにアクセスした履歴を残すことができます。
履歴を元に、該当のサイトに訪れたことのあるユーザーを広告配信先として設定することができます。
この配信先をカスタマイズすることを「カスタムオーディエンス」といいます。
カスタムオーディエンスについては後日ご説明いたします。
ベースコードはあくまでも、カスタムオーディエンスを作成するためのもので、コンバージョンの計測をすることはできません。
※CV（コンバージョン）：Webサイトの成果のことを指し、各Webサイトの目的によってその内容が異なります。例えば、通販サイトなら「商品の購入」がコンバージョンとなります。

手順４. イベントコードの設定

手順3でベースコードを設置できたら、次はベースコードにイベントコード（コンバージョントラッキング用コード）を追加します。
※イベントコードには「標準イベントコード」「カスタムイベントコード」の2種類あります。ここでは「標準イベントコード」についてご説明します。

今回は全ページではなく、コンバージョンページのみにコードを追加します。例えば、「商品をカートに入れる」というアクションを計測したい場合、「カートに入れる」ボタンをクリックした後のページに対してコードを貼り付けます。
 <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', '999999999999999'); // Insert your pixel ID here. fbq('track', 'PageView'); fbq('track', 'Lead'); fbq('track', 'AddToCart'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=999999999999999&ev=PageView&noscript=1" /></noscript>

そこで注意すべきは以下の点です：

「ベ—スコード」は必ず「標準イベントコード」の後に設置しなければなりません。
「ベースコード」内のイベントコード「fbq(‘track’, ‘PageView’);」の後に入れましょう。
標準イベントコードの設置場所を誤ると、正しく計測できない恐れがありますので、ご注意ください。

さらに、細かいKPIやROIの分析やトラッキングをしたい場合は、標準イベントコード内に別途パラメーターを付けることで計測することができます。
fbq(‘track’, ‘EVENT NAME’, { PARAMETER_1:‘PARAMETER_VALUE’, PARAMETER_2: ‘PARAMETER_VALUE’, PARAMETER_3:PARAMETER_VALUE, PARAMETER_4:PARAMETER_VALUE, PARAMETER_5: ‘PARAMETER_VALUE’});
たとえば、椅子を購入することを広告の目標(CV)とし、その購入単価を10,000円としています。そのような場合、以下のコードを使います。
fbq(‘track’, ‘Purchase’, { content_type: ‘product’, content_name: ‘kiyota's_chair’, content_category: ‘chair’, value: 10000.00, currency: ‘JPY’ });
ここでのパラメーターはcontent_type（種類）、content_name（名称）、content_category（カテゴリ）、value（価格）、currency（通貨）になります。

パラメーターについては下記ページをご覧ください。
サイト名：開発者向けFacebook – Audience Management with Facebook Pixel
https://developers.facebook.com/docs/marketing-api/audiences-api/pixel#parameters rel=”nofollow”

※標準イベントコードは全部で9つあります。以下の表に記載しておきますので、参考にしてください。

標準イベントコード一覧

コンテンツを表示	fbq(‘track’, ‘AddToCart’);
検索	fbq(‘track’, ‘Search’);
カートに追加	fbq(‘track’, ‘AddToCart’);
ウィッシュリストへの追加	fbq(‘track’, ‘AddToWishlist’);
チェックアウトを開始	fbq(‘track’, ‘InitiateCheckout’);
支払い情報の追加	fbq(‘track’, ‘AddPaymentInfo’);
購入	fbq(‘track’, ‘Purchase’, {value:’0.00′, currency:’USD’});
リード	fbq(‘track’, ‘Lead’);
登録完了	fbq(‘track’, ‘CompleteRegistration’);