web-dev-qa-db-ja.com

Facebookコンバージョンピクセルの起動

私はまだJavaScriptにかなり慣れていませんが、「確認」/「ありがとう」ページを実際にロードせずにFacebook変換ピクセル（下記）を起動する最良の方法は何だろうと思っていましたか？

<script type="text/javascript">
var fb_param = {};
fb_param.pixel_id = 'XXXXXXXXXXX';
fb_param.value = '0.00';
fb_param.currency = 'USD';
(function(){
  var fpw = document.createElement('script');
  fpw.async = true;
  fpw.src = '//connect.facebook.net/en_US/fp.js';
  var ref = document.getElementsByTagName('script')[0];
  ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript><img height="1" width="1" alt="" style="display:none"
src="https://www.facebook.com/offsite_event.php?id=XXXXXXXXXX&amp;value=0&amp;currency=USD" /></noscript>

Facebookは、これを訪問者が変換（フォームへの入力、購入など）した後に表示される「ありがとうページ」に挿入する必要があると述べています。ただし、一部のフォームはポップアップまたはサイドバー上のコンテンツの横にあるフォームであり、確認ページによって読者を誘導しないようにします。

Googleアナリティクスでは、_gaq.Push（['_ trackPageview']）;を実行することで「非表示」のページビューを作成できます。 GAその非表示のページビューを目標の完了としてカウントする必要があることを伝えることができるコード。

私のサイトにFBピクセルを呼び出すように指示するのに十分な一般的なものはありますか？

javascriptfacebookgoogle-analyticsanalytics
16
dataprointhemaking

編集：私が以前に述べたことがうまくいかなかったので、コードを更新しました。指摘してくれた@Flambinoに感謝します。

これは、変換ピクセルを渡すためにスクリプトではなくピクセルを使用する私の修正された回答です。私は Google Adwordsコンバージョンonclickを追跡する方法？ SO投稿を参照します：

<head>
<script type="text/javascript"> 
function facebookConversionPixel(fb_pixel, fb_value){
    var image = new Image(1,1); 
    image.src = "//www.facebook.com/offsite_event.php?id=" + fb_pixel + "&amp;value=" + fb_value + "&amp;currency=USD";
}
</script>
</head>

<body>
<a href="#" onclick="facebookConversionPixel(123456,0.00);">FBCONV</a>
</body>
14
Blexy

FBドキュメントから "ページはめ込みイベントを追跡する方法" ：

基本コードスニペットをインストールした後、HTML DOM要素にさまざまなイベントハンドラーを登録することにより、コンバージョンピクセルに対して_fbq.Push（ 'track'）呼び出しを行うことにより、ボタンのクリックなどのページはめ込みアクションを追跡できます。例えば：

function trackConversionEvent(val, cny) {
  var cd = {};
  cd.value = val;
  cd.currency = cny;
  _fbq.Push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');" />
8
Patrick Berkeley

元のコード全体を選択したイベントに移動するだけです。次に、コードの一部を変更します。あなたがしなければならないことは、fb_paramローカルではなくグローバル。

コメントで以下を参照してください

$('.button').click(function() {
    window.fb_param = {}; // must be global by adding `window.`
    fb_param.pixel_id = '123456789';
    fb_param.value = '0.00';
    fb_param.currency = 'USD';
    (function(){
        var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js';
        var ref = document.getElementsByTagName('script')[0];
        ref.parentNode.insertBefore(fpw, ref);
    })();
});
5
Tallboy

Facebookはピクセルを更新したので、パラメーターを動的に組み合わせてFacebookに送信する呼び出し用の独自のカスタム関数を作成しました。

ステップ1.すべてのページで、ページのhead要素で ピクセルを初期化した であることを確認します。

ステップ2.作成したこのカスタム関数を追加します（最初のドラフトなので少し冗長なので、メリットのために最適化する方法は確かにあります）。

triggerFacebookPixel: function(type, price, product_id, product_name, product_category, num_items) {
    //See https://developers.facebook.com/docs/ads-for-websites/pixel-events/v2.8#events for documentation
    //type = "ViewContent"|"AddToCart"|"Search"|"AddToWishlist"|"InitiateCheckout"|"AddPaymentInfo"|"Purchase"|"Lead"|"CompleteRegistration"
    //product_id = Numeric Product ID. String or Integer accepted for single product events, or an array of integers for multiple products.
    //price = Decimal/Float number of individual product's price or total price paid in conversion, or the user's status for 'CompleteRegistration'
    //product_name = Optional. String of individual product's name or string of search query
    //product_category = Optional. String of product category, hierarchy's accepted. E.g. "Clothing > Shirts > Men's > T-Shirts"
    //num_items = Optional. Total number of products.
    var data = {
        value: typeof(price) == 'string' ? parseFloat(price) : price,
        currency: 'USD'
    }
    switch (type) {
        case 'Search':
            data.content_ids = product_id;
            data.search_string = product_name;
            if (product_category !== undefined && product_category != '') {
                data.content_category = product_category;
            }
            break;
        case 'Lead':
            data.content_name = product_name;
            data.content_category = product_category;
            break;
        case 'CompleteRegistration':
            data.status = product_id;
            data.content_name = product_name;
            break;
        default:
            //Product Specific Calls
            //ViewContent|AddToCart|AddToWishlist|InitiateCheckout|AddPaymentInfo|Purchase
            if (num_items == 1) {
                data.content_ids = [typeof(product_id) == 'string' ? parseInt(product_id) : product_id];
                data.content_category = product_category;
                data.content_name = product_name;
            } else {
                data.content_ids = product_id;
            }
            //"num_items" is only a parameter used in these two types
            if (type == 'InitiateCheckout' || type == 'Purchase') {
                data.num_items = num_items
            }
            //"content_type" is only a parameter used in these three types
            if (type == 'Purchase' || type == 'AddToCart' || type == 'ViewContent') {
                data.content_type = 'product';
            }
            break;
    }
    fbq('track', type, data);
}

ステップ3.適切なパラメーターを指定してその関数を呼び出します。

購入後のお礼のポップアップの場合、ユーザーが複数のアイテムではなく1つのアイテムを購入した場合、ピクセルの起動方法は異なります。基本的に、Facebookは製品が1つの製品の場合は製品名とカテゴリーのパラメーターを受け入れますが、複数の製品の場合はこれらのパラメーターを受け入れません。

以下の例では、1つのアイテムを購入するユーザーのサンプル商品データをいくつか示します。

  • 商品名：「マイスーパーオーサムTシャツ」
  • 商品ID：182
  • 製品カテゴリ：「衣類>シャツ> Tシャツ」
  • ユーザーが支払った合計金額（送料/手数料と税金を含む）：$ 10.84

そして、確認時に呼び出す関数は次のとおりです。

triggerFacebookPixel('Purchase', 10.84, 182, 'My Super Awesome T-Shirt', 'Clothing > Shirts > T-Shirts', 1);

ユーザーが複数のアイテムを購入すると、ピクセルはそれを異なる方法で処理し、製品名とカテゴリを除外して、IDのみを送信します。それでは、ユーザーがこれら2つのアイテムを購入したとしましょう。

  • 製品ID：182と164（シャツなど）
  • ユーザーが支払った合計金額（送料/手数料および税金を含む）：$ 24.75

これは、関数の使用方法です。

triggerFacebookPixel('Purchase', 24.75, [182, 164], '', '', 2);

製品に関するその他の Facebookで定義されている標準イベント の場合、この同じ関数を「ViewContent」、「AddToCart」、「AddToWishlist」、「InitiateCheckout」、および「AddPaymentInfo」に使用できます。 「購入」を通話のキーワードのいずれかに変更するだけです。

その他のイベントは、必ずしも製品に関連しているわけではありません。「リード」、「検索」、および「完全登録」です。このようなキーワードに対しても、この関数を使用できます。

例：ユーザー「青いシャツ」を検索：

triggerFacebookPixel('Search', 0, [], 'blue shirts');

ユーザー検索関数で商品カテゴリを渡す場合は、最後に文字列として渡すことができます。ユーザーがどのカテゴリを検索しているのかがわかるユースケースシナリオは考えられません。製品が検索結果に表示され、ユーザーが検索ページから製品をクリックした場合にこれを使用しない限り。それがこの関数の実際の目的である可能性がありますが、ドキュメントはそのことについてはかなり明確ではありません。その場合は、0と空の配列を、検索結果ページからクリックされた製品の実際の値（それぞれ価格と製品ID）に変更し、最後のカテゴリとして文字列としてそのカテゴリを追加します。検索文字列の後のパラメータ。

例：ユーザーがニュースレターにサインアップしたフォームを送信しました：

triggerFacebookPixel('CompleteRegistration', 0, 'Signed Up', 'Newsletter');

Facebookのドキュメントには、「CompleteRegistration」は、登録フォームに入力するときに使用する必要があると記載されています。サービスの完全なサブスクリプション/サインアップ。 「Signed Up」文字列は「status」パラメータで、「Newsletter」文字列は「content_name」パラメータです。

例：ユーザーが、提供するサービスの30日間の無料試用にサインアップしたフォームを送信しました（そのため、サービスはleadになりました）、サービスの名前は「30日間無料トライアルサービス」で、「マイサービス」カテゴリのサブカテゴリ「無料トライアル」にあります。

triggerFacebookPixel('Lead', 0, 'Free 30-Day Trial Service', 'My Services > Free Trials');

Facebookのドキュメントには、「リード」とはサインアップが完了したときであると記載されています。価格をクリックして、トライアルにサインアップしてください。サービスの名前はパラメーター「content_name」であり、サービスのカテゴリーは「content_category」パラメーターであると想定しました。

0
Tessa

私は同様の種類の問題を抱えていたので、ピクセルコードを追跡するために複数の追加を実行したいのですが、追跡できなかった理由があります。私がしたことは、現在のページで、フッターにピクセルコードを追加し、ajaxボタンが送信されたときに呼び出すJavaScript関数を追加したことです。

最初にFacebookのドキュメントページを参照してください

https://developers.facebook.com/docs/ads-for-websites/conversion-pixel-code-migration#multi-conv-events

複数のコンバージョンイベントを追跡する方法

基本コードスニペットをインストールした後、各コンバージョンピクセルIDに対して複数の_fbq.Push（ 'track'）呼び出しを行うことにより、同じWebページ内の複数のコンバージョンを追跡できます。例えば：

_fbq.Push(['track','<pixel_id1>',{'value':'10.00','currency':'USD'}]);
_fbq.Push(['track','<pixel_id2>']);

ページはめ込みイベントを追跡する方法

基本コードスニペットをインストールした後、HTML DOM要素にさまざまなイベントハンドラーを登録することでコンバージョンピクセルに対して_fbq.Push（ 'track'）呼び出しを行うことにより、ボタンのクリックなどのページはめ込みアクションを追跡できます。例えば：

function trackConversionEvent(val, cny) {
  var cd = {};
  cd.value = val;
  cd.currency = cny;
 _fbq.Push(['track', '<pixel_id>', cd]);
 }
 <button onClick="trackConversionEvent('10.00','USD');" />

また、Facebookピクセルトラッキングコードchromeアドオンを追加し、Facebookピクセルヘルパーページを参照してください： https://developers.facebook.com/docs/ads-for-websites/pixel -トラブルシューティング

以下の解決策/回答を参照してください

現在のページのFacebookトラッキングコード（function（）{var _fbq = window._fbq ||（window._fbq = []）; if（！_fbq.loaded）{var fbds = document.createElement（ 'script'）; fbds .async = true; fbds.src = '//connect.facebook.net/en_US/fbds.js'; var s = document.getElementsByTagName（ 'script'）[0]; s.parentNode.insertBefore（fbds、s） ; _fbq.loaded = true;}}）（）; window._fbq = window._fbq || []; window._fbq.Push（['track'、 'yourid'、{'value'： '1.00'、 'currency'： 'USD'}]）;

  <!-- Facebook Conversion -->
  <script>(function() {
  var _fbq = window._fbq || (window._fbq = []);
  if (!_fbq.loaded) {
   var fbds = document.createElement('script');
  fbds.async = true;
  fbds.src = '//connect.facebook.net/en_US/fbds.js';
  var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(fbds, s);
  _fbq.loaded = true;
  }
  })();
  window._fbq = window._fbq || [];
  window._fbq.Push(['track', 'yourid', {'value':'1.00','currency':'USD'}]);
  </script>

そして、ajaxフォームが送信またはボタンをクリックしたときに呼び出すJavaScriptコード

 <script>
 function trackConversionEvent(val, cny) {
 var cd = {};
 cd.value = val;
 cd.currency = cny;
 _fbq.Push(['track', 'yourid1', cd]);
 _fbq.Push(['track', 'yourid1', cd]);

 }
</script>

そして、ajaxが呼び出されたときに関数を呼び出します

jQuery(form).ajaxSubmit({

   type:"POST",

   data: $(form).serialize(),

   url:"process.php",

    success: function() {
    **trackConversionEvent**('1.00','USD');
   }
   ......
0
Sabir Abdul Gafoor Shaikh