マーケティング

Facebook広告まとめ(5):「Facebookピクセル」の設置方法

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは。ディレクターの清田です。

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

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

pixel

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

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

手順2. コードの取得

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

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

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

<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', '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>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
</head>

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

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

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

今回は全ページではなく、コンバージョンページのみにコードを追加します。 例えば、「商品をカートに入れる」というアクションを計測したい場合、「カートに入れる」ボタンをクリックした後のページに対してコードを貼り付けます。

<!-- 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', '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>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

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

  • 「ベ—スコード」は必ず「標準イベントコード」の後に設置しなければなりません。
  • 「ベースコード」内のイベントコード「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

※標準イベントコードは全部で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’);

手順5. ピクセルステータスを確認する

Facebook広告マネージャに移動し、上部のメニューから[ピクセル]を選択します。ステータスが[アクティブ]になっていれば、ピクセルが正しくインストールされています。ピクセルのステータスが変更されるまでには、インストール後に最大20分かかる場合があります。

94  広告マネージャ

まとめ

  • Facebookピクセルは「ベースコード」と、「イベントコード」がある。
  • 「ベースコード」はすべてのページに設置することで、サイトに訪れたユーザーでカスタムオーディエンスを作成することができる。
  • 「イベントコード」はコンバージョンが発生するページに設置することで、コンバージョンを計測することができる。
  • 標準イベントコードでは9種類のコンバージョンを計測でき、パラメーターを設定することで売上などを計上することもできる。

Facebook広告を作成する際に、とっても重要なFacebookピクセル。
今回はその設置方法を紹介しました。
また機会があれば、カスタムイベントコードについても紹介できればと思います。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ブリッジコーポレーションへの
お問い合わせはこちらから

この記事を書いた人

清田

ディレクター。サイト制作のみならず、アクセス解析・広告運用などマーケティングに関わるサポートも行っています。ブリッジの中で一番ボクシングに詳しい。