プロジェクトをデプロイした後は、アナリティクスを設置してサイト分析をしますよね。
ここではそのための方法を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を使う方が手間もかからずに楽だと思いました。
- 作者:mio
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)