Google Analytics（analytics.js版）でURLが変わらないサイトを仮想ページで計測する

1．はじめに

Google Analytics（ユニバーサルアナリティクス“analytics.js”）で，URL（パス）が変わらないがコンテンツの表示内容が変わる場合などで使う仮想ページの方法を紹介したいと思います．

記事「ひとつのページで複数のGoogle Analytics（analytics.js）のトラッキングコードを使う方法（カスタムディメンションを用いた場合も対応）」のようなカスタマイズをしたときにも対応する方法を紹介します．なおこのカスタマイズでは，htmlのコードをいじる必要があります．

2．登録ボタンを使った仮想ページ測定の設定方法

PHPなどを使った動的サイトだと，URLの内容が変わらずコンテンツだけ変化するような作りがよくあります．例えば，なにか登録してもらうとき，入力フォームに情報をいれてもらった後に「登録」ボタンなどを押してもらうというような仕様があります．このとき入力フォームと登録完了後のいわゆるサンクスページのURL（URI）が変わらないということがおきます．URLが変わらないと，デフォルトとのGoogle Analyticsのデータ上では入力フォームと登録完了ページの区別ができません．そこで「登録」ボタンを押したときに，登録完了ページを開いたという情報をGoogle Analyticsに送ることで，入力フォームと登録完了ページを区別しようということです．

入力フォームのURLを「https://www.example-site.com/form/」だったと仮定しましょう．そこに「登録」ボタンがあり，そのコードが下記のようなものだったとします．

<button name="button">登録</button>

ここに，Google Analyticsで計測するための以下の赤字のコードを追加します（注意：Google Analyticsのユニバーサルアナリティクスのトラッキングコードがデフォルトでなく，カスタマイズしている場合は下記のコードでは計測出来ない場合があります．そのような場合は，この記事の後半で書く複数のトラッキングIDで計測している場合を参照してコードを修正してください）．

<button name="button" onclick="ga('send', 'pageview',{'page':'/thanks','title':'登録送信完了'});">登録</button>

このようなコードを追加すると「登録」ボタンを押した結果，とGoogle Analyticsでは，「ページ」や「URI（パス）」の情報が「/thanks」，ページタイトルの情報が「登録送信完了」として記録されます．Google Analyticsの「行動＞サイトコンテンツ＞すべてのページ」などで，入力フォームのページ（「/form」として記録）のページビューと登録完了ページ（「/thanks」として記録）のページビューが区別されるようになります．

3．複数のプロパティIDを使っている環境でのカスタマイズ

さて，記事「ひとつのページで複数のGoogle Analytics（analytics.js）のトラッキングコードを使う方法（カスタムディメンションを用いた場合も対応）」で紹介した

<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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345678-X', 'auto');
  ga('send', 'pageview');

  ga('create', 'UA-12345678-Y', 'auto', {'name': 'newTracker' });
  ga('newTracker.send', 'pageview');

</script>

というようなカスタマイズをして複数のトラッキングIDを使って計測している場合，両方のGoogle Analyticsで上記のように入力フォームと登録完了後のいわゆるサンクスページのURL（URI）が変わらないサイトで「登録」ボタンを押したときに入力フォームと登録完了ページを区別したい場合は，次のようになります．

<button name="button" onclick="ga('send', 'pageview',{'page':'/thanks','title':'登録送信完了'}); ga('newTracker.send', 'pageview',{'page':'/thanks','title':'登録送信完了'});">登録</button>

と赤色のフォント部分のようなコードを追加することになります．

トラッキングコード「ga(‘send’, ‘pageview’,{‘page’:’/thanks’,’title’:’登録送信完了’});」がトラッキングID「UA-12345678-X」のためのコード，トラッキングコード「ga(‘newTracker.send’, ‘pageview’,{‘page’:’/thanks’,’title’:’登録送信完了’});」がトラッキングID「UA-12345678-Y」のためのコードとなっています．トラッキングID「UA-12345678-Y」のほうがトラッキングコードの「newTracker.send」にそろえていることに注意してください（トラッキングID「UA-12345678-X」のようにデフォルトの「send」を使っていない場合は，ここを変更したものにあわせます）．