Vus.jsを構築したときにGoogleAnalyticsを使ってトラッキングしたい でも最初のページしか発火していない、そんなときに便利なプラグインvue-analyticsの紹介をしていきます。

1. この記事の目次
   1. 前提
   2. vue-analyticsをインストールしよう
   3. vue-analyticsのドキュメント

前提

vue-analyticsとは

vue-analyticsはGoogle AnalyticsのVueプラグインです。

通常のサイトでは意識する必要のない様々な問題を解決してくれます。

• 自動Google Analyticsスクリプトの読み込み
• 自動ページ追跡
• 複数ドメインID追跡システム
• Vuexサポート
• Vueエラー例外追跡
• EコマースAPI
• デバッグAPI

などなど

インストールの必要環境

vue-analyticsをインストールするためにはVue2系である必要があります

vue-analyticsをインストールしよう

npmから導入

前提としてvue.jsがインストールされrouter.jsが設定されている状態からの作業になります。

次のコマンドを実効してvue-analyticsをインストール

npm install vue-analytics

vue-analyticsのドキュメント

初期設定

vue-analyticsを利用するためにはVueRouter(router.js)にプラグインを設定をしてください。

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X'
})

ページトラッキング(自動設定)

アプリケーションにページトラッキングを設定する最も簡単な方法はプラグイン設定にrouterを渡してあげることです。

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueAnalytics from 'vue-analytics'

const router = new VueRouter({
  router: // your routes
})

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router
})

ページトラッキング(手動設定)

ロジック部分でページトラッキングを発火させたい場合

this.$ga.page('/')

ページ情報を指定したい場合

this.$ga.page({
  page: '/',
  title: 'Home page',
  location: window.location.href
})

イベントトラッキング

GAイベントを発火させるときに呼び出します。

this.$ga.event('category', 'action', 'label', 123)
this.$ga.event({
  eventCategory: 'category',
  eventAction: 'action',
  eventLabel: 'label',
  eventValue: 123
})

スクリーントラッキング

  this.$ga.screenview('home')

自動的に発火したい場合はプラグインの設定で有効にすることができます。

*スクリーン名はrouteのnameに依存するので事前設定が必要

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
id: 'UA-XXX-X',
autoTracking: {
screenview: true
}
})

タイミングの測定

this.$ga.time('category', 'variable', 123, 'label')

this.$ga.time({
  timingCategory: 'category',
  timingVar: 'variable',
  timingValue: 123,
  timingLabel: 'label'
})

Vuexでイベントトラッキング

main.js

import Vue from 'vue'
import store from './store'
import App from './App'
import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
  id: 'UA-xxxx-1'
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { event } from 'vue-analytics'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 0
  },
  actions: {
    increase ({ commit, state }) {
      commit('increase', state.counter + 1)
    }
  },
  mutations: {
    increase (state, payload) {
      state.counter = payload
     event('user-click', 'increase', 'counter', state.counter)
    }
  }
})

これでサイトのGAトラッキング設定ができるようになりました、ネットワーク周りの問題とかも解決してくれるのでかなり重宝します。