在网站上安装 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>


Logo

前往低代码交流专区

更多推荐