adwords、facebook、bigo买量事件回传
1.为什么需要回传？
从事电商推广或者其他产品推广的网站或者app避免不了和这几个平台打交道，今天就记录一下从技术角度，怎么给对应的平台回传。
2. Google Adwords (Google Ads) 初始化
js
const isProd = import.meta.env.VITE_ENV === 'production';
export const pixelStatus = {
google: false,
facebook: false,
bigo: false
};
export const eventQueue = {
bigo: [],
fb: [],
gtag: [],
}
export const initGoogleAds = (pixel_id = '') => {
if (!isProd) return false;
try {
const script = document.createElement('script');
script.async = true;
script.src = `https://www.googletagmanager.com/gtag/js?id=${pixel_id}`;
script.onload = () => {
window.dataLayer = window.dataLayer || [];
function gtag () {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', pixel_id);
window.gtag = gtag;
pixelStatus.google = true;
console.log('Google Ads initialized successfully');
if (eventQueue.gtag.length > 0) {
eventQueue.gtag.forEach(item => {
pixelBack(item.key, item.value, item.extra)
});
eventQueue.gtag = [];
}
};
script.onerror = () => {
console.error('Google Ads script failed to load');
};
document.head.appendChild(script);
return true;
} catch (error) {
console.error('Google Ads initialization failed:', error);
return false;
}
};3.facebook 初始化
html
<!DOCTYPE html>
<html lang="en">
<body>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=xxxxxxxx&ev=PageView&noscript=1" />
</noscript>
<div id="app"></div>
</body>
</html>js
export const initFacebookPixel = (pixel_id = '') => {
if (!isProd) return false;
try {
// 创建Facebook Pixel脚本
const script = document.createElement('script');
script.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', ${pixel_id});
fbq('track', 'PageView');
}
`;
script.onload = () => {
pixelStatus.facebook = true;
console.log('Facebook Pixel initialized successfully');
if (eventQueue.fb.length > 0) {
eventQueue.fb.forEach(item => {
pixelBack(item.key, item.value, item.extra)
});
eventQueue.fb = [];
}
};
script.onerror = () => {
console.error('Facebook Pixel script failed to load');
};
document.head.appendChild(script);
return true;
} catch (error) {
console.error('Facebook Pixel initialization failed:', error);
return false;
}
};3.Bigo 初始化
html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
window.bgdataLayer = window.bgdataLayer || [];
function bge () { window.bgdataLayer.push(arguments); }
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>bigo 回传必须写上面的代码，这是个大坑，被坑了很久
js
export const initBigoPixel = (pixel_id = '') => {
if (!isProd) return false;
try {
// 加载Bigo全局站点代码
window.bgdataLayer = window.bgdataLayer || [];
function bge () { window.bgdataLayer.push(arguments); }
bge('init', pixel_id);
const script = document.createElement('script');
script.async = true;
script.src = `https://api.affiliations.site/ad/events.js?pixel_id=${pixel_id}`;
script.onload = () => {
pixelStatus.bigo = true;
console.log('Bigo Ads initialized successfully');
if (eventQueue.bigo.length > 0) {
eventQueue.bigo.forEach(item => {
pixelBack(item.key, item.value, item.extra)
});
eventQueue.bigo = [];
}
// 记录加载成功事件
if (pixelStatus.mixpanel) {
mixpanel.track('Pixel_Loaded', { pixel: 'bigo', success: true });
}
};
script.onerror = () => {
console.error('Bigo Ads script failed to load');
pixelStatus.google = false;
// 记录加载失败事件
if (pixelStatus.mixpanel) {
mixpanel.track('Pixel_Loaded', { pixel: 'bigo', success: false });
}
};
document.head.appendChild(script);
return true;
} catch (error) {
console.error('Bigo Pixel initialization failed:', error);
return false;
}
};4.封装回传函数
js
export const pixelBack = (key, value, extra) => {
const ad_network = extra.ad_network || null
if (!isProd) {
return
} else if (ad_network !== getParam('adnetwork')) {//getParam('adnetwork') 获取当前投放的平台
return
}
if (!key || !value || !ad_network) {
console.warn('key or value or ad_network is missing')
return
}
if (ad_network === 'google') {
const gtag = window.gtag || null
if (pixelStatus.gogole && gtag) {
delete extra.ad_network
console.log(key, value, extra)
gtag && gtag(key, value, extra)
} else {
eventQueue.gtag.push({
key,
value,
extra
})
}
} else if (ad_network === 'facebook') {
const fbq = window.fbq || null
if (pixelStatus.facebook && fbq) {
if (extra) {
delete extra.ad_network
fbq(key, value, extra);
} else {
fbq(key, value);
}
} else {
eventQueue.fb.push({
key,
value,
extra
})
}
} else if (ad_network === 'bigo') {
const bge = window.bge || null
if (pixelStatus.bigo && bge) {
if (extra) {
delete extra.ad_network
console.log(key, value, extra)
bge(key, value, extra);
} else {
bge(key, value);
}
} else {
eventQueue.bigo.push({
key,
value,
extra
})
}
}
}5.封装统一的初始化入口
js
export const loadPixelsByUrlParam = () => {
if (!isProd) return;
const adNetwork = getParam('adnetwork');
const pixel_id = getParam('s_pixel')
// 根据URL参数加载对应的广告平台
if (adNetwork === adNetworkObj.gtag) {
initGoogleAds(pixel_id);
} else if (adNetwork === adNetworkObj.fb) {
initFacebookPixel(pixel_id);
} else if (adNetwork === adNetworkObj.bigo) {
initBigoPixel(pixel_id);
}
};6.在入口文件引入 main.js
js
import { loadPixelsByUrlParam } from '@/utils/pixel.js'7.对应的按钮或者页面初始化出回传
vue
<template>
<button @click="handleClick">click</button>
</template>
<script setup>
import { onMounted } from 'vue'
import { pixelBack } from '@/utils/pixel.js'
onMounted(() => {
returnAdnetworkCode()
})
const returnAdnetworkCode = () => {
pixelBack('event', 'conversion', {
send_to: `${getParam('s_pixel')}/${getParam('xasd')}`,
value: 1.0,
currency: 'USD',
event_callback: () => {},
ad_network: 'google',
})
pixelBack('event', 'button', {
configId: getParam('s_pixel'),
ad_network: 'bigo',
})
}
// 假如某个无论是google 推广还是bigo 都需要回传，可以这样写，只会回传指定买量的平台，我这里只是演示，按照自己的业务逻辑修改回传的事件和对应的代码
const handleClick = () => {
returnAdnetworkCode()
}
</script>