[Nuxt]使用Google Analytics 會碰到的問題

在Nuxt用Google Analytics大概有幾種方法,官方文件推薦自己寫一個plugins,也可以用vue-analytics,之後也是在寫一個plugins引入,也可以用模組的方式載入,看起來會比較像是Nuxt本身的東西,Github連結,我是選擇這種做法的

安裝方法如一般使用npm

npm install @nuxtjs/google-analytics

然後在nuxt.config.js新增以下設定,就能完成基本的使用了

{
  modules: [
    // Simple usage
    ['@nuxtjs/google-analytics', {
      id: 'UA-12301-2'
    }]
 ]
}

那如果要測試網站是否已經有順利安裝好Google Analytics的話,可以安裝這個Chrome外掛,Tag Assistant (by Google),使用後就會遇到這樣的一個問題,會顯示「Same web property ID is tracked twice」

上網查解決的辦法就是加入這個設定,這樣他才不會重複送出紀錄

{
  modules: [
    // Simple usage
    ['@nuxtjs/google-analytics', {
      id: 'UA-12301-2',
      autoTracking: {
        pageviewOnLoad: false //<--add
      },
    }]
 ]
}

最後在debug的情況我也遇到了一點問題,就是我想在開發模式下關閉Google Analytics,於是加了以下設定

{
  modules: [
    // Simple usage
    ['@nuxtjs/google-analytics', {
      id: 'UA-12301-2',
      autoTracking: {
        pageviewOnLoad: false
      },
      debug: {
        sendHitTask: process.env.NODE_ENV === 'production'
      }
    }]
 ]
}

但是發現雖然在開發模式下關閉了,沒想到上線了之後,竟然也沒有打開,一直覺得奇怪,process.env.NODE_ENV這個參數都沒問題啊,build之後確實都是production,後來上網查才知道要在package.json就要帶入這個參數,才能在nuxt.config.js運作,改完後的package.json大概長這樣

"scripts": {
    "dev": "nuxt",
    "build": "NODE_ENV=production nuxt build", //<--新增NODE_ENV參數
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  }

如此一來就能完美在開發模式和線上產品之間,關閉和開啟Google Analytics,而不用再做兩種不同的設定了

 

 

Leave a Reply

你的電子郵件位址並不會被公開。