Vue.jsにGoogleAnalyticsを導入

概要

SPA化したVue.jsにGoogleAnalyticsを導入したので手順をメモします。
vue-analyticsを利用しました。

環境

Vue.js 2.5.17
vue-analytics 5.22.1

実装

前提

Googleアカウントを持っていて、プロパティを作成し終えていること。

こちらを参考にさせていただきました。
Googleアナリティクスでサイトを追加（プロパティ作成）する方法

手順１　vue-analyticsインストール

npm install vue-analytics

手順１ GoogleAnalyticsのプロパティIDをコピー

GoogleAnalyticsにログインします。

ヘッダーから対象のプロパティを選択→「UA-XXXXXXX」のIDをコピーします。

手順２　実装

私は全てのページに適用させたかったのでvue-routerに実装しました。

router.js

import VueAnalytics from 'vue-analytics'

const router = new VueRouter({
  mode: 'history',
  routes: [
  //省略
  ],
})
Vue.use(VueAnalytics, {
  id: 'UA-XXXXXXXX',
  router
})

.js

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

このIDのところに先ほどコピーしたIDをペーストします。

まとめ

GoogleAnalyticsを開いて確認してみるとしっかりと接続されていました。