$shibayu36->blog;

クラスター株式会社のソフトウェアエンジニアです。エンジニアリングや読書などについて書いています。

特定のHTML属性を追加するだけでリンククリック計測したい(Google Tag Managerを利用して)

今日はGoogle Tag Managerの設定をすることで、自分が好きなエリアのリンククリック計測を簡単にする方法について書く。

課題

  • クリック計測は自作で作るのは大変
  • Google Tag Managerで計測することもできるが、計測対象を増やすためにタグを毎回一つ増やすというのも大変
    • 他の開発メンバーに教えるのもだるい
  • Google Tag Managerを一回設定しておけば、あとはちょっと本サイトのHTMLをいじると計測を追加できるようにしたい

やりたいこと

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という名前を付けて、以下のように設定する。

f:id:shiba_yu36:20161212092851p:plain

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でなければ発火するようにしておく。

f:id:shiba_yu36:20161212093311p:plain

これも単純で、トリガーの種類に「クリック - リンクのみ」を設定した上で、ParentLinkClickActionNameがunknownに等しくないという条件を加えているだけ。unknownに等しくないという条件を加えることで、祖先要素にdata-gtm-linkc-click-action-name属性を持つ要素がない時に、リンククリック計測を発火させないことができる。


Google Tag Managerの最後の設定として、Google Analyticsへのイベント送信のタグを設定する。設定は以下のとおり。

f:id:shiba_yu36:20161212093658p:plain

これも単純で、トラッキングIDを設定して、トラッキングタイプにはイベント、カテゴリ・アクション・ラベルは作戦通りに、

  • カテゴリ = "LinkClick"
  • アクション = {{ParentLinkClickActionName}}
  • ラベル = {{Click URL}}

としている。


ここまででGoogle Tag Managerの設定は完了。

HTMLの設定

続いて計測したい要素のHTMLを設定する。例えば僕のブログの「おすすめの本」というサイドバーウィジェットのクリック数を計測してみる。

f:id:shiba_yu36:20161212094010p:plain

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を一つしか設定していなかったので、イベントアクションも一つしか出ていないが、複数設定しておくと、ここにいくつも出る。

f:id:shiba_yu36:20161212094429p:plain


さらに、イベントアクション名をクリックすると、クリックされたURLがイベントラベルに入っているので、クリックされたURLの一覧が出る。

f:id:shiba_yu36:20161212094632p:plain


もちろん、Google Analyticsなので、イベントアクションの正規表現絞り込みや、セグメントを切る絞り込みなども行える。便利。

まとめ

ここまで設定できれば、あとは本番のクリック計測したい要素にdata-gtm-link-click-action-nameを入れて、デプロイするだけで計測ができるようになった。このようにしておくと、開発メンバーがいつもの開発プロセスでクリック計測を導入することができ、わざわざクリック計測を入れるためだけにGoogle Tag Managerの設定を教えるということをしなくても良くなった。

ただし、デプロイを待たず気軽にクリック計測を入れたい時もあると思う。その時はその場合だけGoogle Tag Managerだけで計測するとか、柔軟に対処すれば良いかと思う。