高度な計測に使えるGTMの黒魔術とタグアシスタントの裏技

calendar Aug 13, 2020 / · 1 分で読了 · GTMgoogle-analyticsデータレイヤー  ·
共有する: linkedin copy

概要

GTMとGA4の高度な使い方。設定しておくと便利な変数やトリガーの使い方に加え、データレイヤーを徹底的に使いこなす。さらには計測だけでなく検証の手間を大幅に省くタグアシスタントの裏技を紹介する。

ページビュー固有のID。 一度ページを読み込んでから、次に読み込むまでの間で保持されるIDで、そのIDをさまざまなツールに送ればそれをキーにデータ連携できる。 ツールA,B,Cの間でIDを連携する場合、

  • ツールAのIDを取得→Bに送る
  • ツールAのIDを取得→Cに送る
  • ツールBのIDを取得→Cに送る
  • （CのIDを取得→Aに送る？）
  • （CのIDを取得→Bに送る？）

など、ツール数が増えると複雑になる。 ツールAのIDはツールAのタグが処理完了しないと取得できず、それを受けてIDを送るタグはその後に発火させる必要があるなど、タイミングのコントロールも難しくなる。 ページビューIDを使うと

  • PVID→ツールAに送る
  • PVID→ツールBに送る
  • PVID→ツールCに送る

となるのでシンプル。ページビューIDは最初に生成しておけばいい。 ログ分析を進めていくと、どのイベントがどのページビューにおいて発生したものなのか知りたくなることがある。たとえばスクロールや動画再生などは典型的。イベントのレコードでページパスは記録されている（どこのページかはわかる）が、いつのページビューかは実はわからない。 またページの表示内容を変えるABテストもどのページビューにおいて発生したのかがわからないと分析が不正確になる（同じトップページでも1PV目なのか2PV目なのか）。 これらは単純にログを上から見ていけばわかるというものではない。たとえば最初にタブをまとめて開いておいて、後でページ閲覧するケース。この場合ページビューヒットとイベントヒットの順番がわからなくなる。 これを解決するためにページビューに対してIDを割り振るといい。同一ページビューに対するすべてのヒット（ページビュー、イベント、トランザクション）はすべて同じIDが割り振られる。つまりページビューに紐づけることができるようになる。

GA4ではユーザ（user_pseudo_id）とセッション（ga_session_id）に対してIDが割り振られていることは知られているが、実はbatch_page_idがハードナビゲーションのページではページビューIDに該当する。しかしこの値はGA4以外のツールに連携することができないため、他のツールを含めて同じページビューIDの値を格納するためには、GTMで変数として設定する必要がある。

以下を変数／カスタムJavaScriptに設定する

function(){
  if (!window._pv_id) {
    window._pv_id = crypto.randomUUID()
  }
  return window._pv_id
}
javascript

最初に一度限りページビューIDを生成してwindowオブジェクトに保存する。 2回目以降はwindowオブジェクトの中のページビューIDを参照する。 crypto.randomUUID()はUUID v4形式の一意なIDを生成する標準APIで、すべてのモダンブラウザで利用できる。 この変数を各ツールでカスタム変数（GA4ではイベントパラメータ）としてセットする。

データレイヤーにイベントを送るときは常に時刻も入れておくと検証しやすい。 ページ読み込みからの経過ミリ秒にしておくとわかりやすくていい。

dataLayer.push({
  'event': 'イベント名',
  'time': Math.round(performance.now()),
});
javascript

performance.now()はナビゲーション開始からの経過ミリ秒を返す標準APIで、高精度かつDeprecatedでない。

トリガーで「イベントが発生したら・・・」という条件は設定できる。 そして「あるイベントAが発生した時、イベントBが発生していたら・・・」はトリガーグループの機能を使えばいい。 では「イベントAが発生したとき、イベントBが発生していなかったら・・・」という条件はどうやって実現するのか？ そこでデータレイヤーイベントを使う。

dataLayer.filter(function (x) { return x.event === 'イベント名' }).length === 0
javascript

これがtrueであればそのイベントは発生していない。 イベントBが発生していなければイベントCを発生させるコードが以下になる。 これをトリガーAによって呼び出されるカスタムHTMLタグとして設定し、トリガーにデータレイヤーイベント「イベントC」を設定すればいい。

dataLayer.filter(function (x) { return x.event === 'イベントB' }).length === 0 && dataLayer.push({'event': 'イベントC'})
javascript

