gtag.jsのイベントをユーザーエージェント毎に変える

もしかしたら使うかもしれないので、作ったやつ。

HTML

<a class="js-gtag" id="link01" href="#">リンク1</a>
<a class="js-gtag" id="link02" href="#">リンク2</a>

JavaScript

const ua = navigator.userAgent.toLowerCase();
const isMobile = /i(phone|pod)/.test(ua)||/android(.+)?mobile/.test(ua);

const _importGtag = function(target, category, action) {
  const $gtagTarget = $(`.${target}`);

  $gtagTarget.each(function() {
    let $this = $(this);
    let _id = $this.attr('id');

    let _ua;
    if (isMobile) {
      _ua = 'mobile';
    } else {
      _ua = 'notMobile';
    }

    let _event = `gtag('event', '${action}', {'event_category': '${category}', 'event_label': '${_id}_${_ua}'});`;

    $this.attr('onclick', _event);
  });
};

// _importGtag('クラス名', 'カテゴリー', 'アクション');
_importGtag('js-gtag','category_name','action_name');

スマホでリンク1をタップすると、event_labelがlink01_mobileになる。
それ以外でリンク2をクリックすると、event_labelがlink02_notMobileになる。

以上。