くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > Nuxt.jsでGoogle Analyticsを使おうとしたら、簡単だった。

Nuxt.jsでGoogle Analyticsを使おうとしたら、簡単だった。

Nuxt.js Vue.js GoogleAnalytics

Nuxt.jsでGoogle Analyticsしたかったので、いろいろ調べたときの備忘録。

公式プラグインがあるらしい(Google Analytics Module) 中では、vue-analyticsを使っているので、基本vue-analyticsのドキュメントを見るっぽい。

インストール

$ npm install --save @nuxtjs/google-analytics

nuxt.config.jsでの設定

ID設定のみ

modules: [
  '@nuxtjs/google-analytics', { id: 'UA-xxxxx-x' }
],

他の設定もしたいとき

modules: [ "@nuxtjs/google-analytics"],
"google-analytics": {
  id: "UA-XXXXX-XX",
},

ページのトラッキング

勝手にやってくれるっぽい

手動だと以下の感じ

this.$ga.page('/')

Eventのトラッキング

コンポーネントでトラッキング

コンポーネントの中からは、this.$gaでアクセスできる

this.$ga.event('category', 'action', 'label', 123)

Storeでトラッキング

import { event } from 'vue-analytics'

export default new Vuex.Store({
  mutations: {
    increase (state, payload) {
      event('category', 'action', 'label', 'value')
    }
  }
})

デバッグモード

デバッグモードもあり、開発中は送信しないようにもできる。

modules: [
  '@nuxtjs/google-analytics', 
],  

'google-analytics': { 
  id: 'UA-xxxxx-x',
  debug: {
    enabled: process.env.NODE_ENV === 'production',    // default value is false
    trace: process.env.NODE_ENV === 'production',      // default value is false
    sendHitTask: process.env.NODE_ENV === 'production' // default value is false
  }
}

以上！！

参考にしたサイト様