【问题标题】:How would I put multiple Facebook tracking pixels on one web page?如何在一个网页上放置多个 Facebook 跟踪像素?
【发布时间】:2021-08-06 05:25:59
【问题描述】:

我们正在尝试使用 Facebook 的广告跟踪像素来跟踪广告。 我们查看了 Facebook 的文档,这让我无所适从。

我需要知道如何在一个页面上触发多个 Facebook 像素,因为我们有多个广告在运行。

我获取了它为每个像素提供的代码并将其放置在页面上,然后我们有一个购物车页面,我在其中触发或添加“购买”事件。但由于我有 3 次脚本,它似乎触发了 3 次。我希望它每像素触发一次。

这是我目前所拥有的:

<!-- Facebook Pixel Code - Ad 1-->
 <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','//connect.facebook.net/en_US/fbevents.js');

 fbq('init', 'xxxxxxxxxxxxx12');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});
 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx12&ev=PageView&noscript=1"
  /></noscript>
<!-- End Facebook Pixel Code -->

 <!-- Facebook Pixel Code - Ad 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','//connect.facebook.net/en_US/fbevents.js');

 fbq('init', 'xxxxxxxxxxxxx34');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});

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

 <!-- Facebook Pixel Code - Ad 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','//connect.facebook.net/en_US/fbevents.js');

 fbq('init', 'xxxxxxxxxxxxx56');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});
 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx56&ev=PageView&noscript=1"
  /></noscript>
<!-- End Facebook Pixel Code -->

这是这样做的方法吗?或者我是否需要做一些不同的事情,以便购买事件不会被触发 4 次。我正在使用 Chrome 的 FB Pixel Helper 插件来确保所有像素都在触发,但我收到一个错误,它们会触发多次。

我会做这样的事情吗?

 <!-- Facebook Pixel Code - ALL ADS-->
 <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','//connect.facebook.net/en_US/fbevents.js');

 fbq('init', 'xxxxxxxxxxxxx12');
 fbq('init', 'xxxxxxxxxxxxx34');
 fbq('init', 'xxxxxxxxxxxxx56');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});
 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx12&ev=PageView&noscript=1"
  /></noscript>
<!-- End Facebook Pixel Code -->

【问题讨论】:

  • 我刚刚尝试过这个,通过多个 init 调用,它似乎正在工作(chrome 帮助程序中没有错误)但是我稍后会在客户端确认 ti 时在这里更新与否!
  • 你解决了吗?

标签: javascript facebook


【解决方案1】:

我遇到了同样的问题,但在任何地方都找不到解决方案。我深入研究了代码,发现了一种可以使用的方法,称为“addPixelId”。在我的测试中,您可以在“init”之后使用它,这将添加第二个 ID。您跟踪的任何事件现在都将发送到这两个 ID。例如:

fbq('init', 'xxxxxxxxxxxxx12');
fbq('addPixelId', 'xxxxxxxxxxxxx34');
fbq('addPixelId', 'xxxxxxxxxxxxx56');
fbq('track', 'PageView');

唯一需要注意的是,您跟踪的任何事件都将针对您定义的所有 ID 进行跟踪。它对我来说一直很棒,没有任何问题。

【讨论】:

  • source code,表明initaddPixelId 方法实际上在做同样的事情。使用addPixelId 的缺点是您会收到一条警告“检测到多个具有冲突版本的像素”。我想 Facebook 正试图弃用这种方法,所以最好采用 OP 建议的解决方案。
  • @AaronBlenkush — 在发表此评论时同时使用 initaddPixelId 时会出现该警告。
  • 没错。你不需要addPixelId。只需使用init
【解决方案2】:

