GoogleAnalyticsで既存記事に手を加えずにクリックを計測するJavaScript

やりたいこと

GoogleAnalyticsでイベント計測できることは知っているが、既存記事が大量にあってクリック計測用のイベントが仕込まれていない状態のWordPressサイトがある。既存記事のリンクを書き換えるのは面倒なのでJavaScriptでリンククリックを計測できるようにする。

GoogleAnalyticsでクリック計測されるとわかること

• どの記事でリンククリックが沢山発生しているかの把握 → 大事な記事からSEO改善できる
• どの商材が売れているかの把握 → 商材が複数ある場合、どれが売れているかの把握と売れているならば記事の補強・リライトなどに活かせる
• 目次や内部リンクなどの効果測定

実装方法の選択肢

• GoogleTagマネージャーならaタグをいじらなくても簡単に設定できる https://mtame.jp/marketing_foundation/tagmanager
• jQuery導入サイトならクリック計測用のScriptが転がっている。

jQueryのイベント計測用JavaScript

いろんなサンプルが転がっているけれども動かない奴も多い。下記は手元で動いているもの。test.comの所をご自分のドメインに書き換えれば最低限動くはず。分岐を増やす場合目次クリックの判定でやっているようにelse if(){}でahrefの文字列をindexOfするなどしてください。

<script>
  window.onload = function() {  
    jQuery("a").click(function(e) {
        var ahref = jQuery(this).attr('href');
        if (ahref.indexOf('test.com') != -1) { // hrefがtest.comだったら内部リンクとみなす
          gtag('event', 'click', {'event_category': '内部リンク','event_label': ahref});
        }  else if(ahref.indexOf('#') == 0) { // アンカー（#）の場合Table of Contents Plusなど目次やメニュー系クリック。#hogehogeだとリンク先が分かりづらいのでラベルを取得する
          gtag('event', 'click', {'event_category': '目次クリック','event_label': jQuery(this).text()});
        } else { // 内部リンクや目次クリックなどを除外した残りが外部リンク。
          gtag('event', 'click', {'event_category': '外部リンク','event_label': ahref});
        };   
    });
};
</script>