Google AnalyticsでTwitterのログを取る（たぶん）正しい方法

SEO JavaScript

へいへいほ〜、鳥さんへいへいほ〜！

タイトルの通りだけど、つかかなーり遅めだけど、
Google AnalyticsでTwitterのアクションをトラッキングする（たぶん）正しい方法を紹介してみるよっ

余談だけど、このアクセス解析ガンガン進歩してて、追いかけるのがタイヘン（￣▽￣；

キーは以下のとおり：

つまり、Twitterの公式のウィジェットコードをいじらないと、まともにトラッキングできないのん。
以下が公式ウィジェットの吐くツイートボタンのソースコードね↓

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これのJavaScript部分を下記に張り替えないといけない↓

<script>window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, "script", "twitter-wjs"));
</script>

つまり、ツイッターのウィジェット埋め込み完了のタイミングを検知できるようにするの。
で、必ずこのコードの後にトラッキングコードを入れる。

DOMのロードが完了していないと、twttr変数すら未定義って怒られるので、jQuery的には$(function(){と});の間に入れるのさ。
つまり、Twitterトラッキングの事前準備コードの最後の部分だけど、以下のとおり。（jQuery利用の場合を想定）

$(function(){
  _ga.trackSocial();
});

で、ウィジェットの埋め込みが完了してからトラッキングコードをバインドするようにしているのが以下のコード。

_ga.trackSocial = function(opt_pageUrl, opt_trackerName) {
  twttr.ready(function (twttr) {
    _ga.trackTwitter(opt_pageUrl, opt_trackerName);
  });
};

最後に、中身のトラッキングコードを実装。
Google Analyticsのソーシャルトラッキングは出来ることがイベントより少なくて100%使いまわせるので、下記コードでOK。

var twttrFunc = function(event) {
  if (event) {
    var targetUrl; // Default value is undefined.
    if (event.target && event.target.nodeName == 'IFRAME') {
      targetUrl = _ga.extractParamFromUri_(event.target.src, 'url');
    }
    _gaq.push([trackerName + '_trackSocial', 'twitter', event.type,
      targetUrl, opt_pageUrl]);
  }
};

これの関数を、5種類すべてのイベントにバインドする。

twttr.events.bind('tweet', twttrFunc);
twttr.events.bind('click', twttrFunc);
twttr.events.bind('retweet', twttrFunc);
twttr.events.bind('favorite', twttrFunc);
twttr.events.bind('follow', twttrFunc);

つまり、下記のコードを外部JS化して保存、そしてTwitterのウィジェットコードの後で読み込むんだ！
なんだかGoogle側のコードはやけにiframeにこだわってるのだけど、謎す。

var _ga = _ga || {};
var _gaq = _gaq || [];
_ga.trackSocial = function(opt_pageUrl, opt_trackerName) {
  twttr.ready(function (twttr) {
    _ga.trackTwitter(opt_pageUrl, opt_trackerName);
  });
};
_ga.trackTwitter = function(opt_pageUrl, opt_trackerName) {
  var trackerName = _ga.buildTrackerName_(opt_trackerName);
  try {
    if (twttr && twttr.events && twttr.events.bind) {
      var twttrFunc = function(event) {
        if (event) {
          var targetUrl; // Default value is undefined.
          if (event.target && event.target.nodeName == 'IFRAME') {
            targetUrl = _ga.extractParamFromUri_(event.target.src, 'url');
          }
          _gaq.push([trackerName + '_trackSocial', 'twitter', event.type,
            targetUrl, opt_pageUrl]);
        }
      };

      // tweet
      twttr.events.bind('tweet', twttrFunc);
      twttr.events.bind('click', twttrFunc);
      twttr.events.bind('retweet', twttrFunc);
      twttr.events.bind('favorite', twttrFunc);
      twttr.events.bind('follow', twttrFunc);
    }
  } catch (e) {}
};
_ga.extractParamFromUri_ = function(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
};

$(function(){
  _ga.trackSocial();
});

Gistにコードを入れてみたよ！

Tracking Twitter Widget Action with Google Analytics - Gist

参考URL

でわでわ。