アナリティクスのイベントトラッキングで設定値（アクション、カテゴリ、ラベル）を変更する方法

2020年4月14日

Googleアナリティクスのイベントトラッキングで設定する、解析用タグ（ga, gtag）のパラメータをjavascriptで変更する方法を紹介します。

たくさんある方法の中の1つに過ぎませんが。。。

例えばこんなときに役立ちます。

レスポンシブの切り替わりに合わせて、イベントのカテゴリ値を動的に変更する
操作の結果に応じてイベントのラベル値を動的に変更する

サンプルコード

ポイントは独自パラメータをaタグ等に付与して、かつイベント送信処理をjavascriptに任せることです。

htmlコード

html側ではparam-xx部分を動的に操作します。

<p><a class="monitor-gtag" href="/option" param-ga="LP1" param-gc="shop" param-gl="banner01">オプションを見る</a></p>

<p><a class="monitor-gtag" href="/cart" param-ga="LP1" param-gc="shop" param-gl="banner02">カートに入れる</a></p>

Javascriptコード

一部jQueryを使ってますが、通常のjavascriptでも考え方は一緒です。

window.addEventListener('DOMContentLoaded',function(){
  new sendEvent();
})
var sendEvent = (function(){
  function sendEvent(){
    var aTag = this;
    // このサンプルではクラス名「monitor-gtag」の要素クリックがトリガーとなります
    this._apps = document.querySelectorAll('.monitor-gtag');
    Array.prototype.forEach.call(aTag._apps,function(el){
      el.addEventListener('click',function(){
        // ここで独自パラメータ（param-ga、param-gc、param-gl）を解析タグにセットします
        // gaタグでも同様です
        gtag('event',$(this).attr('param-ga'),{'event_category': $(this).attr('param-gc'),'event_label': $(this).attr('param-gl')});
      })
    })
  }
  return sendEvent;
})()