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

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

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;
})()

以上、かんたんですがjavascriptでイベントトラッキングコードを操作する方法になります。

 

Category: Webサイト作成Tags: Analyticsアクセス解析

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × two =