一、 涉及平台
本教程展示如何通过Google Tag Manager来支持、管理Pixel代码,实现监控统计。
【使用到的网站】
Google Tag Manager(Google跟踪代码管理器,后文简称为GTM),是用于统一管理所有追踪代码(如Google Ads、GA4)的平台,单次配置成功后,后续事件不需要再修改网站代码,是非常方便的管理工具。
如果您同时做谷歌广告投放和搜索优化,建议使用此平台进行统一管理和监控。
Meta Business Suite(Meta商务管理平台,后文简称为Meta平台)是Meta为企业和营销人员提供的一体化、免费的管理中心,用于统一管理您在Facebook和Instagram上的所有资产、广告和互动。
二、 功能门槛
【版本】国际版
三、 步骤STEP1 安装GTM代码
请参考此指导完成:如何安装GTM代码
登录Meta平台(https://business.facebook.com/),如您未拥有脸书商业账号,请先进行基础注册。
进入后台,如图在所有工具中找到“事件管理工具”:
点击欢迎页面的“连接数据”按钮:
选择网站(web)类型后继续:
P.S. 如您的账号无法选择网站类型的数据源,并提示需要商务管理平台账户,如下:
是因为您没有创建“业务资产组合”,这个入口一般在新手入门指导出可见。
设置数据集名称后,点击创建即可。
创建成功后,在“数据集”中,找到“管理集成”入口:
添加集成工具:
选择类型为“Meta Pixel像素代码”:
点击设置后会自动进入像素代码设置界面,如下:
复制代码备用。
同时暂时保留此页面,请不要关闭。
STEP4 利用GTM插入Pixel基代码
切换到GTM平台,新增一个代码:
代码配置选择“自定义HTML”
将复制的pixel基代码粘贴到此处,触发条件先选择一个测试用的默认gtm事件(All pages网页预览,比较好触发),点击右上角保存按钮:
预览您的代码:
跳转您的官网成功后,确认刚才插入的代码是否被触发:
确认无问题即可发布最新的GTM代码版本。
发布成功后,回到meta平台设置像素代码界面,点击右下角“继续”按钮:
根据业务需要决定是否打开高级匹配:
最后点击完成即可。
回到我们的数据集页面,检查设置是否完成。
平台更新可能会有几秒延迟,刷新一下页面即可。
STEP5 配置转化事件
配置转化事件有两种方案:
方案一没有代码基础也能轻松设置,适用于基础的官网用户行为监控,如浏览、点击、跳转到指定链接等;
方案二结合meta提供的像素代码标准事件,能处理预约成功、加入购物车、购买成功等需要传递参数(如成交金额、产品名称等内容)的场景,但是需要您有少量代码读写基础。
请根据您的实际业务选择方案。
方案一
点击设置事件:
在打开的弹窗中填入您的网站,点击“添加事件”:
Meta会自动打开您的网站,在页面的左上角,有一个这样的浮窗,
点击“+ 追踪新按钮”:
按照meta的指引点击你要统计的按钮:
比如我想要统计contact us 按钮的点击情况。
点击contact us:
在选中按钮后的浮窗中,决定点击此按钮行为的事件类型,比如我选择了“预约”:
确定即可。
添加所有内容后,点击完成设置
回到Meta后台,我们新设置的事件同步有一定的延迟,等待数据更新后,即可看到我们之前添加的数据。
方案二
如Meta现有集成的代码不能满足您的业务需求,这个时候我们需要走“标准事件”的方案,主要是在GTM里操作;
比如要监控产品加入到购物车。
在GTM中创建一个名为“加入购物车”的触发器:
新增一个“在加入购物车行为触发后,需要向Meta推送数据”的自定义代码:
需要我们编写少量代码,此代码的基础结构为:
···
<script>
fbq('track', '事件名称', {
参数1 : 取值,
参数2 : 取值,
参数3 : 取值
});
</script>
···
不同标准事件的参数组成和具体的取值限制,需要参考Meta开发文档:https://developers.facebook.com/docs/meta-pixel/reference
后续研发计划中团队会在网站里集成标准事件,商家才可以跳过代码编写过程;目前需要商家手动填写。
预览确认逻辑无误:
点击提交发布最新的GTM版本。
最后回到meta平台检查推送是否成功(留意新事件更新可能会有半个小时的延迟,请耐心等待并刷新页面)。
如图,确认事件统计无误,即安装成功。