前端对接facebook 的转化api 回传事件教程

最新推荐文章于 2024-04-09 14:21:22 发布

小白的实习记录

最新推荐文章于 2024-04-09 14:21:22 发布

阅读量803

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44235659/article/details/136617852

版权

本文介绍了如何在Vue.js项目中封装FacebookPixelID的跟踪功能，以便于在不同页面统一管理页面视图和自定义事件的追踪，提高代码复用和管理效率。

摘要由CSDN通过智能技术生成

这是官网的例子

<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>