Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(JavaScriptのみ版)

記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」と記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(外部サーバー使用版)」にて,Google Analytics(ユニバーサルアナリティクスanalytics.js)を使ったデフォルト以外のデータ(クライアントID,IPアドレス,アクセス時間,パス,ユーザーエージェント)を取得するためのトラッキングコードのカスタマイズ方法を紹介しました.上記の2つではIPアドレスを取得するためにどうしてもPHPファイルか外部サーバーの利用が必要でした.一方で,IPアドレスを取得しない(もしくはIPアドレスの取得が必要無い)のであれば,トラッキングコードのJavaScriptのカスタマイズだけで,クライアントID,アクセス時間,パス,ユーザーエージェントを取得できます.今回はこの方法を紹介します(本記事はユニバーサルアナリティクスが対象です).

1.はじめに

カスタムディメンション機能を使うには,Google Analyticsはユニバーサルアナリティクス(analytics.js)以降を使う必要があります.取得する各情報の説明やカスタムディメンションの設定などは,記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」を参照してください.

実は記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」にて,アクセス時間以外のJavaScriptのコードはすでに紹介しています.したがって,今回はアクセス時間を取得するためのJavaScriptのコードの紹介が主なことになります.

 

2.カスタマイズしたコード

クライアント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','//www.google-analytics.com/analytics.js','ga');

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

ga(function(tracker) {
var clientId = tracker.get('clientId');
ga('set', 'dimension1', clientId); 
});

var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var at_js = year+"/"+('0' + month).slice(-2)+"/"+('0' + date).slice(-2)+" "+('0' + hour).slice(-2)+":"+('0' + minute).slice(-2)+":"+('0' + second).slice(-2)
ga('set', 'dimension2', at_js);

var ua = navigator.userAgent;
ga('set', 'dimension3', ua);

var uri_js = location.pathname;
ga('set', 'dimension4', uri_js);

ga('send', 'pageview');

</script>

 

すでに前の記事でも説明しましたが,

ga(function(tracker) {
var clientId = tracker.get('clientId');
ga('set', 'dimension1', clientId);
});

はJavaScriptでクライアントIDを取得し,それをGoogle Analyticsのカスタムディメンションのインデックス「1」に送るコードです.

var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var at_js = year+"/"+('0' + month).slice(-2)+"/"+('0' + date).slice(-2)+" "+('0' + hour).slice(-2)+":"+('0' + minute).slice(-2)+":"+('0' + second).slice(-2)
ga('set', 'dimension2', at_js);

はJavaScriptで使ってアクセス時間を取得し,それをGoogle Analyticsのカスタムディメンションのインデックス「2」に送るコードです.このようにソースに書かれたJavaScriptのコードを使い時間を直接取得する場合,その計測した時間はユーザーの端末の時計が基準となるので注意してください.したがって,もしユーザーの端末の時計が狂っていたら,Google Analyticsに記録される時間もその狂った時間になります(最近は端末の時計は,常にネット上の時計とほぼ同期しているので大きく狂うようなことはないと思いますが・・・).

var ua = navigator.userAgent;
ga('set', 'dimension3', ua);

はJavaScriptで使ってユーザーエージェントを取得し,それをGoogle Analyticsのカスタムディメンションのインデックス「3」に送るコードです.

var uri_js = location.pathname;
ga('set', 'dimension4', uri_js);

はJavaScriptで使ってパスを取得し,それをGoogle Analyticsのカスタムディメンションのインデックス「4」に送るコードです.

 

3.おわりに

Google Analytics(ユニバーサルアナリティクスanalytics.js)のトラッキングコードをカスタマイズしてより多くの情報を取得する方法を3回に分けて紹介してきましたが,記事「マーケティングツールを利用規約や情報の取り扱いの重要性を理解して使用する」で書いたように取得した情報の取り扱いにも注意を払うことを忘れないようにしましょう.

今回はGoogle Analyticsのトラッキングコードをサイトに直接貼り付けている場合を想定していますが,GoogleタグマネージャーでGoogle Analyticsを管理している場合もあると思います.そのような場合の設定方法は,別の機会で紹介したいと考えています.

最後にカスタマイズは自己責任でお願いします

 

補足

グローバルサイトタグ版での同様なカスタマイズは下記を参照してください.

Google Analytics(gtag.js版)をカスタマイズしていろいろなデータを集計する(JavaScriptのみ版)

 

<この記事は「デジマのあれこれ」にて2017年4月頃公開された記事を一部改良して移植したものです>