クライアントIDとは何か

クライアントIDとは、Googleアナリティクスのプラットフォームにおいて、ユーザー(厳密にはブラウザ)を一意に特定するために使われているIDであり、ブラウザのCookie内に格納されています。Googleアナリティクスのトラッキングデータを送信する時に、一緒に送信されます。しかしながら、このクライアントIDは何もカスタマイズしていない状態のGoogleアナリティクスでは、「ユーザーエクスプローラー」レポートでしか見ることができず、CSVなどでアウトプットすることもできない使いにくい項目です(そもそもユーザーに見せるために使っている項目ではないので仕方ないですが)。

そんなクライアントIDですが、カスタムディメンションという機能を用いて、自身でカスタマイズすることにより、使い勝手を向上させることが可能です。カスタムディメンションにクライアントIDとタイムスタンプを設定することで、集計処理が行われていない(厳密には集計した結果各指標が1になるような)ローデータを取得することができるようになります。そして、このローデータをTableauやQlikViewといったBIツールで分析する事例が出始めています。

なお、通常のGoogleアナリティクスでクライアントIDをカスタムディメンションに設定する方法は、Googleタグマネージャ利用版として以前の記事「GTMを使って、GoogleアナリティクスのClientIDを取得する方法」で書いたので、そちらを参考にしてください。

AMP Analyticsにおける設定方法

AMP版アナリティクスでは、JavaScriptを利用することができないという大きな制約があるため、通常版のGoogleアナリティクスでカスタムディメンションにクライアントIDを設定する方法をそのまま用いることはできません。AMP版のGoogleアナリティクスに合わせたカスタマイズを行う必要があります。

AMP環境下でGoogleアナリティクスを利用するには、JSONコードを使ってトラッキングコードを記述する方法とGoogleタグマネージャを利用する方法の2種類存在します。このどちらにおいても、クライアントIDとタイムスタンプをカスタムディメンションに設定することが可能です。ただし、タイムスタンプについては、年月日・時分秒が分かりやすい形式にフォーマット化された形で設定することは現時点では難しいようなので、ご注意ください。

また、どちらの方法を取るにしても、カスタムディメンションで「クライアントID」「タイムスタンプ」の作成は必要なので、予め作成しておいてください。

JSONコードを利用する場合

JSONコードを用いたトラッキングコードをカスタマイズするには、このJSONコードがどのような仕組みで動いているかを理解する必要があります。仕組みを理解するには、開発者向け公式ヘルプ - AMPページにアナリティクスを追加する - googleanalytics を拡張するを読むのが良いと思います。

また、クライアントIDとタイムスタンプは、<amp-analytics>タグのAMP変数として予め定義されているので、前準備などは不要で、そのまま利用できます。

では、細かな解説は省いて、クライアントIDとタイムスタンプ付きのトラッキング用JSONコードを記載します。なお、下記の例ではカスタムディメンション1にクライアントIDを、カスタムディメンション2にタイムスタンプを設定しています。インデックス番号については各自のプロパティによって変わってくると思いますので、適宜変更してください。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithClientID": "${pageview}&cd1=${clientId(AMP_ECID_GOOGLE)}&cd2=${timestamp}"
  },
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithClientID" : {
      "on": "visible",
      "request": "pageviewWithClientID"
    }
  }
}
</script>
</amp-analytics>

JSONコードについて簡単に解説すると、requestsオブジェクト内に、カスタムディメンションを利用するリクエストURLのテンプレートを準備します。このテンプレートは、基本はページビューのリクエストURLをそのまま使いますが、カスタムディメンションに関する情報だけはデフォルトでは存在しないため、追加します。この時に値には、定義済みの変数をそのまま利用することができます。定義済み変数の一覧は、Github ampproject/amphtml - AMP HTML URL Variable Substitutionsにまとめられています。これによると、クライアントIDを取得するには、

${clientId(COOKIE_NAME)}

を使えば良いということなので、利用されているCookie名を調べます。Chromeの開発者ツールでCookieの値を見てみると、「AMP_ECID_GOOGLE」という名前のCookieにクライアントIDが格納されているようなので、クライアントIDは、

${clientId(AMP_ECID_GOOGLE)}

で取得することができます。

イベントトラッキングも行なっている場合は、同様にイベントトラッキング用のリクエストURLも生成しておく必要があります。

実装が完了したら、動作テストを行います。動作テストは、Chromeなどの開発者ツールを使って、送信しているHTTPリクエストを直接見るのが手早くできます。

Googleタグマネージャを利用する場合

AMPサイトにおいても、2016年10月にGoogleタグマネージャが利用できるようになりました。通常のWeb版のGoogleタグマネージャと比較するとできないことも多いですが、カスタムディメンションを利用することは可能であり、さらにクライアントIDとタイムスタンプにも対応しています。

変数を作成する

まず初めに、クライアントIDとタイムスタンプの2つの変数を作成します。ウェブ版のGoogleタグマネージャでクライアントIDを取得するには、カスタムHTMLタグを使ってトラッカーの初期化のみ行い、dataLayer変数を利用するという一手間が必要でしたが、AMP版のGoogleタグマネージャでは、「AMP変数」という変数タイプを利用するこだけで利用できるようになります。

変数名 変数の種類 AMP変数名
Client ID AMP変数 clientId(AMP_ECID_GOOGLE)
Timestamp AMP変数 timestamp

大文字・小文字などの違いに注意して作成するようにしてください。キャプチャは以下になります。

変数の種類の選択画面。ここで、「AMP変数」を選択

変数「Client ID」ではAMP変数名に「clientId(AMP_ECID_GOOGLE)」と入れる

変数「Timestamp」ではAMP変数名に「timestamp」と入れる

Googleアナリティクスタグに設定する

タグの設定方法は、通常のWeb版のGoogleタグマネージャと同様です。タグのテンプレートから「Googleアナリティクス」を選択し、テンプレートの「カスタムディメンション」の項目に「インデックス番号」と「値」を設定していきます。AMP版のGoogleタグマネージャの場合、テンプレートで設定できる項目が大きく減ってしまっていますが、なんとかカスタムディメンション・カスタム指標には対応しているようです。

設定した状態のキャプチャは以下になります。

まとめ

今回の記事では、実装制約の大きなAMP版のGoogleアナリティクスを利用しているケースでもできる高度なカスタマイズの事例として、クライアントIDをカスタムディメンションに設定する方法を解説しました。AMPアナリティクスでは、他にも実現できるカスタマイズは色々あるため、今後も引き続き調査・実験を繰り返し、ここで解説していきたいと思います。