SPAのVue.jsとGoogle Analyticsを連動させたい

WEB制作
SPAのVue.jsとGoogle Analyticsを連動させたい

SPAのサイトにGoogle Analyticsを導入することは色々大変なのですが、Vue.jsの場合はvue-analyticsを使用することで簡単に導入することができます。

目次

インストール

以下のコマンドでvue-analyticsをインストールします。

$ npm install vue-analytics

vue-analyticsのセットアップ

vue-analyticsのセットアップは以下のように行います。

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

// Configuration VueAnalytics
Vue.use(VueAnalytics, {
  id: 'UA-xxxxxxxxx-x'
});

idには、自分のGoogle AnalyticsのIDを設定してください。

マニュアルでトラッキングする

ページを切り替えた際にthis.$ga.page('/pagename')とすることでGoogle Analyticsに切り替えたページのURLを送信することができます。

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    this.$ga.page('/pagename');
  }
};

vue-routerとの連携

vue-routerと連携させることもでき、vue-analyticsのセットアップ時にrouterを引数として渡してあげることで自動で設定されます。

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

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

トラッキングの解除

Google Analyticsを無効化したい場合には、this.$ga.disable()を実行することで無効化できます。

<p>
  Click <a href="#" @click.prevent="disableTracking">here</a>,
  to disable the tracking through Google Analytics.
</p>
export default {
  methods: {
    disableTracking: function() {
      this.$ga.disable();
    }
  }
};

逆にthis.$ga.enable()を実効することで、Google Analyticsを有効化することができます。

this.$ga.enable();

イベントの送信

this.$ga.event()を使用することでGoogle Analyticsにイベントを送信することができます。

this.$ga.event('Lightbox', 'click', 'Closed Lightbox', 42)

参考サイト