Nuxt.js - GTM & GA & FB Pixel 安装

行销常常会需要追蹤网页的流量，这时候就会用到这些工具了，这次就是教学一下怎么埋入程式码
目前都有现成套件可使用，用法也非常简单~~

FB Pixel

安装套件 nuxt-facebook-pixel-module

$ npm install --save nuxt-facebook-pixel-module

进行基础设定，细项设定可参考官方

// nuxt.config.jsmodule.exports = {  modules: [    'nuxt-facebook-pixel-module',  ],  facebook: {    track: 'PageView',    // 替换自己 FB Pixel 的 ID    pixelId: 'FACEBOOK_PIXEL_ID',    disabled: false  },}

确认是否安装成功
安装插件 Facebook Pixel Helper，并于网站点选插件，如成功安装就会看到以下画面

GA

官方有教学可参考

于 plugins 资料夹内新增档案，并放入程式码，记得替换自己的 ID

// plugins/ga.jsif (process.client && process.env.NODE_ENV === 'production') {  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');    // 替换自己 GA 的 ID  ga('create', 'UA-XXXXXXXX-X', 'auto')}export default ({ app: { router }, store }) => {  router.afterEach((to, from) => {    ga('set', 'page', to.fullPath)    ga('send', 'pageview')  })}

将 plugins 加入设定档

// nuxt.config.jsmodule.exports = {  plugins: [    { src: '~plugins/ga.js', ssr: false }  ]}

确认是否安装成功
安装插件 Tag Assistant，并于网站点选插件，会看到以下画面

绿色表示正常，蓝色、黄色、红色表示有问题

GTM

安装套件 Google Tag Manager

$ npm install --save @nuxtjs/google-tag-manager

进行基础设定，细项设定可参考官方

// nuxt.config.jsmodule.exports = {  modules: [    // 替换自己 GTM 的 ID    ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }]  ]}

确认是否安装成功
同上使用 Tag Assistant

以上就是在 Nuxt 中如何安装与验证这些工具的方法~~