jQueryでGoogle Analyticsのイベントトラッキングの簡単な設定方法

イベントトラッキングのイラスト

Google Analyticsのイベントトラッキングを設定すると、リンクのクリック数などユーザーの行動を計測することができるようになり、サイトの分析がはかどるだけでなく、ページのPDCAを早くすることができます

今回は、jQueryでGoogle Analyticsのイベントトラッキングの簡単な設定方法についてご紹介します。

イベントトラッキングとは?

イベントトラッキングとは、Google Analytics内でユーザーの行動を、トラッキングの直訳の通り追跡する機能です。

イベントトラッキングを設定することで、特定のページ内でのユーザーの動きやページ遷移の詳細の情報を見ることができるようになり、計測したいURLが含まれたHTMLコードにイベントトラッキング用タグを記述することで設定できます。

このイベントトラッキングは、色々な場合に活用ができ、以下のような数値を把握したい場合に便利な数値です。

  • リンクが何回クリックされたか
  • ファイルが何回ダウンロードされたか
  • 最もクリックされたリンクやボタンはどれか
  • どのくらい外部リンクへ移動しているか
  • イベントはどの順番で起きているか

上記の例のような複数のポイントをトラッキングすることも可能で、複数の指標を合わせて分析することも可能になります。

イベントトラッキングの準備

イベントトラッキングをそれぞれ計測できるよう準備が必要です。

この準備は、Google Analyticsのトラッキングコードのバージョンにより、記述が多少変わります。

2017年以降に設置:gtag.js

2017年以降、WEBサイトにGoogle Analyticsを設置した場合、最新バージョンである以下のような gtag.js が適用されます。

JavaScript

<!-- Global site tag (gtag.js) - Google Analytics --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script> 
<script>
 window.dataLayer = window.dataLayer || []; 
 function gtag(){dataLayer.push(arguments);} 
 gtag('js', new Date()); 

 gtag('config', 'GA_TRACKING_ID'); 
</script>

トラッキングコードを実装する位置は、HTMLソースの </head> タグの直前が推奨されており、実際のトラッキングコードは、Google Analyticsの「管理→プロパティ→トラッキング情報」から確認できます。

2017年より以前に設置:analytics.js

2017年より以前にGoogle Analyticsを設置した場合、analytics.jsが適用され、トラッキングコードの記述は以下のようになります。

JavaScript

<!-- Google Analytics --> 
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 

ga('create', 'UA-TRACKING-ID', 'auto'); 
ga('send', 'pageview'); 
</script> 
<!-- End Google Analytics -->

jQueryでgtag.jsのイベントトラッキングを実装する方法

イベントトラッキングを細かく指定するのは非常に大変ですが、gtag.jsでトラッキングコードを設置している場合、 jQuery を使用することで動的に処理することができます

以下は、jQueryを使用してイベントトラッキングを動的に指定する方法です。

JavaScript

<script>
/* gtag.jsイベントトラッキング */
$(function() {
  $('a').click(function(e) {
    var ahref = $(this).attr('href');
    if(ahref.indexOf('WEBサイトURL') != -1 || ahref.indexOf('http') == -1 ) {
      ga('send','event','inlink','<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>',ahref);
    }else{
      ga('send','event','outlink','<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>',ahref);
    }
  });
});
</script>

WEBサイトURLの箇所は、外部リンクか内部リンクを判断する為www.dubdesign.net という場合、dubdesign.net と指定して記述しましょう。

実装の前の注意点

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
上記のような記述が、htmlファイルの
<head></head>
の中に無い場合その中へ貼り付けましょう。

参考サイト

参考Googleアナリティクスイベントトラッキング|設定方法から注意点・おすすめのプラグイン紹介PLAN-B

レンタルサーバー