通常のWebページの場合、Google Analyticsは単一のJavaScriptコードをHTML内に埋め込むだけで利用できます。

しかし、シングルページアプリケーション（SPA）の場合、そのままでは最初の1ページしか記録してくれませんので、ページ遷移ごとにGoogle Analyticsへ情報を送信する処理を追加する必要があります。

今回は、シングルページアプリケーション（SPA）の場合に、どのようにしてGoogle Analyticsを使うかを解説していきます。

シングルページアプリケーション（SPA）とは

SPA（Single-page application）は、単一ページアプリケーションとも呼ばれ、最初にページを読み込んで以降は画面遷移を全てAjax（非同期通信）で再現し、JavaScriptで従来のページ移動をエミュレートしているWebサイト・Webアプリケーションのことです。

通常のWebページでは、リンクをクリックして画面遷移をすると、ページを丸ごと読み直します。しかし、SPAでは画面遷移ごとにページを読み込み直すことをせず、Ajaxでデータをサーバーから取得し、ブラウザ上で必要な変更のみを適用します。なので、効率的でかつユーザビリティの高いWebアプリケーションを作成することが可能ですが、比較的高度なJavaScriptの技術を要します。

当ブログもSPAですので、当ブログのような画面遷移を実装する際に必要になります。

通常のトラッキングコード

通常のWebページの場合、以下のJavaScriptコードをHTML内に埋め込みます。（'UA-XXXXXXXX-X'の部分は自身のトラッキングID）

<script>
  (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-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

</script>

これは、最初のごちゃごちゃしている4行で、グローバルにga関数をロードし、後ろの2行でga関数を使ってトラッキングIDの登録とページビューの記録を行っています。

つまり、ga('send', 'pageview');が、ページビューの記録に必要なコードとなります。

通常のWebページでは、ページを読み込んで1回記録すれば、それで終了です。

シングルページアプリケーション（SPA）の場合

SPAの場合は、仮想ページを読み込む度にga('send', 'pageview');する必要があります。

ただ、仮想ページを読み込む際、ページのタイトルやパス（URL）が変更していることもよくあるかと思います。その場合、タイトルとパス（URL）の変更も行わなければいけません。

実際には、下記のようなコードでページビューの記録を行います。

<script>
  (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-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

  function pageview(title, page) {
    ga('set', 'title', title);
    ga('set', 'page', page);
    ga('send', 'pageview');
  }

</script>
<script>
  // 仮想ページが読み込まれる度に
  pageview('新規ページ', '/new-page.html');
</script>

ga('set', 'title', 'Page Title');でタイトルを設定し直し、ga('set', 'page', '/page-path');でパス（URL）を設定し直し、それからga('send', 'pageview');でページビューを記録します。このとき、pageはスラッシュ（/）から始まる必要があります。

ga('set', 'title', 'Page Title');を記述しない場合、タイミングによってはページのタイトルが反映されない場合があるので、注意が必要です。

もちろん、例のようにグローバル関数pageviewで定義する必要はないので、必要な箇所に記述してください。

参考

単一ページ アプリケーションのトラッキング  |  ウェブ向けアナリティクス（analytics.js）  |  Google Developers