这是官网的例子
<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', 'Your Pixel ID'); // 替换为你的Pixel ID
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=Your Pixel ID &ev=PageView&noscript=1"
/></noscript>
只需要把 Your Pixel ID 替换成你自己的就可以了。
为了在其他地方更加方便的使用我们可以自己封装一个公用函数。
在项目里utils文件夹下新建一个 FacebookService.js 文件
export default {
init(pixelId) {
!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');
window.fbq('init', pixelId);
window.fbq('track', 'PageView');
},
trackEvent(eventName, eventData) {
window.fbq('track', eventName, eventData);
}
};
在需要用到的地方引用,比如在index.vue文件里用
<template>
<div>
</div>
</template>
<script>
import FacebookService from '@/utils/FacebookService.js'
export default {
data() {
return {
title: 'Hello'
}
},
mouted() {
FacebookService.init('Your ID'); //这里填你的id
},
methods: {
//注意,该回调事件还没有被调用,需要你自己在需要的地方调用。
sendFb(){
//your do是你要传的事件类型,params是要传的参数没有可以填null
FacebookService.trackEvent('your do', 'params');
},
}
}
</script>