2Facebook Pixel 是一种分析工具，帮助你衡量广告成效，并了解用户如何与网站互动。通过在网站中嵌入代码片段，Facebook Pixel 可以跟踪用户在网站上的行为，并将这些数据发送到Facebook。具体功能包括：
- 事件跟踪：记录用户在网站上的具体操作，如页面浏览、添加到购物车、完成购买等。
- 优化广告：通过分析用户行为数据，Facebook可以优化广告投放，提升广告的转化率。
- 再营销：根据访问过你网站的用户数据，创建自定义受众，进行精准再营销。
- 分析和报告：提供详细的用户行为数据报告，帮助你了解广告的效果，并调整营销策略。
如何工作
Facebook Pixel 通过在你的网站中插入一段JavaScript代码来运行。这个代码会收集和发送用户活动数据到Facebook，允许你监控用户在广告点击后的行为，评估广告成效，并调整广告策略。
设置步骤
示例代码
下面是一个示例代码片段，用于在网站中安装Facebook Pixel：必须添加在标签<head>的最上面
你的像素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事件！！！