Vuejs2 如何在VueJS单页应用程序（NUXT）上使用Facebook像素？

我需要在Vuejs单页应用程序上添加facebook像素代码。我还将NUXT用于SSR。

您可以在静态存储库中创建一个文件：pixel.js，其中包含facebook提供的内容：

!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', 'XXYOUR CODEXX')
    fbq('track', 'PageView')

（我没有完全基于javascrip将noscript标记与Nuxt一起使用）

然后在nuxt.conf.js文件中，添加以下行：

script:[      
            {src:'pixel.js', type: 'text/javascript'}
        ]

---

我可以用做ssr:false像这样

plugins : [
    // ssr: false to only include it on client-side
    { src : '~/plugins/vue-notifications', ssr : false },
    { src : '~/plugins/vue-slider-component', ssr : false },
    { src : '~/plugins/network', ssr : false },
    { src : '~/plugins/web3js', ssr : false },
    // {src: '~/plugins/irisws', ssr: false},
    // { src : '~/plugins/iomqtt', ssr : false }
],

尝试删除

标记

有关调试，请参见此处：

---

这里有一个bug：

您也可以作为插件导入

./plugins/facebook-events.js

/* eslint-disable */
export default ({ app, store }) => {
  /*
   ** Only run on client-side and only in production mode
   */
  // if (process.env.NODE_ENV !== "production") return
  /*
   ** Initialize Facebook Pixel Script
   */
  if (process.browser) {
    !(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', 'XXXXXXXXX-XXXXX')
      app.router.afterEach((to, from) => {
        /*
        ** Fire a page view on each route change
        */
       console.log("fire pageview", store.state)
       fbq("track", "PageView")
      })
    }
}

并在插件会话中将其导入到nuxt.config.js中

  plugins: [
    { src: '~/plugins/facebook-events.js' }
  ]

---

或者安装nuxt FB像素模块，并将3行代码片段添加到nuxt.config.js模块块中。您知道如何使其成为动态像素ID吗？例如，www.web.com/AAA使用AAA像素，www.web.com/BBB/shop使用BBB。像素