カスタムディメンションによる独自指標を用いたログをgtag.jsを使用してGAへ送信した #JavaScript

TL; DR

カスタムディメンションについての記事が少ないので書いた。
gtag.jsを使用してカスタムディメンション（およびその他の値）を送信する。
Google Analytics DebuggerをChromeに追加すれば、送信した値が確認できる。
カスタムディメンションの値はリアルタイムで計測できないようだ。（公式に言及なし？）

背景

event発火時に特定の値をGAに送信したいとの意向がクライアントからあったのですが、デフォルトで設定できる値は event_label, event_categoryの二つのみであり、今回はそれ以外に複数の指標/値を独自に送信できるようにしたいとのことだったため、カスタムディメンションを使用してログを送信しました。

custom dimension is 何

GAヘルプより引用

カスタムディメンションとカスタム指標はアナリティクスアカウントの既定のディメンションと指標とほとんど同一ですが、自分で作成するという点で異なります。Google アナリティクスで自動的にトラッキングされないデータを収集、解析するために使用できます。

自分が制作したコンテンツでは、ユーザーのボタンクリックをトリガーとして、ユーザーのステータスや押下したボタンについて複数の情報を取得する必要があったため、集計・分析の際に不都合が生じないよう、デフォルトの指標に加えてカスタムディメンションを設定しました。

gtag.jsを使用してカスタムディメンション（およびその他の値）を送信する

gtag.jsとは、

oogle アナリティクス、Google 広告、Google マーケティングプラットフォームにイベントデータを送信できる、JavaScript のタグ設定フレームワークおよび API です。

gtag.jsを使用するにはGAの管理画面にてGA_TRACKING_IDを発番する必要があります。
※今回はクライアントに対応いただきました。

GA_TRACKING_IDは、以下のような形で発番されるので、こちらをサイト内に埋め込むことで、GAでのトラッキングが可能となります。

// GA_TRACKING_ID の個所に発番したIDを埋め込む　→　計２か所

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

  gtag('config', 'GA_TRACKING_ID');
</script>

カスタムディメンションをコードに設定する

GA_TRACKINT_IDを設定したら、最後にカスタムディメンションのコードを設定していきます。

※説明は端折りますが、管理画面側にて事前にカスタムディメンションを設定する必要があります。
（本当はこの辺がごちゃごちゃしていて一番めんどい...）

Google アナリティクスにカスタムディメンションを送信するには、プロパティの config を更新してディメンションの custom_map パラメータを設定し、カスタムパラメータを使用してカスタムディメンションの値を送信します。

ここが少しわかり辛い所なのですが、カスタムディメンションの値を送信するためには、

custom_mapパラメータとして、dimension_nameを設定する
値(dimension_value)を送信

の２つを行う必要があります。

例えば例として、

ユーザーの名前
ユーザーの年齢
押下されたボタンの情報

という三つの値を送信したい場合は、
- ユーザーの名前の送信に使用する KEY名（dimension_name）の設定
- KEY名（dimension_name）に対応する値(dimension_value)の送信

というように、dimention_nameの設定を行う記述と、dimension_valueの送信を行う記述の二つが必要となります。

具体的には以下のような設定になります。


// dimention_nameをcustom_mapオブジェクトとして設定する
gtag('config', 'GA_TRACKING_ID', {
  'custom_map': {
    'dimension1': 'user_name', // 連番としてdimension_XX を設定（管理画面で設定可）
    'dimension2': 'age',
    'dimension3': 'button_number'
  }
});

// 上記で設定したdimension_nameに基づく形で値を送信する
let name = 'benibana2001',
    age = '99',
    num = '01';

gtag('event', 'any_event_name', {
  'user_name': name
  'age': user_age,
  'button_number': number
});

以上でカスタムディメンションによる値の埋め込みは完了です。
後は上記の gtag関数を適切なタイミングで実行してやるだけでGAに対して値が送信されます。

Google Analytics Debuggerを使おう

上記までの設定でカスタムディメンションをGAに送信する設定が出来ましたが、本当にこれで値が送信できているのか確認する必要があります。
（※カスタムディメンションの値はリアルタイムでのログが取れないため不安¹）

Google Analytics Debugger

Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript.

→　Chrome DevTools の拡張機能で、consoleに送信した値を吐いてくれます。

こちら機能をON にした上でgtag関数の実行を拾うと下記のようにconsoleに吐き出されます。


                         _                          _       _   _
                        | |                        | |     | | (_)
  __ _  ___   ___   __ _| | ___    __ _ _ __   __ _| |_   _| |_ _  ___ ___
 / _` |/ _ \ / _ \ / _` | |/ _ \  / _` | '_ \ / _` | | | | | __| |/ __/ __|
| (_| | (_) | (_) | (_| | |  __/ | (_| | | | | (_| | | |_| | |_| | (__\__ \
 \__, |\___/ \___/ \__, |_|\___|  \__,_|_| |_|\__,_|_|\__, |\__|_|\___|___/
  __/ |             __/ |                              __/ |
 |___/             |___/                              |___/

// Running command の欄に下記のような形で dimension_<KEY_NUM>, dimension_value が吐かれていれば成功です
dimension1       (&cd1)  benibana2001
dimension2       (&cd2)  99
dimension3       (&cd3)  01

これで一安心ですね...!!

公式での言及は見つかりませんでしたが、2015年のこちらの記事に記載がありました。不備ありましたらお知らせください。 ↩