Vus.jsを構築したときにGoogleAnalyticsを使ってトラッキングしたい でも最初のページしか発火していない、そんなときに便利なプラグインvue-analyticsの紹介をしていきます。
vue-analytics
はGoogle AnalyticsのVueプラグインです。
通常のサイトでは意識する必要のない様々な問題を解決してくれます。
などなど
vue-analytics
をインストールするためにはVue2系である必要があります
前提としてvue.jsがインストールされrouter.jsが設定されている状態からの作業になります。
次のコマンドを実効してvue-analyticsをインストール
npm install 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'
})
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')
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トラッキング設定ができるようになりました、ネットワーク周りの問題とかも解決してくれるのでかなり重宝します。