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

 

ブログなど、すでにリンク(Aタグ)をたくさん配置してあるページに、あとからonclickを付け加えるのって面倒ですよね?

 

今回は、JavaScriptを使ってAタグの全てにonclickイベントを動的に追加する方法を解説します。

 

 

背景

ブログの運営において、どのリンク(Aタグ)がクリックされているのか、気になってしまいました。

 

そこで、Google Analyticsのイベント機能を使って、Aタグでonclickされたときに、Analyticsにイベント情報を送ればよいです。

しかし、onclickをいちいち設定するのが面倒です。

 

 

そこで、JavaScriptを使ってページが読み込まれたときに、自動的にonclickを付与するようにしました。

なお、既にonclickが設定されている場合は、書き換えないように考慮しました。

 

JavaScriptで全てのAタグにonclickをつける方法!

 

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

 

その結果、Aタグ全てにonclickを付与することができました!

リンクをクリックしたときにコンソールのログで動作を確認できるかと思います。

 

めでたし、めでたし・・・

 

 

最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

プログラミングスクール検索・比較表サイト

ワンクリック、さらに詳細に条件を指定してプログラミングスクールの検索ができます。さらに比較表により特徴を細かく比較できる!

CTR IMG