JavaScriptを使ってAタグの全てにonclickイベントを動的に追加する方法を解説！

function ga_event_click(el) {

  //以下の方法(activeElement)では、クロムでは動くか、サファリだとうまく動かない！
  //var el = document.activeElement;
  var url = el.href;

  //リンク先を取得する
  console.log(url);

  var pattern1 = 'px.a8.net';
  var pathname = decodeURI(location.pathname)
  var result = pathname.split("/").filter(e => Boolean(e));
  pathname = result[result.length - 1];
  //alert(pathname);
  if (url.indexOf(pattern1) > -1) {
    //パターンに一致した
    //alert("パターンに一致した");
    //日本語と英語のみ取得(もう少し改善が必要)
    var bar = el.textContent.match(/[亜-熙ぁ-んァ-ヶa-zA-Z]+/);
    s =  sprintf("%s 「%s」 「%s」", pathname, document.title, bar)
    
    //ここでGoogle Analyticsにイベント送信
    gtag('event', 'official_page', {
      'event_category': 'a8_open', 'event_label': s
    }
    );
  }
}
//aタグにonclickを追加する(ただしすでに設定されているものには設定しない)
function add_a_tag_onclick() {

  //全てのドキュメントの要素を取り出す
  var all = document.all;
  var n = all.length;
  for (i = 0; i < n; ++i) {
    var el = all(i);
    var tag = el.tagName;
    if (tag == "A") {
      //onclickが設定されているか？
      if (el.getAttribute("onclick") != null) {
        //onclickが設定されているので追加しなし
        //s = el.getAttribute("onclick");
        //alert(s);
        continue;
      }
  
      //ここでonclickのイベントを追加する
      el.onclick = function () { ga_event_click(this); }
    }
  }
}
jQuery(document).ready(function ($) {
  //Aタグを設定する
  add_a_tag_onclick();
}
);