Single Page ApplicationにGoogle Analyticsを設定してみた

こんにちは。さかいです。
Google Analyticsのタグを設定する際に、HTMLのヘッダーにタグを仕込めばいいかなぁと思っていたのですが、Single Page Application(以下 SPA)かぁ。 あれっ！？最初にページを読み込んだ後ってページ遷移しなくない！？その時のページビューって、正しく計測できるの！？…
などの疑問が生まれましたので、実際に設定してみようと思います。

やってみること

Vue.jsで構築したSPAで、

• ページビュー数
• イベント(クリックイベント）

を測定する。

事前準備

Google Analyticsで測定するには、トラッキングIDが必要ですので、Googleアカウントにて取得・設定しておいてください。

利用ライブラリについて

ウェブサイトで測定するには、gtag.jsまたはanalytics.jsが利用できそうです。 また、Vue.jsからGoogle Analyticsを利用するためのプラグインがあるようですので、今回はgtag.jsを利用しているvue-gtagを利用してみたいと思います。analytics.jsベースのvue-analyticsもありますが、こちらのREADME.mdに記載されていますが、今後機能の拡張はなく、バグフィックスのみとなるようですので、これから利用する場合は、gtag.jsベースで実装したほうが良いように思えます。

実装

ライブラリのインストール

今回はvue-gtagを利用するのでインストールしておきます。

$ npm install --save vue-gtag

ページビュー数の測定

vue-gtagを利用してページビュー数を測定する場合、Vue Routerを利用して自動で取得する方法、手動で取得する方法がありますので、２つの方法をやってみます。

Vue Routerを利用して自動で取得

Vue Routerのインスタンスを定義している箇所で以下の通り処理を追加します。

router/index.ts

…
const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/images",
    name: "images",
    component: Images
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

Vue.use(VueGtag, {
  config: {id: process.env.VUE_APP_GA_ID}
}, router);
…

22行目のidは、Google AnalyticsのトラッキングIDを指定してください。
デフォルトの設定だと、

• page_title
  • routeのnameプロパティの値（今回の例だとhomeやimages）
• page_path
  • routeのpathプロパティの値（今回の例だと/や/images）

が利用されます。

ここの設定をカスタマイズすることもできますので、詳しくはこちらを参照してください。 また、サイトへのリクエスト時またはサイトのリロード時にもページビュー数が測定されます。その際は、そのページのtitleがpage_titleとして扱われますので、同じURLなのにpage_titleが違うということが起こるので、注意が必要です。

手動で取得

今度はページビュー数の測定をすべて手動で設定してみます。サイトへのリクエスト時、サイトのリロード時も自動で測定されないように設定することで、プログラムでページビュー数の測定をコントロールすることができます。

main.ts

…
// プラグインを追加
Vue.use(VueGtag, {
  config: {
    id: process.env.VUE_APP_GA_ID,
    params: {
      send_page_view: false
    }
  }
});
…

5行目のidは、Google AnalyticsのトラッキングIDを指定してください。また、7行目のsend_page_view: falseを指定することで、サイトへのリクエスト時、サイトのリロード時に自動で測定されなくなります。

この設定の場合は、プログラムで明示的に測定するためのコードを配置しないと測定されないので、以下のように測定したい箇所にプログラムを設定します。例えば測定対象の画面で利用しているコンポーネントに設定しておけば、意図したページビュー数を測定することができるかと思います。

this.$gtag.pageview({
  page_path: '/',
  page_title: "ホーム画面"
})

実装後に該当ページを表示することで、ページビュー数が測定できていることを確認できます。

イベントの測定

ページビュー数の測定ができたので、続いてイベントの測定をやってみます。そもそもイベントとは、

イベントとは、コンテンツに対して行われ、ウェブページや画面の読み込みとは関係なく測定できるユーザー インタラクションのことです。ダウンロード、リンクのクリック、フォームの送信、動画の再生は、いずれもイベントとして分析の対象となるアクションに該当します。 https://support.google.com/analytics/answer/1033068?hl=ja#Anatomyより引用

となります。
今回は以下のような設定で２つのボタンをクリックした回数を測定するイベントの測定をやってみます。

以下のコードを対象のボタンクリックイベントに実装します。カテゴリ、アクション、ラベルについては、イベント毎に設定値を変えてください。

this.$gtag.event("click", {
  event_category: "button_click",
  event_label: "action1ボタン"
});

実装後に該当のボタンをクリックすると、イベントが測定できていることを確認できました。

さいごに

今回SPAに初めてGoogle Analyticsを設定してみましたが、ライブラリを利用することで、比較的簡単に設定することができました。
今回利用したソース一式はこちらに配置してありますので、ぜひ触っていただき、プロダクトへの組み込みにお役立てください。

参考

• Google アナリティクスの設定
• gtag.js を使用した単一ページ アプリケーションの測定
• vue-gtag documentation page