Facebook Pixel进阶——事件代码及封装函数的使用(含视频讲解)

Facebook Pixel进阶——事件代码及封装函数的使用(含视频讲解)
2017-12-19 12:04
阅读:  5093
字数:  2910
评论数:  8

———— Riva from 深圳拓扑

 

如果你的网站是利用BigCommerce、Magento、Shopify等搭建的,那么要求就在于创建Facebook Pixel,然后把Facebook Pixel ID粘贴到模板指定位置。(相关操作,可以参见我们上一篇:5.5 Facebook Pixel的概念、分类、功能、安装与检测

 

如果搞定,本文完=。=

 

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

 

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

 

一、准备工作

 

首先需要准备两样东西:

 
  1. 一个知道Facebook Pixel在哪里的人(如果不知道,看看上面的文章就懂了)
  2. 一个懂码的人(如果不懂,看下去应该也能看得懂)
 

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

 

来到如下页面:
https://www.facebook.com/ads/manager/pixel/facebook_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" onclick=" fbpAddToCart()" >

 

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

 

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

 

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

 

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

 

如下:

< input type="button" name="" value="确定" onclick=" fbpPurchase()" >

 

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

 

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

 

总结一下,无非就是:

  1. 将代码封装起来,以便使用;
  2. 在适当位置调用函数。
 

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

 

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

 

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

 

至于Facebook Pixel基代码的安装,就不说了,看看前面的文章就OK了。

 

本文真的完了,感谢收看=。= 


临别前,还有一份在课程上讲此内容的视频,各位也可以搭配着看看然后实操。

 
踩一下
0
参与评论
姓名:
手机: