Facebook Pixel进阶——事件代码及封装函数的使用

如果你的网站是利用BigCommerce、Magento、Shopify等搭建的，那么要求就在于创建Facebook Pixel，然后把Facebook Pixel ID粘贴到模板指定位置。

这篇文章主要针对的是需要手动安装Pixel事件代码的网站。可能对于很多小白来说，Pixel感觉是很高深的东西，因为懂Facebook的往往不懂码，懂码的往往不懂Facebook。

这篇文章，主要是帮助各位，在独立站上正确地安装事件代码，并且借助封装函数，把多个事件代码更简洁地安装到网站代码中。希望看完这篇文章之后，各位能够懂得甚至独立地安装Facebook 事件代码（Facebook Event Pixel）到自己的独立站！

一、准备工作

首先需要准备两样东西：

• 一个知道Facebook Pixel在哪里的人（如果不知道，看看上面的文章就懂了）
• 一个懂码的人（如果不懂，看下去应该也能看得懂）
  

二、选择并且整合自己想要的Pixel事件代码

选择自行手动安装代码：

来到如下页面，点击添加事件

点击“添加事件”之后，出现

看到红色框里面的9个Facebook标准事件，对于一般商城来说都已经很足够了，简单点比如我需要追踪加入购物车、购物这两个事件，这两个也是商城重要的转化指标，然后把左边的按钮打开就可以看到对应的脚本。

进而看到如下页面，选择用户操作时我们需要追踪事件（以用户加入购物车为例）：

上面的中文全都是字面意思，比如转化价值和货币，可填可不填，填上去之后可以看出加入购物车给自己带来多少收益，可是加入购物车很难量化，懒人表示是绝对不会动它的。

重点在那段< script >< /script >代码，这段代码需要在加载完Facebook Pixel基代码之后，才可以实现被触发。

这里之前都是看看点点的操作。

重点来了

1、把需要调用的事件代码用函数封装起来

封装函数？什么鬼？

如果不懂的话，参考下面那一段（已经封装好的函数）就行了，不可以直接复制，因为有空格=。=

                < script type="text/javascript" >                        //加入购物车                        function fbpAddToCart() {                                fbq('track', 'AddToCart');                        }                        //购买                        function fbpPurchase() {                                fbq('track', 'Purchase');                        }                < /script >        

有没有发现，上面function里面的内容，就是与< script >< /script >标签里的内容一毛一样？就是要一毛一样，封装起来以后调用。

2、把上面那段东西，放在和Pixel基代码同样的公共文件（网站所有页面都包含的）里面，位置是在< /head >标签后面！在< /head >标签后面！在< /head >标签后面！一定是要在< /head >后面！这样做的目的是，确保网站先加载完基代码，再加载这段封装好的函数。

三、在特定位置调用相关

这一步需要薛微懂码的人操作 =。=

我尽量以最简单的语言解释。

上面第二大点之所以要封装起来，是因为以后调用就不需要每次都写一大段script，这样网站的代码会很好看哦！

接下来就是在Add to Cart按钮上面调用，举个栗子，如果Add to Cart按钮是< input >标签的，则需要在点击这个按钮的时候，触发加入购物车事件。

然后你需要做的就是加一句话（红色加粗那句）：

< input type="button" name="" value="Add to Cart" >

这样，Facebook Pixel就可以追踪到用户在网站上加入购物的行为了！也会把结果反映在Facebook Analytics的数据页面。

如果是< button >< /button >、< a >< /a >这些，也是加那一句就OK了！

至于购物按钮，千万不要在付款完成之前的按钮（结账、购买等字样）上面添加触发事件！千万不要在付款完成之前的按钮（结账、购买等字样）上面添加触发事件！千万不要在付款完成之前的按钮（结账、购买等字样）上面添加触发事件！因为用户点击了购物按钮，也并不表明用户完成下单付款——数据显示：70%的用户在将产品加入购物后并没有成功付款、比如，如果没有登录没有填写收货地址，没有添加支付信息，支付没有成功等等。所以，加入购物车并不能算作用户付款，不要在付款之前的按钮上触发购买事件。否则，Facebook Pixel统计的购买数据会和实际的购买数据会有很大的差距！

因此，在设置网站的时候，需要给一个返回页！意思是：用户跳出网站付款完成之后，要跳转回自己网站，给一个弹窗，告诉买家购买成功，然后让买家点击确定！；类似于淘宝购物，在成功下单付款后，我们会看到一个成功付款信息的页面，并且告知我们卖家在多少天会发货之类！木有错，就是在这个确定按钮触发购买事件！

如下：

< input type="button" name="" value="确定" >

这样，就能确保有且只有来到这个页面，点击确认之后，才完成购买，这样统计就准了！

经过以上步骤，基本上可以统计一个商城的最重要的转化指标，并且能够利用Facebook进行再营销了。至于其他Pixel事件，也可以按照这个思路。

总结一下，无非就是：

• 将代码封装起来，以便使用；
• 在适当位置调用函数。
  

其中需要注意的就是，一定要确保用户完成了这个事件才调用！就像购买一样，来到有且仅有付款后的购买成功页面点击确认才能算一次购买。

现在一般网站（真的是绝大部分网站）都会有返回页面，所以这个方面无需额外做设计和开发。

如果不懂码的话，叫上码农，和他谈需求就行了，然后给他看这篇东西，他会get到思路和步骤的。