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

1.はじめに

記事「Google Analytics(gtag.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」では,IPアドレスやアクセス時間をPHPファイルを使って取得していましたが,IPアドレスを必要としないのであれば,アクセス時間はJavaScriptでも取得できます.ただし,この場合はの時間はアクセスしてきた端末の時間になります.

今回は,記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(JavaScriptのみ版)」で紹介したユニバーサルアナリティクス(analytics.js)での方法を,グローバルサイトタグ(gtag.js)に置き換えた方法を紹介します.

 

2.トラッキングコードのカスタマイズ

クライアントID,アクセス時間,パス,ユーザーエージェントを取得するためのグローバルサイト(gtag.js)のカスタマイズしたトラッキングコードは以下のようになります.トラッキングIDは「UA-12345678-X」と架空の値になってます.追加した部分を赤字にしています.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-X"></script>
<script>
 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);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-12345678-X', {
 'custom_map': {
  'dimension1': 'clientId',
  'dimension2': 'access_time',
  'dimension3': 'ua',
  'dimension4': 'uri_js'
 },
 'access_time': at_js, 
 'ua': navigator.userAgent,
 'uri_js': location.pathname
});
</script>


 

3.コードの説明

内容的にはほとんど記事「Google Analytics(gtag.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」と同じですので,アクセス時間の箇所だけ説明します.

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);

にてJavaScriptで使ってアクセス時間を取得しています.この取得したデータをGoogle Analyticsに送るためのコードが

'access_time': at_js,

なので,これより前にアクセス時間を取得するコードを置いています.

 

4.注意

ここも記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」と同じですので省略しますが,カスタマイズは自己責任でお願いしますとは述べておきます.

 

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