今日はGoogle Tag Managerの設定をすることで、自分が好きなエリアのリンククリック計測を簡単にする方法について書く。
課題
やりたいこと
Google Tag Managerを一回設定しておけば、あとはHTMLにちょっとした属性をいれるだけで、その要素内のリンククリックを計測したい。つまり、Google Tag Managerを一度設定しておくだけで、
<section data-gtm-link-click-action-name="RecommendedBooks"> <a href="/hoge">本1</a> <a href="/fuga">本2</a> <a href="/piyo">本3</a> </section>
のように、data-gtm-link-click-action-nameという属性を設定するだけで、その要素内のリンククリック計測ができるようにしたい。
作戦
リンクをクリックした時に、その祖先要素にdata-gtm-link-click-action-nameがあったら、Google Analyticsにイベントを送信する作戦とする。Google Analyticsには
- イベントカテゴリは「LinkClick」
- イベントアクションはdata-gtm-link-click-action-nameに指定された文字列
- イベントラベルはクリックされたURL
を送る。
Google Tag Managerの設定
まず、クリックされた要素の祖先要素にdata-gtm-link-click-action-nameがあればその値を、なければunknownを返すような変数をGoogle Tag Managerに定義する。Google Tag Managerの変数はカスタムJavaScriptという定義方法はかなり柔軟に設定できるので、これを利用する。ParentLinkClickActionNameという名前を付けて、以下のように設定する。
function () { // 自分自身を含めて祖先要素の情報を辿っていく。 // 見つからなければunknownが返る。 var current = {{Click Element}}; while (current) { var actionName = current.getAttribute('data-gtm-link-click-action-name'); if (actionName) { return actionName; } current = current.parentElement; } return 'unknown'; }
実装は簡単で、親をずっと辿っていって属性があればその値を、なければループを抜けてunknownを返しているだけである。最初の{{Click Element}}というのは、Google Tag Managerに定義されている変数で、クリックされた要素を返してくれる。このような変数はカスタムJavaScriptからでも参照できるようになっている。
続いてトリガーの設定。全てのページのリンククリックで、かつParentLinkClickActionNameがunknownでなければ発火するようにしておく。
これも単純で、トリガーの種類に「クリック - リンクのみ」を設定した上で、ParentLinkClickActionNameがunknownに等しくないという条件を加えているだけ。unknownに等しくないという条件を加えることで、祖先要素にdata-gtm-linkc-click-action-name属性を持つ要素がない時に、リンククリック計測を発火させないことができる。
Google Tag Managerの最後の設定として、Google Analyticsへのイベント送信のタグを設定する。設定は以下のとおり。
これも単純で、トラッキングIDを設定して、トラッキングタイプにはイベント、カテゴリ・アクション・ラベルは作戦通りに、
- カテゴリ = "LinkClick"
- アクション = {{ParentLinkClickActionName}}
- ラベル = {{Click URL}}
としている。
ここまででGoogle Tag Managerの設定は完了。
HTMLの設定
続いて計測したい要素のHTMLを設定する。例えば僕のブログの「おすすめの本」というサイドバーウィジェットのクリック数を計測してみる。
HTMLの設定は以下のとおり。一番上の要素であるulにdata-gtm-link-click-action-name="RecommendedBook"というものを設定していることがわかる。設定はこれで終わり。
<ul class="footer-widget" data-gtm-link-click-action-name="RecommendedBook"> <li class="widget-item"> <div class="widget-item-img"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4839924023/shibayu36-22/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51A8BTrHYxL._SL160_.jpg" alt="アジャイルな見積りと計画づくり" style="border: none;" /></a> </div> <h4 class="widget-item-label"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4839924023/shibayu36-22/" target="_blank">アジャイルな見積りと計画づくり</a> </h4> <p> 変化が起こる状況下での見積り方法について教えてくれる本<br/> <a href="http://blog.shibayu36.org/entry/2014/03/25/090923" target="_blank">感想を読む</a> </p> </li> <li class="widget-item"> <div class="widget-item-img"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4872906160/shibayu36-22/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/510AQmjhylL._SL160_.jpg" alt="そうか、君は課長になったのか。 (ポケット・シリーズ)" style="border: none;" /></a> </div> <h4 class="widget-item-label"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4872906160/shibayu36-22/" target="_blank">そうか、君は課長になったのか。 (ポケット・シリーズ)</a> </h4> <p> 部下へ向けた手紙風の文章でマネジャーのエッセンスを学べる<br/> <a href="http://blog.shibayu36.org/entry/2014/12/20/164505" target="_blank">感想を読む</a> </p> </li> </ul>
結果を見る
あとはこれをGoogle Analyticsのイベントで結果を見る。Analyticsの「行動 > サマリー」からLink Clickというイベントを探してクリックし、さらにプライマリディメンションをイベントアクションにすると、クリックの様子がわかる。今回はdata-gtm-link-click-action-nameを一つしか設定していなかったので、イベントアクションも一つしか出ていないが、複数設定しておくと、ここにいくつも出る。
さらに、イベントアクション名をクリックすると、クリックされたURLがイベントラベルに入っているので、クリックされたURLの一覧が出る。
もちろん、Google Analyticsなので、イベントアクションの正規表現絞り込みや、セグメントを切る絞り込みなども行える。便利。