只需将以下代码放入一个 JS 文件中: //Facebook 多像素

    (function() {
        var fbq = (function() {
            function fbq()
            {
                if(arguments.length > 0) {
                    var action, pixel_id, type_track, content_obj;

                if( typeof arguments[0] == "string") action = arguments[0];
                if( typeof arguments[1] == "string") pixel_id = arguments[1];
                if( typeof arguments[2] == "string") type_track = arguments[2];
                if( typeof arguments[3] == "object") content_obj = arguments[3];

                var params = [];
                if(typeof action == "string" && action.replace(/\s+/gi, "") != "" && 
                   typeof pixel_id == "string" && pixel_id.replace(/\s+/gi, "") != "" &&
                   typeof type_track == "string" && type_track.replace(/\s+/gi, "")) {

                    params.push("id=" + encodeURIComponent(pixel_id));
                    switch(type_track) {
                        case "PageView":
                        case "ViewContent":
                        case "Search":
                        case "AddToCart":
                        case "InitiateCheckout":
                        case "AddPaymentInfo":
                        case "Lead":
                        case "CompleteRegistration":
                        case "Purchase":
                        case "AddToWishlist":
                            params.push("ev=" + encodeURIComponent(type_track));
                            break;
                        default:
                            return;
                    }

                    params.push("dl=" + encodeURIComponent(document.location.href));
                    params.push("rl=" + encodeURIComponent(document.referrer));
                    params.push("if=false");
                    params.push("ts=" + new Date().getTime());

                    if(typeof content_obj == "object") {
                        for(var u in content_obj) {
                            if(typeof content_obj[u] == "object" && content_obj[u] instanceof Array) {
                                if(content_obj[u].length > 0) {
                                    for(var y=0; y<content_obj[u].length; y++) { content_obj[u][y] = (content_obj[u][y]+"").replace(/^\s+|\s+$/gi, "").replace(/\s+/gi," ").replace(/,/gi, "§"); }
                                    params.push("cd[" + u + "]=" + encodeURIComponent(content_obj[u].join(",").replace(/^/gi, "[\"").replace(/$/gi, "\"]").replace(/,/gi, "\",\"").replace(/§/gi, "\,")));
                                }
                            }
                            else if(typeof content_obj[u] == "string")
                                params.push("cd[" + u + "]=" + encodeURIComponent(content_obj[u]));
                        }
                    }

                    params.push("v=" + encodeURIComponent("2.5.0"));                                

                    if(typeof window.jQuery == "function") {
                        var iframe_id = new Date().getTime();
                        jQuery("body").append("<img height='1' width='1' style='display:none;width:1px;height:1px;' id='fb_" + iframe_id + "' src='https://www.facebook.com/tr/?" + params.join("&") + "' />");
                        setTimeout(function() { jQuery("#fb_" + iframe_id).remove(); }, 1000);
                    }




                }


            }
        }

    return fbq;
    });

window.fbq = new fbq();
})();

然后,用法示例:

fbq('track', "<PIXEL_ID>", "PageView");

fbq('track", "<PIXEL_ID>", "ViewContent", {
                 content_name: "name test",
                 content_category: "category test",
                 content_ids: ["test"],
                 content_type: "product",
                 value: 7.99,
                 currency: "GBP"
          });

等等。

