Google Tag ManagerのAuto-Event TrackingはEvent Listenerとルールを分けて設定する
公開日： 執筆：佐藤
Google Tag Managerでクリックを計測するときは、操作を検知するEvent Listener、計測対象を絞るルール、Google Analyticsへ値を送るイベントタグを分けて設定します。Event Listenerを置いただけでは、Google Analyticsのイベントは記録されません。
先に決めるのは、どの操作を何のために測るかです。たとえば、問い合わせページへのボタンが押された回数を知りたいなら、そのボタンを特定できる属性と、Google Analyticsへ送るCategory、Action、Labelを決めます。そのあとでAuto-Event Trackingを設定します。
Event Listenerは操作を検知する役割を持つ
Auto-Event Trackingでは、Google Tag ManagerのEvent Listenerタグが、ページ上で発生する操作を検知します。Googleの公式発表は、フォーム送信、クリック、一定時間の経過を対象にできると説明しています。
クリックを測る場合は、クリック用のEvent Listenerを作ります。ここで決めるのは、どのページでクリックを待ち受けるかです。サイト全体のクリックが必要でなければ、対象のボタンがあるページだけで動かします。
Event Listenerは、操作が起きたことをGoogle Tag Managerへ知らせます。どのクリックを成果としてGoogle Analyticsへ送るかまでは決めません。検知と送信を一つの設定だと思うと、必要のないクリックまで数えたり、何も送られていないのに計測できたと思ったりします。
ルールは計測対象のクリックだけを選ぶ
次に、Event Listenerが検知した操作のうち、計測する対象だけを選ぶルールを作ります。問い合わせボタンなら、要素のidやリンク先URLなど、ほかの要素と区別できる条件を使います。
次のHTMLは説明用の仮例です。
<a id="contact-button" href="/contact/">お問い合わせ</a>
この例では、contact-buttonというidと、/contact/というリンク先を候補にできます。画面に表示する「お問い合わせ」という文字だけを条件にすると、同じ文字のリンクを追加したときに対象が増える場合があります。装飾用のclassだけを条件にすると、デザイン変更で計測が止まる場合もあります。
Auto-Event Variableは、操作された要素の属性をルールや送信値で使うためのものです。公式発表では、要素のIDやフォームのtarget属性で対象を絞る例が示されています。使える値を並べる前に、変更されにくく、一つの操作を特定できる条件を選びます。
Google Analyticsのイベントタグが値を送る
対象を選ぶルールを作ったら、Google Analyticsのイベントタグへそのルールを割り当てます。イベントのCategory、Action、Labelは、レポートで比較したい単位に合わせます。
問い合わせボタンを測る仮例なら、次のように分けられます。
| 項目 | 仮の値 | 役割 |
|---|---|---|
| Category | navigation |
同じ種類の操作をまとめる |
| Action | click |
利用者が行った操作を示す |
| Label | contact-button |
対象の部品を区別する |
値の名前は、サイトの計測方針に合わせて決めます。button1、button2のように画面を見なければ意味が分からない名前より、あとから操作と場所を特定できる名前を残します。
Event Listener、ルール、Google Analyticsのイベントタグは、次の順でつながります。
- Event Listenerがクリックを検知する。
- ルールが要素のIDやリンク先を調べる。
- 条件に一致したときだけ、イベントタグがCategory、Action、Labelを送る。
処理を三つへ分けておけば、検知できないのか、条件が合わないのか、送信タグが動かないのかを切り分けられます。
HTMLを編集しないことと検証が不要なことは違う
Auto-Event Trackingを使うと、対象のボタンごとにイベント送信用のJavaScriptをHTMLへ書き加えずに済みます。ただし、Google Tag Managerのコンテナコードは、あらかじめサイトへ設置されている必要があります。
また、対象を安定して特定できるidやリンク先がなければ、HTMLを直したほうが管理しやすいことがあります。コードを一切変えないことを優先し、複雑な文字列条件や壊れやすいclassへ依存してはいけません。目的はHTML編集を避けることではなく、必要な操作を継続して同じ基準で測ることです。
サイトの動作も変わります。JavaScriptがフォーム送信を独自処理している場合など、通常の操作として検知できるかは実装ごとに確認します。Auto-Event Trackingという機能名だけで、すべてのクリックや送信を取得できるとは判断しません。
Previewで対象と対象外を一緒に試す
本番へ反映する前に、Google Tag ManagerのPreview modeで、対象のボタンを押した場合と、近くにある対象外のリンクを押した場合を試します。
確認する結果は三つです。Event Listenerが操作を検知したか、ルールが意図した要素だけで一致したか、Google Analyticsのイベントタグが一度だけ動いたかです。対象の操作で動かない場合だけでなく、対象外の操作で動いてしまう場合も失敗です。
本番反映後は、Google Analytics側でCategory、Action、Labelが意図した値になっているかを確認します。Google Tag Managerでタグが動いた表示と、Google Analyticsへ期待した値が記録された結果を分けて見ます。
制作や計測設定を委託する場合は、Google Tag Managerのアカウントを会社側で管理します。計測する操作、対象ページ、Event Listener、ルールの条件、送信するCategory、Action、Label、公開したVersionを引継ぎ資料へ残します。完成画面だけでは、どの操作をどの条件で数えているか分かりません。
最初の一手は、計測したいクリックを一つ選び、対象を特定する属性と、Google Analyticsへ送る三つの値を書き出すことです。
関連記事
