イベントトラッキングが効いていなかった

アクセス解析に使わせてもらっているGoogleアナリティクスには「イベントトラッキング」という機能があります。

イベントトラッキング - ウェブトラッキング（analytics.js） - Google アナリティクス — Google Developers

少し前に知って試しに組み込んでみたのですが、一向にカウントが増えません。

どうやら記述方法が悪かったようです。

ユニバーサルアナリティクスで用いられる「analytics.js」は以下のような指定をしています。

analytics.js の概要 - Google アナリティクス — Google Developers

<!-- 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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

</script>
<!-- End Google Analytics -->

アカウントの部分を修正したうえでヘッダに組み込むことで、ページビューが記録されていきます。

イベントトラッキングの場合、以下のように記述を追加します。

<!-- 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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
// Using jQuery Event API v1.3
$('#button').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});
</script>
<!-- End Google Analytics -->

jQueryが有効であれば、id属性に"button"が指定されている要素をクリックした際にイベントが記録されます。

冒頭のリンク先に紹介されている記述をそのまま追加しただけなのですが、これだと動きません。

少し玄人ぶって、Googleアナリティクスのイベントトラッキングをサイト改善に使ってみよう！

こちらの記事を拝見しているうちに気付いたんですが、これだとonclickが付与されていなさそうです。

ということで、以下のように修正する必要があります。

<!-- 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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
$(function(){
  // Using jQuery Event API v1.3
  $('#button').on('click', function() {
    ga('send', 'event', 'button', 'click', 'nav-buttons');
  });
});
</script>
<!-- End Google Analytics -->

指摘されてみればその通りなのですが、onload時に実行するにはready内に記述する必要があります。

なお、readyは省略可能です。

jQuery入門講座使い方-jQueryの省略構文

さらに個人的な罠に嵌っていて、なかなか気付けなかったのですが、実はこれでもスクリプトエラーが出ていました。

はてなブログでは、「設定」メニューにhead要素を編集できる箇所があり、上記の内容はそちらに記述していました。

一方で、「デザイン」にもヘッダ要素を編集できる箇所があり、そちらでjQueryの読み込みを行っておりました。

これらの影響で、jQueryが読み込まれる前にアナリティクスの記述でjQueryを使用しており、裏でスクリプトエラーが発生していました…

現在は、ようやくですが少しずつイベントトラッキングも記録され始めているようです。

今のところはクリックするような要素があまりないのでリンクのみですが、いずれは解析内容を拡張していきたいと思います。