【Nuxt×Analytics】@nuxtjs/google-analyticsでイベントトラッキングする

「@nuxtjs/google-analytics」を使います。

インストールしてnuxt.config.jsに設定

npm i -S @nuxtjs/google-analytics

nuxt.config.js

  modules: [
    ['@nuxtjs/google-analytics', {
      id: 'UA-xxxxxx-x',
      debug: {
        sendHitTask: process.env.NODE_ENV === 'production'
      }
    }]
  ]

ついでに開発環境では動かないようにします。

pluginsで共通化する

直接書くとこんな感じ。

sample.vue

<template lang="pug">
  div
    button(@click="trackEvent")
</template>

<script>
export default {
  methods: {
    trackEvent () {
      this.$ga.event({
        eventCategory: 'cat',
        eventAction: 'action',
        ・・・
      })
    }
  }
}
</script>

シンプルなのでこのままでも良いですが、今回はmixinに定義します。

eventCategoryを「click」にした場合のサンプル。

plugins/mixin.js

import Vue from 'vue'

Vue.mixin({
  methods: {
    trackEventClick (action, label) {
      this.$ga.event({
        eventCategory: 'click',
        eventAction: action,
        eventLabel: label
      })
    }
  }
})

引数でeventActionとeventLabelを設定できるようにしてみました。

トラッキングしたい場所に設定する

sample.vue

<template lang="pug">
  div
    button(@click="trackEventClick('action', 'label')")
</template>

できあがり。