代码安装|facebook像素安装及检测详解

网站做好之后，一个重要的事情就是要进行推广，投放广告。而为了追踪广告的效果，衡量广告的ROI，就需要在网站上安装各种各样的代码，检测用户的行为事件，以及最终生成了多少订单。这么一个流程，就需要配合各大广告平台安装对应的代码，而facebook的像素，就是其中一个很重要的部分。

在像素代码中，事件分为两种，一种是浏览事件，一种是点击事件。浏览事件是网页打开加载就触发该事件。而点击事件，顾名思义，当点击某个位置或者按钮的时候触发此类事件。常用的时间如下图：

安装顺序就是初始化写入基础代码，包含像素id：

粘贴在网站所有页面的标头标签之间
<!-- 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', 'XXXXXX'); 
fbq('track', 'PageView');
</script>
<noscript>
 <img height="1" width="1" 
src="https://www.facebook.com/tr?id=209037849672232&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

接着在不同的页面写入不同的时间，浏览事件写法如下：

jQuery(function () {
        fbq('track', 'ViewContent', {
            content_type: "product",
            content_ids: ["638"],
            content_name: 'Talever',
            content_category: "Dresses",
            value: 29.9000,
            currency: "EUR"
        });

    })

点击事件如下：

jQuery(function () {
        jQuery(".add_to_cart_btn").click(function () {
            fbq('track', 'AddToCart', {
                content_name: 'Really Fast Running Shoes',
                content_category: 'Apparel ',
                content_ids: ['1234'],
                content_type: 'product',
                value: 4.99,
                currency: 'USD'
            });
        });
    })   

另外说两点，一是purchase事件是写入到成功页面的，并传递对应的参数数据，方便统计广告回报，但由于受到网络环境，打开速度，设备差异等的影响，数据可能会存在一些偏差，如果是小范围的偏差，都算是合理范围之内。如果大范围数据丢失，就需要考虑代码安装的位置是否异常。二是有些form按钮事件，比如注册事件，加购事件，下单事件，一定要在form的必填项校验完成之后再触发时间，这样的统计才会精确，如不校验form，每一次都触发，可能会导致数据不精准。

代码安装之后判断是否安装成功，需要通过第三方的工具检测。工具名字叫Facebook Pixel Helper，是谷歌浏览器的一个扩展，安装后可以通过顶部的插件检测页面的事件是否加载。切记，检测的时候打开翻墙，只有在翻墙状态下才能够加载上fb的基础js，才能进一步的触发事件。