【讨论】:

    【解决方案3】:

    这是我基于 Facebook 源代码(基于https://developers.facebook.com/)推荐的当前工作方法。多次使用“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');
    fbq('init', '158xxxxxxxxxx911');
    fbq('init', '180xxxxxxxxxx762');
    fbq('init', '125xxxxxxxxxx694');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=180xxxxxxxxxx762&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    

    【讨论】:

    • 你能参考一下facebook在哪里推荐这个吗?
    • @ThangPham 我之前的回答具有误导性。我在任何地方都找不到 Facebook 推荐在一个页面中进行多像素跟踪的任何方法。因此,我根据 Facebook 的源代码设计了这种代码方法,并证明它可以在我自己的多像素环境中工作。
    • Facebook 开发团队正在使用这种代码方法,可以通过在此处查看页面源代码来引用:developers.facebook.com -- 请注意他们如何也只使用 1 个 img 像素 -- 而不是多个图像。
    【解决方案4】:

    问题在于 Facebook Pixel 代码/初始化可能需要一点时间来加载,更不用说用户的连接和设备也会影响初始化时间。

    您不想将代码粘贴三次。

    首先调用引用fbevents.js库的核心FB JS Pixel代码

    !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');
    

    然后创建您的像素 ​​ID 数组

    // Array of FB PixelIDs
    var pixel_ids = ['xxx111','xxx222'];
    

    遍历数组并以很小的延迟调用每个像素初始化。我会调整它以满足您的需求。您需要使用闭包函数来确保分配正确的数组值。

    // Iterate over the ids and ensure each one is initialized
    for (var i = 1; i <= pixel_ids.length; i++){
      // Add delay here to allow each pixel to instantiate
      setTimeout(function(x) { return function() {fbq('init',x.toString());};
        }(pixel_ids[i-1]), 33*i);
    }
    

    现在是时候调用您的实际跟踪事件也有延迟,以确保它们在像素初始化后被触发。

    setTimeout(function() { fbq('track', "PageView");}, (33*pixel_ids.length)+33);
    setTimeout(function() { fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});},(33*pixel_ids.length)+66);
    

    为了更好的衡量,为每个像素设置一个 HTML 无脚本调用 PageView

    <noscript><img height="1" width="1" style="display:none"   
    src="https://www.facebook.com/tr?id=xxx111&ev=PageView&noscript=1"/>
    </noscript>
    <noscript><img height="1" width="1" style="display:none"   
    src="https://www.facebook.com/tr?id=xxx2222&ev=PageView&noscript=1"/>
    </noscript>
    

    触发的事件数应等于您拥有的像素数乘以事件数(即为每个像素注册的每个事件)...如果您实施正确,则不应出现错误。

    【讨论】:

    • 不需要超时。 Facebook 的代码是异步的,这意味着一旦您创建了 fbq 函数(您添加到页面的代码),Facebook JS 代码是否已经加载都没有关系。如果代码没有加载,它会将项目推送到数组中,一旦代码加载,它将解析数组,然后代码将立即执行。它类似于 Google Analytics 的工作原理。
    【解决方案5】:

    如果您只想跟踪某些像素 ID 的某些事件,另一种解决方案就是使用无 JavaScript 方法

    您可以在他们的文档中看到一些示例:https://developers.facebook.com/docs/facebook-pixel/api-reference

    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=MyCustomEvent&amp;cd[custom_param]=custom_value"
    />
    
    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"
    />
    

    您只需要正确设置参数格式即可。

    【讨论】:

      【解决方案6】:

      @ClosDesign,你在正确的轨道上!正如您所怀疑的,您可以多次调用fbq('init', '[your-pixel-id]'),这会将每个像素 ID 添加到将跟踪所有事件的 ID 列表中。关于在一个网站上使用多个 Facebook 像素的问题,我写了一封 blog post,请阅读此处了解更多详细信息。

      使用您的示例代码,您首先要包含 Facebook 的 JavaScript 像素代码。这将从 Facebook 加载所需的 JavaScript,以便使用其fbq 对象发送像素事件:

      !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','//connect.facebook.net/en_US/fbevents.js');
      

      然后,是时候init 所有像素 ID:

      fbq('init', 'xxxxxxxxxxxxx12');
      fbq('init', 'xxxxxxxxxxxxx34');
      fbq('init', 'xxxxxxxxxxxxx56');
      

      使用fbq('init') 初始化网站上的所有像素ID 后,使用Facebook Pixel Helper 确认所有像素都已加载。您还可以通过在 JavaScript 控制台中运行以下代码来手动确认它们是否已加载:

      fbq.getState().pixels
      

      之后,您对track 事件的任何调用都将被跟踪到您在上面初始化的所有像素 ID。所以如果你打电话:

      fbq('track', "PageView");
      

      PageView 事件将针对所有三个像素发送到 Facebook。您的 Purchase 事件的工作方式相同。

      当涉及到 Facebook 包含的 &lt;noscript&gt; 标签时,您需要为要在您的网站上调用的每个像素 ID 添加一个 &lt;img&gt; 标签:

      <noscript>
          <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx12&ev=PageView&noscript=1" />
          <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx34&ev=PageView&noscript=1" />
          <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx56&ev=PageView&noscript=1" />
      </noscript>
      

      请注意,如果用户关闭了 JavaScript,那些 &lt;img&gt; 标签只会向 Facebook 发送请求以跟踪 PageView 事件。除非您为每个像素 ID 创建另一个 &lt;img&gt; 标记并指定用于跟踪 Purchase 事件的数据,否则不会跟踪 Purchase 事件。

      下一个很自然的问题是,“我能否仅将事件跟踪到我网站上初始化的多个像素之一?”不使用 Facebook 的 fbq 对象,不。

      不过,这里有一个workaround。使用上面的&lt;img&gt; 标签方法,您可以将事件发送到 Facebook,并且只将事件跟踪到一个像素 ID。此方法完全绕过fbq 对象,并使用您指定的事件信息动态构建&lt;img&gt; 标记。

      代码

      (function (window, document) {
          if (window.myfbq) return;
          window.myfbq = (function () {
              if (arguments.length > 0) {
                  var pixelId, trackType, contentObj;
      
                  if (typeof arguments[0] == 'string') pixelId = arguments[0];
                  if (typeof arguments[1] == 'string') trackType = arguments[1];
                  if (typeof arguments[2] == 'object') contentObj = arguments[2];
      
                  var params = [];
                  if (typeof pixelId === 'string' && pixelId.replace(/\s+/gi, '') != '' &&
                  typeof trackType === 'string' && trackType.replace(/\s+/gi, '')) {
                      params.push('id=' + encodeURIComponent(pixelId));
                      switch (trackType) {
                          case 'PageView':
                          case 'ViewContent':
                          case 'Search':
                          case 'AddToCart':
                          case 'InitiateCheckout':
                          case 'AddPaymentInfo':
                          case 'Lead':
                          case 'CompleteRegistration':
                          case 'Purchase':
                          case 'AddToWishlist':
                              params.push('ev=' + encodeURIComponent(trackType));
                              break;
                          default:
                              return;
                      }
      
                      params.push('dl=' + encodeURIComponent(document.location.href));
                      if (document.referrer) params.push('rl=' + encodeURIComponent(document.referrer));
                      params.push('if=false');
                      params.push('ts=' + new Date().getTime());
      
                      if (typeof contentObj == 'object') {
                          for (var u in contentObj) {
                              if (typeof contentObj[u] == 'object' && contentObj[u] instanceof Array) {
                                  if (contentObj[u].length > 0) {
                                      for (var y = 0; y < contentObj[u].length; y++) { contentObj[u][y] = (contentObj[u][y] + '').replace(/^\s+|\s+$/gi, '').replace(/\s+/gi, ' ').replace(/,/gi, '§'); }
                                      params.push('cd[' + u + ']=' + encodeURIComponent(contentObj[u].join(',').replace(/^/gi, '[\'').replace(/$/gi, '\']').replace(/,/gi, '\',\'').replace(/§/gi, '\,')));
                                  }
                              }
                              else if (typeof contentObj[u] == 'string')
                                  params.push('cd[' + u + ']=' + encodeURIComponent(contentObj[u]));
                          }
                      }
      
                      params.push('v=' + encodeURIComponent('2.7.19'));
      
                      var imgId = new Date().getTime();
                      var img = document.createElement('img');
                      img.id = 'fb_' + imgId, img.src = 'https://www.facebook.com/tr/?' + params.join('&'), img.width = 1, img.height = 1, img.style = 'display:none;';
                      document.body.appendChild(img);
                      window.setTimeout(function () { var t = document.getElementById('fb_' + imgId); t.parentElement.removeChild(t); }, 1000);
                  }
              }
          });
      })(window, document);
      

      用法

      myfbq("[your-pixel-id]", "PageView");
      myfbq("[your-pixel-id]", "ViewContent");
      myfbq("[your-pixel-id]", "ViewContent", { content_type: "product", content_ids: ['892185001003'] });
      

      【讨论】:

      • 嗨。我知道这个问题已经有一段时间了,但是2.7.19 在这条线上是什么意思:params.push('v=' + encodeURIComponent('2.7.19')); 我猜这是一个版本,但是从什么开始?如果我想使用 FB 最新更新,我想我应该使用最新版本。有什么猜测吗?
      • @NestorVillalobos 正确。该特定参数正在指定版本号。 2.7.19 是我在构建脚本之前看到的fbq 事件中的版本号,所以这是我在脚本中指定的版本号。如果您看到更新的版本号,请随时尝试。虽然如果他们自 2.7.19 起更改了功能,您需要添加一些他们现在需要的额外属性或类似的东西。
      【解决方案7】:

      根据FB的推荐,追踪不同的事件到不同的像素是很容易的:

      fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
      fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);
      

      https://developers.facebook.com/docs/facebook-pixel/api-reference#tracking-events-for-individual-pixels

      【讨论】:

        【解决方案8】:

        希望在他们的文档中提供有关在页面上使用多个像素的最新链接:https://developers.facebook.com/docs/facebook-pixel/advanced#multipixels

        下面是代码示例:

        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
        });
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-08-31
          • 2015-05-21
          • 1970-01-01
          • 2013-01-10
          • 2020-09-19
          • 1970-01-01
          相关资源
          最近更新 更多