前端在网站上安装 Facebook 像素。
在网站上安装 Facebook 像素。您所在的组织正在使用 Facebook 像素追踪网站活动,并以此为依据投放广告,我这里以vuecli为例这里仅供参考,提供大致思路。原生开发根据vuecli进行适当修改1.在public中index.html的中引入<!-- Facebook Pixel Code --><script>! function (f,...
·
在网站上安装 Facebook 像素。您所在的组织正在使用 Facebook 像素追踪网站活动,并以此为依据投放广告,我这里以vuecli为例
这里仅供参考,提供大致思路。原生开发根据vuecli进行适当修改
1.在public中index.html的中引入
<!-- Facebook Pixel Code -->
<script>
! 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', '**********');//第二个参数是像素编号我用*代替
fbq('track', 'PageView');
// fbq('track', 'AddPaymentInfo');//添加支付信息
// fbq('track', 'AddToCart');//加入购物车
// fbq('track', 'InitiateCheckout');//发起结账
// fbq('track', 'Purchase',{value:0.00,currency:'USD'});//购物
// fbq('track', 'ViewContent');//查看内容
</script>
<noscript>//这里的img我的理解是利用img的src属性进行jsonp跨域
<img height="1" width="1" src="https://www.facebook.com/tr?id=这里改成自己的像素编号&ev=PageView
&noscript=1" />
</noscript>
<!-- End Facebook Pixel Code -->
2.在需要调用的地方调用自己需要用的api,例如我调用添加购物车
这里添加购物车的点击事件
methods:{
addCart(){//添加购物车
fbq('track', 'AddToCart');//加入购物车
}
},
这里fbq(‘track’, ‘AddToCart’);,这个方法就是记录加入购物车的行为,我们就可以在facebook pixel中查看到用户行为,如下图
其他用户行为查考Facebook pixel即可。
由于多数人的像素代码是由后端返回的,这里我们需要动态的去改像素代码。这里我们可以将上面的步骤1改写到app.vue中,具体代码如下。
<template>
<div id="app">
<noscript>
<img height="1" width="1" :src="imgurl" />
</noscript>
<router-view />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
faceBookCode: "这里放像素代码",//发送ajax请求动态的去获取像素代码,并复制给这个faceBookCode
imgurl: ""
};
},
created() {
this.imgurl =
"https://www.facebook.com/tr?id=" +
this.faceBookCode +
"&ev=PageView&noscript=1";
!(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", this.faceBookCode);
fbq("track", "PageView");
// fbq('track', 'AddPaymentInfo');//添加支付信息
// fbq('track', 'AddToCart');//加入购物车
// fbq('track', 'InitiateCheckout');//发起结账
// fbq('track', 'Purchase',{value:0.00,currency:'USD'});//购物
// fbq('track', 'ViewContent');//查看内容
}
};
</script>
<style lang="less" scoped>
#app {
height: 100%;
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)