如何在 NuxtJs 上导入 Facebook Pixel [关闭]

Posted 2023-02-22

【中文标题】如何在 NuxtJs 上导入 Facebook Pixel [关闭]

【英文标题】：How to import Facebook Pixel on NuxtJs [closed]

【发布时间】：2017-09-24 23:58:07

【问题描述】：

我需要在 NuxtJs 中导入 Facebook Pixel 代码。

【参考方案1】：

您可以在静态存储库中创建一个文件：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 的 Nuxt 的 noscript 标签）

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

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

【讨论】：

或安装 nuxt FB 像素模块并将 3 行 sn-p 添加到您的 nuxt.config.js 模块块中

你知道如何让它成为动态像素ID吗？例如，www.web.com/AAA 使用 AAA 像素，www.web.com/BBB/shop 使用 BBB。像素。

【参考方案2】：

您也可以作为插件导入。

./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' 
   ]

【参考方案3】：

尝试删除<noscript> 标签。

调试见这里：https://***.com/a/49202327/1483977 这里有一个错误：https://github.com/vuejs/vue/issues/9724

【参考方案4】：

i 可以像这样用作 s-s-r:false..

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