KARTEなどのABテストツール／ウェブ接客ツール（ウェブの出し分けツール）を計測ツールと連携する場合、ABテストで表示するHTML内に以下のスクリプトを入れておく

dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'testing_fired',
  user_id: ユーザID,
  testing_id: テストID,
  creative_id: クリエイティブID,
  segment_id: セグメントID
});
javascript

ABテストツール（接客ツール）で

  • 誰に
  • どのテストで
  • どのパターンを
  • （どのセグメントに合致して）

表示したかをイベントとともにデータレイヤーに送る。ユーザID、テストID、クリエイティブIDはツールの埋め込み変数として用意されていることが多いので、それを入れる。セグメントIDはないこともある。 次にこのイベントをカスタムイベントとしてトリガーに登録し、

このトリガーをきっかけにGA4などの計測ツールを発火させる。

開発者ツールのコンソールで検証する際に便利なことだが、まずコンテナが1個しか設置されていないときは

dataLayer
javascript

でアクセスできる。同一ページに複数コンテナが設置されている場合にはコンテナIDを指定して取得することになるのだが、 コンテナIDを取得するには

google_tag_manager
javascript

ですべてのコンテナを確認できる。 コンテナGTM-ABC123のデータレイヤーは

window[google_tag_manager['GTM-ABC123'].dataLayer.name]
javascript

データレイヤーから特定の変数の値を取得するには

google_tag_manager['コンテナID'].dataLayer.get('変数名')
javascript

GTMの中では{{変数名}}で取得するが、これを使えばGTM外からでも取得できる。またdataLayer.push()で同一変数の値を上書きしている場合には最新の値を取得できる。 （参考）条件に合致した最後の（最後に送られた）データレイヤーの行を取得する

dataLayer.filter(function (x) { return x.event === 'get_page_speed' }).slice(-1)[0]
javascript

タグアシスタントを使うとトリガーの適用状況がわかるが、タグアシスタントを使わなくても開発者ツールでデータレイヤーを直接参照すればイベントの発生状況を知ることができる。

データレイヤーの行で

event: イベント名
javascript

が各イベントを表す。 ビルトイントリガーで

  • gtm.js
  • gtm.dom
  • gtm.load

がそれぞれ「ページビュー」「DOM Ready」「ウィンドウの読み込み」に該当する。gtm.jsが複数行あるのは、コンテナが複数設置されている場合。

  • スクロールトリガーが有効になっている場合はgtm.scrollDepth
  • クリックトリガーが有効になっている場合はgtm.click
  • リンククリックトリガーが有効になっている場合はgtm.linkClick

がある。 トリガーグループを設定している場合はgtm.triggerGroupがあり、その行のgtm.triggersの値にそのグループを構成するトリガーが含まれている。 ユーザが送ったカスタムイベントはそのままそのカスタムイベント名になる。たとえばdataLayer.push({event: 'get_page_speed'})で送ったイベントは

get_page_speed
javascript

という名前になっている。 これを見てトリガーの発生した順番を知ることができる。

一般にはGTMにログインしている状態でタグアシスタントを起動できるが、gtag.js（グローバルサイトタグ）が設置されている場合はそれが不要。GTMにログインしてなくても、つまりどんなサイトに対してもタグアシスタントを起動できる。GA4は確実だし、広告タグをGTMのテンプレートを使わずに設置する場合もそうなっている。 方法は検証したいページのURLの末尾にパラメータgtm_debug=xを付けてアクセスする。すると画面右下にダイアログが表示されるので

「Open debugger」をクリックするとデバッガの起動画面が表示されるのでこの後は通常のデバッグモードと同じようにURLを入力して起動する。
するとこのようにデバッグが有効化される。

同じブラウザでUser Agentを偽装してモバイル環境のテストを簡易的に行う（正式テストは実端末でね）。 Chromeに限るが、開発者ツールの赤枠のボタンから「More tools」＞「Network Conditions」

User Agentの「Select automatically」のチェックを外してプルダウンメニューからブラウザを選択する
適用してリロードする（以下を参照）。

タグアシスタントを起動するときにしかURLを指定できないので不便だが、開発者ツールのコンソールを使えば任意のページにアクセスできる。 指定したURLにアクセスしたい場合

location.href = 'https://www...'
text

再読み込み

location.reload()
javascript

1ページ前に戻る

history.back()
javascript