Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Vue.js 2019.05.04

Vue CLIとVue Routerで構築したSPAにグーグルアナリティクスを導入する

Tags: ,,,

前回記事「Vue CLIで作成したVueプロジェクトにAdSense広告を表示させる 」ではAdSense広告の導入フローについてまとめていきました。今回はグーグルアナリティクスのトラッキングコードを紐付けしアクセスの集計ができるところまでの流れをまとめてきます。

 

今回もすでにグーグルアナリティクスのアカウントは作成済みで、トラッキングコードも新規で用意できている前提となります。アナリティクスの設定等については過去記事「サイト分析に必須!GoogleアナリティクスとGoogleサーチコンソールの導入ガイド(Googleアナリティクス編)」に詳しくまとめています。

 

SPAでない通常のウェブサイトの場合で、アナリティクスを導入する場合は共通領域(headタグなど)にコードを設置するだけでOKですが、SPAの構成上その形であればインデックスページしかトラッキングできないことになります。そこで、Vue Routerと連携した仕組みでの設計が必要になるのですが、ここでもとても便利なプラグインが用意されているのでそれを使うと便利です。今回は「vue-analytics」というプラグインを使用します。

 

まずはプロジェクト内のnode_modulesに下記のコマンドでモジュールを追加します。

$ npm install --save-dev vue-analytics

 

モジュールを追加後はVueプロジェクトにあるmain.jsに下記のコードを追記するだけでOKです。IDの値にはグーグルアナリティクスのトラッキングIDを指定します。すごく簡単ですね。

【main.js】

import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
  id: 'UA-********-*',
  router
})

 

ちなみに上記はすでにVue Routerがすでに設定されていることが前提となります。Vue Routerについて詳しくはこちらの記事「Vue CLIとVue RouterでミニマムなSPAを最短で構築する」をご参考に。

 

実際にアナリティクスの方で検知されているか確認します。SPAのためURLが変わった場合にもきちんと表示されるかもチェックしておきましょう。このようにページが変わってもアクセスを検知出来ていれば大丈夫です。

Vue CLIとVue Routerで構築したSPAにグーグルアナリティクスを導入する

 

いかがでしょうか、モジュールを追加してトラッキングIDをVueプロジェクトに紐づけるだけでOKなので特に難しいこともないですね。このようなものが用意されているのはとてもありがたいですね。

 

(参考にさせて頂いたサイト)
Vue.jsのプロジェクトでGoogleAnalyticsの設置

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?