Facebookのヘルプによるピクセル導入方法

まず、Facebookの公式ヘルプでアナウンスしているFacebook Pixelの導入方法を確認してみましょう。Facebookビジネスマネージャーの管理画面は、現在も日々改善が行われており、画面構成は日々変わっていきます。

本記事を執筆している5月21日時点では、「イベントマネージャー」というメニューからFacebookピクセルにアクセスすることが可能です。また公式ヘルプページでも、Facebookピクセルの作成とインストールから確認することができます。

Facebookピクセルは、以下のようになっており、このタグをウェブサイトのヘッダーセクション下部の</head>タグの上に貼り付けるように説明されています。なお、直接ウェブサイトにFacebookピクセルを設置する以外に、GoogleタグマネージャーやTealium、その他様々なCMSでの導入方法が説明されています。

Facebookピクセルの例

<!-- 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', 'xxxxxxxxxxxxxxx');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

どこが違っているのか

ヘルプの説明の中で間違っているのは、Webサイトに直接設置する場合の説明です。今回の誤りは、

  • headタグ内にタグを記載する
  • 設置するタグの中にnoscriptタグが存在する

の2つが組み合わせで発生します。そして、このような実装を行うと、JavaScriptの実行ができない環境下での動作に問題が発生します。

まず、noscriptタグとは何かについて説明していきたいと思います。noscriptタグは、scriptタグで用意したJavaScriptが実行できない時に動作する代替コンテンツを用意するためのタグです。例えば、JavaScriptを使ってアニメーションを表示している場合などで、JavaScriptが動作しない時に似た内容の静止画を表示したり、「JavaScriptを有効にしてご覧ください」といったテキストを表示させるために使われます。Webマーケティングの分野では、JavaScriptを必要とするタグが、JavaScriptが無効になっている時に、1x1の小さなピクセルを表示し、最小限のデータをツールに送信するために使われることがあります。

そんなnoscriptタグですが、いくつかの制約があります。HTML4では、headタグ内にnoscriptタグを設置することはできません。またHTML5においてはheadタグ内にnoscriptタグを使用することはできるようになりましたが、その中に設置できるタグは、linkタグ、styleタグ、metaタグの3種類に限られており、画像タグを読み込むことはできません。

つまり、Facebook公式ヘルプページでは、

  • Facebook Pixelを、headタグ内に含めるようにアナウンスしている
  • Facebook Pixelには、noscriptタグも含まれている
  • noscriptタグの内部では、画像を読み込もうとしている

といった記載になっているため、JavaScriptが実行されない環境下で本来読み込みたかった画像タグが読み込まれない状況になっています。

実は、この問題について、Facebook上のプライベートグループである「Facebook Developer Community」にて2017年1月に報告を行っています。その時の返信をまとめると「Webページに書いてある手順は推奨であって必須ではない、最終的にどこに設置するかは開発者が決めれば良い」というものでした。正常に動作しない手順を推奨している、というよく分からない回答であり、それから3年以上経過した今でも同じ状況になっている、ということで今回記事にしました。

では、どうするのが正しいのか

既に説明したように、noscriptタグの制約である「headタグ内にnoscriptタグを設置する場合、その中に置くことができるタグは、linkタグ、styleタグ、metaタグの3種類のみである」が間違いの原因です。

そのため、元々のFacebook Pixelタグをごっそり、headタグ内ではなくbodyタグ内に設置する、という方法があります。bodyタグ内であれば、noscriptタグ内にimgタグを書いても正しく動作します。

もしくは、Facebook Pixelを、scriptタグとnoscriptタグに分割し、scriptタグはheadタグ内に設置、noscriptタグはbodyタグ内に設置、とすることでも正しく動作させることが可能です。この分割の例は以下となります。

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', 'xxxxxxxxxxxxxxx');
  fbq('track', 'PageView');
</script>
<!-- End Facebook Pixel Code -->

bodyタグ内に設置するタグ

<!-- Facebook Pixel Code -->
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

また、Googleタグマネージャー内にFacebook Pixelを設置する場合、カスタムHTMLタグを使って設置する一般的な方法では、JavaScriptの動作が前提となっているため、noscriptタグについては利用されることがなく、カスタムHTMLから省いて設置しても何も問題はありません。

まとめ

現在、多くの人はGoogleタグマネージャーなどのタグマネジメント・ツールを用いて、タグの設置を行っており、Webサイトに直接設置している人は少なくなってきたと思います。タグマネジメント・ツールを用いてタグを設置していると、HTMLのどの位置にタグを設置すべきか気にしない人がほとんどです。

さらに、noscriptタグの動きについては気にする人は皆無でしょう。また、JavaScriptを無効にしたブラウザも昨今ではほとんどみられないため、この誤りの影響はほとんどないと言えます。しかしながらそれでも、タグを展開する広告プラットフォームのベンダーには、noscriptタグを提供する以上、それが正しく動作することもきちんと検証し、正しい設置方法をアナウンスして欲しいものです。