Google Analytics(gtag.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)

1.はじめに

記事「Google Analyticsのトラッキングコードがグローバルサイトタグ(gtag.js)のみの表示になった」で,Google Analyticsがユニバーサルアナリティクス(analytics.js)からグローバルサイトタグ(gtag.js)に一気に移行された話をしました.ただ,これから使用を開始する場合も当分はユニバーサルアナリティクス(analytics.js)を使った方が良く,いまユニバーサルアナリティクス(analytics.js)を使っていてもグローバルサイトタグ(gtag.js)へすぐに移行する必要はないとも述べました.

とは言え,新しいものにも興味はありますし,使ってみたいとなるのも人の心と言いますか・・・(笑).そこで今回は,記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」で紹介したユニバーサルアナリティクス(analytics.js)のカスタマイズを,グローバルサイトタグ(gtag.js)で行う方法を紹介します.

つまり,グローバルサイトタグ(gtag.js)でカスタムディメンション機能を使い,クライアントID,IPアドレス,アクセス時間,パス,ユーザーエージェントをPHPファイルを使った方法を紹介します(PHPファイルを使って取得するものはIPアドレスとアクセス時間で,他はJavaScriptのコードをカスタマイズして取得します).なお,使用するPHPファイルは,

Google AnalyticsでIPやCookieを判別できるようにする「PHPAnalyticsIP」を作った

http://tanshio.net/phpanalyticsip/

で紹介されているものを用いています.

取得する情報のことやカスタムディメンションの設定などは,記事「Google Analyticsをカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」を参照していください.

 

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

では具体的なカスタマイズを紹介します.グローバルサイトタグ(gtag.js)のトラッキングコードは,

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-X"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'UA-12345678-X');
</script>

です.上記でトラッキングIDは「UA-12345678-X」と架空の値になってますので注意してください.コードを見てもらえればわかりますが,トラッキングIDが使われている箇所が2箇所あります(ユニバーサルアナリティクスでは1箇所でした)ので注意してください.

このグローバルサイトタグ(gtag.js)を記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」で紹介したものと同じデータがとれるようにカスタマイズしたユニバーサルアナリティクス(analytics.js)が下記のコードです.カスタマイズした箇所は赤字にしてあります.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script type="text/javascript" src="analytics.php?s=X"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-X"></script>
<script> 
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'UA-12345678-X', {
  'custom_map': {
   'dimension1': 'clientId',
   'dimension2': 'ip_value',
   'dimension3': 'access_time',
   'dimension4': 'ua',
   'dimension5': 'uri_js',
   'dimension6': 'id_php' 
  },
 'access_time': setAnalytics.getAccessTime(),
 'ip_value': setAnalytics.getIP(),
 'ua': navigator.userAgent,
 'uri_js': location.pathname,
 'id_php': setAnalytics.getCookie()
 });
</script>

 

3.コードの説明

カスタマイズしたコードを簡単に説明しておきたいと思います.

まず,

<script type="text/javascript" src="analytics.php?s=X"></script>

はIPアドレスとアクセス時間などを取得するために使うPHPファイル「analytics.php」を読み込むためのコードです.これは必ずGoogle Analyticsのトラッキングコードの上に記載してください.またこの例では,サイトのhtmlファイルとPHPファイル「analytics.php」が同じディレクトリにあるときを想定した表記です.計測対象のhtmlファイルが複数のディレクトリーに分かれていて上記のコードを使う場合は,htmlファイルのあるすべてのディレクトリーにPHPファイル「analytics.php」を配置する必要があります.すべてのディレクトリー内のhtmlファイルがあるディレクトリー内にある1つのPHPファイル「analytics.php」を使う場合は,上記の「src=”analytics.php」の部分を相対パスから絶対パスに変更して使用してください.

相対パスと絶対パス

http://www.shoshinsha.com/hp/1hour/know/pass.html

グローバルサイトタグ(gtag.js)のコードの記述はだいぶ変更になりました.カスタムディメンション関係は

Custom dimensions and metrics with gtag.js

https://developers.google.com/analytics/devguides/collection/gtagjs/custom-dims-mets

に書かれています(現在は英語のみです).

その結果,クライアントIDに関しては

'dimension1': 'clientId',

だけで,Google Analyticsのカスタムディメンションのインデックス「1」にその値を遅れるようになりました.

'ip_value': setAnalytics.getIP(),

はPHPファイル「analytics.php」を使ってIPアドレスを取得し,

'dimension2': 'ip_value',

でGoogle Analyticsのカスタムディメンションのインデックス「2」に送ります.

'access_time': setAnalytics.getAccessTime(),

はPHPファイル「analytics.php」を使ってアクセス時間を取得し,

'dimension3': 'access_time',

でGoogle Analyticsのカスタムディメンションのインデックス「3」に送ります.PHPファイルを使って時間を取得するので,サイトのあるサーバーの時計が基準で記録されます.

'ua': navigator.userAgent,

はJavaScriptで使ってユーザーエージェントを取得し,

'dimension4': 'ua',

でGoogle Analyticsのカスタムディメンションのインデックス「4」に送ります.

 'uri_js': location.pathname,

はJavaScriptで使ってパスを取得し,

 'dimension5': 'uri_js',

でGoogle Analyticsのカスタムディメンションのインデックス「5」に送ります.

最後に

 'id_php': setAnalytics.getCookie()

はPHPファイル「analytics.php」を使ってPHPファイルが生成したクッキーを取得し,

'dimension6': 'id_php'

でGoogle Analyticsのカスタムディメンションのインデックス「6」に送ります.

ユニバーサルアナリティクスは「ga(‘set’, ・・・)」と記述していましたが,グローバルサイトタグでは「’custom_map’: {・・・}」を使います.IPアドレスやユーザーエージェントを取得するための関数を「’custom_map’: {・・・}」内の各ディメンションに記述しても動かないので上記のようになりました(ここらへんはJavaScriptに詳しい方に聞いてください.改善の余地はあるかもしれません).

 

4.注意

例えば,記事「Google Analytics(analytics.js版)をカスタマイズしていろいろなデータを集計する(PHPファイル使用版)」のユニバーサルアナリティクスのコードを残して,新しいトラッキングIDの(カスタマイズのしていないオリジナルの)グローバルサイトタグを同一ページに追加した場合,通常の計測は問題無くできると思われます(ちゃんと確認していませんが,いろいろ試しているときそのように見えました).

ですが,カスタムディメンションで値を取得するようにカスタマイズしたユニバーサルアナリティクスとグローバルサイトタグ(使用するトラッキングIDの値はユニバーサルアナリティクスのIDと異なる)を同じページに貼ると,エラーになります.カスタムディメンションの設定がかち合います.ユニバーサルアナリティクス同士だと記事「ひとつのページで複数のGoogle Analyticsのトラッキングコードを使う方法(カスタムディメンションを用いた場合も対応)」に書いた方法で回避できますが,ユニバーサルアナリティクスとグローバルサイトタグの組み合わせでそれをどのようにやるかは現状はわかりません.

 Google Analyticsのトラッキングコードをカスタマイズする場合には,とくに記事「マーケティングツールを利用規約や情報の取り扱いの重要性を理解して使用する」で書いたように取得した情報の取り扱いにも注意を払うことを忘れないようにしましょう.

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

 

参考

Web制作者がgtag.jsで知っておきたいGoogleアナリティクスの今

http://www.kagua.biz/help/config/gtagjs.html

 

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