親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Vue.jsのプロジェクトでGoogleAnalyticsの設置


プロジェクトをデプロイした後は、アナリティクスを設置してサイト分析をしますよね。
ここではそのための方法を2つほどご紹介したいと思います。

まず1つ目は、vue-analyticsというモジュールを組み込む方法です。

まずはモジュールをインストールしましょう。

npm install vue-analytics —save

コードを記載する場所はどこでもいいですが、今回は全ページの計測をしたいので、main.jsに記載しようと思います。
また、vue-routerを使用してページのルーティングを行っているものとします。

main.js

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

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

コードはこれだけでOKです!
簡単ですよね。

この方法だとソース内にはアナリティクスのコードが表示されないために、あれ?ちゃんと計測できてる?と疑問に思うのですが、GoogleAnalyticsの画面で確認するとしっかり計測されています。

もう1つの方法は、headタグ内に通常通りscriptで囲ってコードを書き込む方法です。
そんなの当たり前じゃん、と思われるかもしれませんが、SPAを使っているとheadタグ内にコードを書き込むのは大変だったりするんですよね。
そんな時はvue-headを使いましょう。
こちらでも詳しく述べてますが、まずはvue-headのインストールです。

npm install vue-head —save

そして以下のように例えばApp.vueのhead内のscript欄に直接記入してしまえばOKです。

import Vue from 'vue'
import VueHead from 'vue-head'

Vue.use(VueHead)

export default {
  head: {
    script: [
      { type: 'text/javascript', inner: (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-XXXXXX-X', 'auto');ga('send', 'pageview');, async: true},
    ]
  }
}

どちらの方法を使うかはプロジェクトの状況次第だと思いますが、個人的にはvue-headを使う方が手間もかからずに楽だと思いました。


基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:mio
  • 発売日: 2018/05/29
  • メディア: 単行本(ソフトカバー)