什么是Facebook Pixel？前端如何接Facebook Pixel打点追踪用户行为

知识共享者

于 2024-06-07 16:55:12 发布

阅读量520

点赞数 5

文章标签： facebook

本文链接：https://blog.csdn.net/2301_79267034/article/details/139413344

版权

2Facebook Pixel 是一种分析工具，帮助你衡量广告成效，并了解用户如何与网站互动。通过在网站中嵌入代码片段，Facebook Pixel 可以跟踪用户在网站上的行为，并将这些数据发送到Facebook。具体功能包括：

事件跟踪：记录用户在网站上的具体操作，如页面浏览、添加到购物车、完成购买等。
优化广告：通过分析用户行为数据，Facebook可以优化广告投放，提升广告的转化率。
再营销：根据访问过你网站的用户数据，创建自定义受众，进行精准再营销。
分析和报告：提供详细的用户行为数据报告，帮助你了解广告的效果，并调整营销策略。

如何工作

Facebook Pixel 通过在你的网站中插入一段JavaScript代码来运行。这个代码会收集和发送用户活动数据到Facebook，允许你监控用户在广告点击后的行为，评估广告成效，并调整广告策略。

设置步骤

创建Pixel：在Facebook广告管理工具中创建一个新的Pixel。
获取代码：获得Pixel代码片段。
添加到网站：将代码添加到网站的每个页面，通常放在<head>标签中。
验证和测试：使用Pixel Helper扩展工具验证Pixel是否正确安装，并测试事件跟踪功能。

示例代码

下面是一个示例代码片段，用于在网站中安装Facebook Pixel：必须添加在标签<head>的最上面

在这个代码片段中，你的像素ID需要替换成你实际的Facebook Pixel ID。

前端工作：

拿vue3举例：

Facebook Pixel像素代码可以是后端接口返回到前端，我们可以将Facebook Pixel代码写在vue3

项目的App.vue页面中，这样我们哪里需要直接调用就可以了。

1、Facebook Pixel脚本添加：

<script>
//注意写在template里
<div ref="scriptContainer"></div>

import {GetAdvertisementChannel} from '@/api'

declare global {
	interface Window {
		fbq?: {
			(...args: any[]): void;
			callMethod?: (...args: any[]) => void;
			queue?: any[];
			push?: (args: IArguments) => number;
		};
	}
}
const scriptContainer = ref<HTMLElement | null>(null);

const executeScripts = (html: any, id: any) => {
	console.log('htm', html, id);
	// 使用正则表达式匹配和提取脚本内容
	const scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
	let match;
	while ((match = scriptRegex.exec(html)) !== null) {
		const scriptContent = match[1];
		const scriptElement = document.createElement('script');
		scriptElement.text = scriptContent;
		document.head.appendChild(scriptElement);
	}

	// 手动添加并执行 Facebook Pixel 脚本
	const fbPixelScript = document.createElement('script');
	fbPixelScript.innerHTML = `!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', '`+ id + `');`;
	document.head.appendChild(fbPixelScript);
	console.log('fbPixelScript', fbPixelScript);

	// 添加 noscript 标签
	const noScriptElement = document.createElement('noscript');
	noScriptElement.innerHTML = `
        <img height="1" width="1" style="display:none"
        src="https://www.facebook.com/tr?id=`+ id + `&ev=PagePay&noscript=1" />
      `;
	document.body.appendChild(noScriptElement);
	// 确保在全局 window 对象中定义 fbq
	window.fbq = window.fbq || function () {
		if (window.fbq !== undefined)
			window.fbq.callMethod ? window.fbq.callMethod.apply(window.fbq, arguments) : window.fbq.queue.push(arguments);
	};
};
</script>

2、检查Facebook Pixel 脚本：

是否在<head>标签最上面，打开控制器(F12/右击鼠标查看)元素<head>标签是否存在Facebook Pixel 脚本，

有则成功,无则失败

3、Facebook Pixel添加成功；

<script>
onMounted(async () => {
	try {
		const hashParams = location.hash.split('#/?');
		console.log("full:" + location.hash);
		let ch = "";
		if (hashParams.length >= 2) {
			ch = hashParams[1];
		}
        // 传递 channel 参数
		const params = { channel: ch }; 
		const res = await GetAdvertisementChannel(params);
		console.log('广告1233333333333', res);
		if (res && res.data && res.data.html) {
			// 将广告 channel 请求存储到本地
			localStorage.setItem('channel', res.data.channel);
			//  注册存储到本地
			localStorage.setItem('track_reg', res.data.track_reg);
			//  首充存储到本地
			localStorage.setItem('track_first_pay', res.data.track_first_pay);			// 将获取到的 HTML 数据插入 DOM 中
			if (scriptContainer.value) {
				scriptContainer.value.innerHTML = res.data.track_view;
				console.log('scriptContainer', scriptContainer.value.innerHTML);
			}
		    // 手动执行脚本
			executeScripts(res.data.html,'');
            //表示无论如何刷新页面都只会触发一次fbq
			const scriptExecuted = localStorage.getItem('scriptExecuted');
			if (!scriptExecuted) {
                //在你需要的地方调用fbq，根据后端返回字段为准
				if (window.fbq) {
					window.fbq('track', 'PageView');
					window.fbq();
					console.log('首页调用成功', window.fbq);
					AADDvertisement('PageView')
				} else {
					console.error('fbq 未定义');
				}
				executeScripts( '', res.data.pixel_code);
				localStorage.setItem('scriptExecuted', 'true');
			}
		}
		// 将 channel 参数拼接到 URL 中
		const channel = res.data.channel;
		if (channel) {
			const currentUrl = new URL(window.location.href);
			currentUrl.hash = `#/?${channel}`;
			console.log('当前URL:', currentUrl.toString());
			window.history.pushState({}, '', currentUrl.toString());
		}
	} catch (error) {
		console.error('获取广告失败', error);
	}
});
</script>

4、控制台查看：

成功控制台打印：

建议在Facebook查看，可能不准

注意：仅供参考，根据需求进行调用fb事件！！！

知识共享者

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
什么是Facebook Pixel？前端如何接Facebook Pixel打点追踪用户行为

是一种分析工具，帮助你衡量广告成效，并了解用户如何与网站互动。通过在网站中嵌入代码片段，Facebook Pixel 可以跟踪用户在网站上的行为，并将这些数据发送到Facebook。
复制链接

扫一扫