一部の人しか使わないであろうGoogleアナリティクスのTips

Googleアナリティクスには行動フローやユーザフローといったユーザがセッション生成からどういったページ遷移をしているかを可視化してくれる機能があります。

ものすごーく便利な機能なんですが困ったことが１つあります。

それはページ遷移をURLパラメータで振り分けている場合などには、グループ化されてしまいフローが有効に働かないということです。

例えば、http://example.jp/ と、http://example.jp/?page=about と、http://example.jp/?page=search などがある場合、
/→/?page=about→/?page=searchと遷移してもフロー上では
/→/?page=aboutと２ページ目までの遷移しか表示してくれないといったことがあります。
（こちらあまり深く調査していないので間違っている場合にはコメ欄などでご指摘お願いします。）

で、これが開発初期なら「んじゃ作り直すか〜」ってなると思うのですが、
サービスとしてリリースしちゃってる場合には改修を入れるのも一苦労なので困ったことになります。

今回はそんな時に労力をかけずにどうやってフローを正しく表示させるかのTipsになります。（説明が長くなりました・・・:-/）

====

事前知識

ガリッとコードを書く前に事前知識を。
Googleアナリティクスには「ユーザの行動を追跡するためにこのコードを入れてちょ」と提示されるコードがあります。

<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-xxxxxxxx-x', 'auto');
ga('send', 'pageview');

</script>

こんな感じのコードですね。

で、今回肝心要なのはga('send', 'pageview');の部分です。
これはGoogleへ対して「今表示しているページをユーザは閲覧してるぞー！」ってのを教えるコードになります。
ページの情報はタイトルとURLを送ってます。

もう一つ、Googleアナリティクスには仮想ページビューという機能があります。
これを活用して、本来送るべきURLのパラメータ部分をスラッシュ区切りにしてGoogleへ送っちゃうのがやりたいことになります。

やり方

やり方としては至って簡単で、/?page=aboutなどを一旦スラッシュ区切りにします。
で、スラッシュ区切りにした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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxxxxx-x', 'auto');

url_param = window.location.search;
url_param = url_param.replace('?page=','page/');
url_param = url_param.replace(/&/g,'/');
var virtualPage = window.location.pathname + url_param;
ga('send', 'pageview', virtualPage);

詳細説明としては、
window.location.searchに対してreplaceをすることでURLパラメータで使っている?や&を/に変換します。
なので、/?page=aboutだったものが/page/aboutに変換されたり、/?page=search&cur=1などは/page/search/cur=1などに変換されます。

次に、そうやって変換したURLをga('send', 'pageview', virtualPage);でGoogleへ送信してます。
とりあえず第３引数に仮想URLを入れて送信するって感じですね。

これで行動フローやユーザフローが正しく表示されるでしょう！

他のGoogleアナリティクスの仕様的なところは以下から見れますのでご参考にしてみてください！