GoogleAnalyticsで非同期トラッキングのコールバックを受け取る

概要

そんな気はしてたけど、下記のようにonclickで_gaq.push()するとページ遷移でトラッキングが中断されて計測漏れすることがあるらしい。

<a href="hoge.html" onclick="_gaq.push(['_trackPageview', 'click/hoge']);">hogeへ</a>

_trackPageViewや_trackEventのコールバックを設定できるようになったので、トラッキング完了してからページ遷移することで計測漏れをなくせるはず。

_gaq.push(['_trackPageview', {
  page       : 'click/hoge',
  hitCallback: function () {
    console.log('トラッキング完了!');
  }
}]);

コールバックを使ってトラック完了後にページ遷移する

注意点としては、CtrlやCommandを押下しながらのリンククリックや、targetが_self以外の時は別窓で開くのでそもそもコールバックで何かする必要はないということ。同じ窓でページ遷移する場合のみコールバックでページ遷移する(if内の処理)。

$.extend($, {
  gaPageview: function(page, callback) {
    _gaq.push([
      '_trackPageview', {
        page: page,
        hitCallback: callback
      }
    ]);
  }
});
$.fn.extend({
  gaPageview: function(attr) {
    return this.on('click', function(e) {
      var $el, callback, page, target;
      $el = $(this);
      page = $el.attr(attr);
      if (page == null) {
        return;
      }
      if ($el.is('a')) {
        target = $el.attr('target');
        if (!e.ctrlKey && !e.metaKey && (!target || target === '_self')) {
          e.preventDefault();
          callback = function() {
            location.href = $el.attr('href');
          };
        }
      }
      $.gaPageview(page, callback);
    });
  }
});

こんな感じでjQueryを拡張しておくと、下記のように設定も楽。

$(function () {
  $('a[data-ga]').gaPageview('data-ga');
});

<ul>
  <li><a href="#hoge" data-ga="internal">internal</a></li>
  <li><a href="dummy.html" data-ga="none">none</a></li>
  <li><a href="dummy.html" target="" data-ga="empty">empty</a></li>
  <li><a href="dummy.html" target="_self" data-ga="_self">_self</a></li>
  <li><a href="dummy.html" target="_blank" data-ga="_blank">_blank</a></li>
  <li><a href="dummy.html" target="dummy" data-ga="dummy">dummy</a></li>
</ul>

関連記事

Googleアナリティクス非同期コードにおける新しいAPIについて｜コラム アユダンテ株式会社
Advanced Configuration - Web Tracking (analytics.js) - Google Analytics — Google Developers
JavaScript - この夏Google Analyticsが新しくなるって知ってた？Universal Analyticsを予習しよう - Qiita [キータ]