Vue.js にGoogle Analyticsのイベントトラッキングを設定する

やりたいこと

Vue.jsで、ボタンクリックイベントのトラッキングをしたい。

方法

vue-analytics を使うと簡単にいけた

github.com

実装方法は公式に書いてある通りなんだけど、一応下記の要領で実装した。

Setting

app.js

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import router from '@js/router/index'

Vue.use(VueAnalytics, {
  id: UA-xxxxxxxxx,
  router
})

ボタンにトラッキングを仕込む

component.js

<button
  class="btn"
  :v-ga="$ga.event('category', 'action', 'label', 'value')"
  @click="doSomething()">
  this is a button
</button>

実装後にログ送信を確認するには、chrome extensionのgoogle tag assitantを使うと簡単に調べることができる。

chrome.google.com