Vue-SPAでもGoogle Analyticsしたい！

小ネタです。

VueでSPAを作った時にも、GoogleAnalytics（以下、GA）でトラッキングしたい！
でもどうしたら…。

と思った皆さん、朗報です。 vue-analyticsというモジュールがあります。

使い方

とっても簡単。モジュールをロードして、Vue.use()で組み込むだけ。

main.js

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

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

あとは

this.$ga.page('/')

と呼び出すだけでGAにAPIを投げてくれます。

vue-routerとの連携

vue-router を使っている場合は、

main.js

import Vue from 'vue'
import router from './router'
import VueAnalytics from 'vue-analytics'

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

とすれば、ページ（URL）切り替えをするたびに自動的にGAにAPIを投げてくれます。
便利ですね。