かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

Vue.jsにGoogleアナリティクスを導入する方法【vue-routerとgtagで設定】【vue-analyticsで設定】

この記事をシェアする

 

f:id:katonobo:20190831072302p:plain

Vue.jsでGoogleアナリティクスを設定する時は手動でトラッキングを設定する必要があります。この記事はVue.jsでGoogleアナリティクスを導入する方法の解説です。

Googleアナリティクスの概要とアカウント作成方法はこちら

Vue.jsにGoogleアナリティクスを設定する 

Vue.jsのSPA(シングルページアプリケーション)は、単一つのページでコンテンツの切り替えを行うアプリケーションですので、普通の設定ではGoogleアナリティクスがページの切り替えを検知できずにデータの取得ができません。

そこで、ページの切り替えごとにGoogleアナリティクスが反応するように設定する必要があります。

Vue.jsでGoogleアナリティクスを適切に導入する方法はおおまかに2つあります。

vue-routerとgtagで設定

SPAがトラッキングされない問題を解決するために、URLが変更された時に手動でトラッキングを行う設定をします。

Googleアナリティクスの公式ドキュメントにSPAの導入方法が書かれた記事があります。 

gtag.js を使用した単一ページ アプリケーションの測定

Vue.jsで、Googleアナリティクスの手動トラッキングするためには以下のコードを使います。

gtag('config', 'UA-XXXXXXXXX-X', {'page_path':'/new-page.html'});

「/new-page.html」は新しく移動したページです。

このコードをvue-routerを使って機能するように設定します。

方法は、「router.js」などrouterを設定するファイルで「router.afterEach」にgtagを設定します。

ナビゲーションガード | Vue Router

これでrouterで移動した際にGoogleアナリティクスが機能するようになります。

vue-analyticsのパッケージをインストールして設定【オススメ】

パッケージ管理ツール「npm」を使って「vue-analytics」をインストールして設定するのが楽で便利です。

vue-analyticsのインストール方法は以下です。

npm install vue-analytics

 これでインストールは完了です。

routerを使わない場合

「main.js」に上記のように設定します。

これで、各ページで

this.$ga.page('/')

と呼び出せばGoogleアナリティクスが機能します

routerを使う場合【オススメ】

私は普段この方法を使っています。この方法なら「main.js」の設定で全て完結するからです。

これで完了です。 シンプルですね。