如何在一个网页上放置多个Facebook跟踪像素?

时间:2016-03-10 20:41:05

标签: javascript facebook

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

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

我拿了每个像素给我的代码并将其放在页面上然后我们有一个购物车页面,我在其中点火或添加“购买”#39;事件。但由于我有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 -->

8 个答案:

答案 0 :(得分:14)

我遇到了同样的问题,我无法在任何地方找到解决方案。我挖掘了代码并找到了一个名为&#34; addPixelId&#34;的方法。在我的测试中,你可以在&#34; init&#34;之后使用它,这将添加第二个ID。您跟踪的任何事件现在都会发送到这两个ID。例如:

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

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

答案 1 :(得分:5)

只需在一个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"
          });

等等。

答案 2 :(得分:2)

问题是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>

触发的事件数量应该等于事件数量的像素数(即每个像素注册的每个事件)......如果实现正确,则不应该出现错误。

答案 3 :(得分:2)

这是我推荐的基于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 -->

答案 4 :(得分:1)

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

使用您的示例代码,您首先要包含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");

将为所有三个像素向Facebook发送PageView事件。您的Purchase活动的工作方式相同。

对于Facebook包含的<noscript>代码,您需要为要在自己网站上调用的每个像素ID添加<img>代码:

<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,那些<img>标记只会向Facebook发送请求以跟踪PageView事件。除非您为每个像素ID创建另一个Purchase标记,并指定用于跟踪<img>事件的数据,否则不会跟踪Purchase事件。

一个自然的下一个问题是,“我是否可以仅在我网站上初始化的众多像素中跟踪一个事件?”不使用Facebook的fbq对象,没有。

然而,有一个workaround。使用上面的<img>标记方法,您可以将事件发送到Facebook,并仅将事件跟踪到一个像素ID。此方法完全绕过fbq对象,并使用您指定的事件信息动态构建<img>标记。

代码

(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'] });

答案 5 :(得分:1)

如果您只想跟踪某些像素ID的某些事件,另一种解决方案就是使用no-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 :(得分:1)

根据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

答案 7 :(得分:0)

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

代码示例如下:

VolDiscount = InputSheet.OLEObjects("VolDiscountBox").Object.Value