ソーシャル インタラクション - ウェブ トラッキング（ga.js）

このドキュメントでは、Google アナリティクスを使用して、Google 以外のネットワークでのインタラクション指標（Facebook や Twitter など）を取得する方法について説明します。サイト所有者、コンテンツ管理プラグインのデベロッパー、または共有ボタンのユーザーに自動ソーシャル インタラクション レポートを提供したいソーシャル ネットワーク事業者の方は、このドキュメントを使用して、ソーシャル共有ボタン向けにアナリティクスを設定します。

はじめに

Google アナリティクスには、 +1 ボタン用の統合レポートがデフォルトで用意されています。つまり、ga.js と +1 ボタンを同じページに実装している場合は、すべての +1 ソーシャル インタラクションが自動的にレポートされます。+1 アナリティクスの詳細（トラブルシューティングのヒントなど）については、ヘルプセンターのソーシャル アナリティクスについてをご覧ください。

Facebook や Twitter など、他のネットワークのソーシャル インタラクションに関するアナリティクスとレポートを取得するには、各ネットワーク ボタンに Google アナリティクスを統合する必要があります。ソーシャル プラグイン アナリティクスでは、Facebook の「いいね」や Twitter の「ツイート」など、さまざまなインタラクションが記録されています。イベント トラッキングでも一般的なコンテンツ インタラクションをトラッキングできますが、ソーシャル アナリティクスを利用すると、ソーシャル インタラクションを一貫性のあるフレームワークで記録できます。これにより、Google アナリティクスのレポートでは、複数のネットワークでソーシャル ネットワークの操作を比較した一貫性のあるレポートを入手できます。

アナリティクスを Facebook や Twitter のボタンと統合する方法の実用的な例については、ソーシャル アナリティクスのサンプルコードをご覧ください。

ソーシャル分析の設定

ソーシャル インタラクションのトラッキングを設定するには、_trackSocial メソッドを使って、ソーシャル インタラクション データを Google アナリティクスに送信します。このメソッドは、ユーザーがソーシャル インタラクションを完了すると呼び出される必要があります。ソーシャル インタラクションが発生したタイミングを判断するには、ソーシャル ネットワークごとに異なるメカニズムを使用します。そのためには、通常、そのネットワーク ボタンの API との統合が必要になります。

ソーシャル アナリティクスの統合の詳細はソーシャル ネットワークによって異なるため、以降では各ネットワークでのソーシャル プラグイン アナリティクスのセットアップ方法に関する一般的なベスト プラクティスを説明します。ネットワーク固有の実装については、各ネットワークのデベロッパー向けドキュメントを確認することをおすすめします。

_trackSocial メソッドの説明を以下に示します。

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

ここで、パラメータは以下を表します。

  • network

    必須。トラッキング対象のソーシャル ネットワーク（Facebook、Twitter、LinkedIn など）を表す文字列。

  • socialAction

    必須。トラッキング対象のソーシャル アクション（いいね、共有、ツイートなど）を表す文字列。

  • opt_target

    省略可。アクションを受け取る URL（またはリソース）を表す文字列。たとえば、ユーザーがサイトのページで [Like] ボタンをクリックすると、opt_target がページのタイトル、またはコンテンツ マネジメント システムでページを識別するために使用される ID に設定されます。多くの場合、ユーザーが高く評価しているページは、表示しているページと同じものです。このパラメータが undefined であるか省略された場合、トラッキング コードはデフォルトで document.location.href を使用します。

  • opt_pagePath

    省略可。アクションが発生したパス（パラメータを含む）でページを表す文字列。たとえば、https://developers.google.com/analytics/devguides/ で [Like] ボタンをクリックした場合は、opt_pagePath を /analytics/devguides に設定する必要があります。ほとんどの場合、ページのパスがソーシャル アクションの発生元になります。そのため、このパラメータが undefined であるか省略されている場合、トラッキング コードはデフォルトで location.pathname と location.search を使用します。通常は、仮想ページビューをトラッキングする場合にのみ、Google アナリティクスの _trackPageview メソッドを使ってオプションのページ階層パラメータを変更します。

Facebook アクション

Facebook JavaScript SDK によると、次のコードを使用すると、ページに [Like] ボタンを簡単に設定できます。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

高評価

Google アナリティクスで「いいね！」を記録するには、Facebook の edge.create イベントにサブスクライブして、Google アナリティクスのトラッキング コードを実行するコールバック関数を作成します。

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

ユーザーがページを「いいね」すると、コールバック関数が実行され、高く評価されたリソースの URL を受け取ります。このリソースは _trackSocial メソッドに値として渡されます。これにより、Google アナリティクスは高く評価されたネットワーク、アクション、URL に関するレポートを作成できます。

高評価を取り消す

Facebook API を使用すると、「いいね！」など、他の興味深いイベントに登録することもできます。

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

共有数

共有することもできます。

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

Twitter ツイート

ツイートボタンのドキュメントと ウェブ インテントの JavaScript イベントによると、ページに Twitter ボタンを実装してユーザー操作を検出するには、次のコードを使用する必要があります。

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
  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>

Google アナリティクスでツイートボタンのイベントをトラッキングするには、Twitter のウェブ インテント JavaScript イベントを使用し、コールバック関数を Intent Event にバインドする必要があります。イベントをバインドする前にすべてが読み込まれるように、コールバック関数でイベント バインディングをラップすることが重要です。

function trackTwitter(intent_event) {
  if (intent_event) {
    var opt_pagePath;
    if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
          opt_target = extractParamFromUri(intent_event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
  }
}

//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
  //event bindings
  twttr.events.bind('tweet', trackTwitter);
});

ユーザーがツイートを送ると、コールバック関数はオブジェクトを受け取ります。通常、このオブジェクトを使って、ツイートしているリソースの URL を取得できます。Twitter の JavaScript コードが読み込まれると、アノテーション付きのツイートのリンクが iframe に変換され、ツイートされた URL がエンコードされ、クエリ パラメータとして iframe の URL に追加されます。コールバックに渡されるイベント オブジェクトにはこの iframe への参照があり、これを使用してツイート対象のリソースの URL を取得できます。

上記のコールバック関数は、iframe 参照が実際に iframe であることを確認し、url クエリ パラメータを確認して、ツイートされているリソースの抽出を試みます。

URI からクエリ パラメータを抽出する関数の例を次に示します。

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
}

パラメータがクエリ文字列内にある場合、このパラメータが返されます。パラメータが見つからない場合、関数は undefined を返します。これは _trackSocial メソッドに渡され、メソッドのデフォルトの動作が実行されます。

統合のベスト プラクティス

多くのサイトでは、コンテンツ管理プラグインを使用してソーシャル ボタンが追加されています。そうしたプラグインを作成した方は、ソーシャル プラグイン アナリティクスを統合して、こうした操作を自動的に記録することを強くおすすめします。同様に、ソーシャル ネットワークのデベロッパーは、ソーシャル アナリティクスと統合することで、Google アナリティクスでソーシャル ネットワークでの操作を簡単にトラッキングできるようになります。

このセクションでは、ソーシャル プラグイン アナリティクスを統合して、サービスや CMS でソーシャル インタラクションを自動的にトラッキングするためのおすすめの方法について説明します。これらのベスト プラクティスの実例を確認するには、ソーシャル プラグイン アナリティクスのサンプルコードをご覧ください。

_gaq キューのインスタンス化と使用

Google アナリティクスの最新バージョンのトラッキング コードは、同期と非同期のどちらの読み込みにも対応しています。まだ読み込まれていないメソッドを呼び出すことができるよう、Google アナリティクスにはコマンドキュー _gaq が用意されています。このキューには、トラッキング メソッドを _gaq.push(); プッシュできます。

トラッキング コードが読み込まれると、キュー内のすべてのコマンドが実行されます。Google アナリティクスの JavaScript トラッキング コードをプラグインやサービスと統合する際は、必ずこのコマンドキューをインスタンス化し、統合の際に _trackSocial コマンドをこの配列にプッシュするようにします。

var _gaq = _gaq || [];

これにより、受信側のウェブサイトのページで従来のトラッキング コード スニペットと非同期トラッキング コード スニペットのどちらが使用されているかに関係なく、メソッドが呼び出されることが合理的に保証されます。

ユーザー構成

ソーシャル プラグイン アナリティクスを統合するプラグインを開発する場合は、ユーザーがプラグインを使用するタイミングを設定できる以下のオプションを用意することを検討してください。

ページパス パラメータの設定（省略可） - _trackSocial メソッドの最後のパラメータは、ソーシャル インタラクションが発生した現在の URL をオーバーライドすることです。最終的な目標は、ページ トラッキングとソーシャル プラグイン解析の間で同じ URL がレポートされるようにすることです。ページビュー トラッキングでトラッキングされるデフォルトのページ URL をオーバーライドするユーザーもいるため、レポートの整合性を保つため、ソーシャル プラグイン アナリティクスで URL をオーバーライドする方法も必要です。

以下に、ユーザーがこれらのオプションを設定できるようにする方法と、コードでそれらに応答する方法の例を示します。

// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like',
            opt_target, opt_pagePath]);
      });
    }
  } catch(e) {}
}

上記の例では、opt_pagePath パラメータを設定して trackFacebook 関数を呼び出すと、デフォルトのページパスの値がパラメータからのサプライパスで上書きされます。それ以外の場合、そのパラメータの値は undefined に設定されます。未定義のパラメータには デフォルト値が使用されます

注: この例では、Facebook API が読み込まれていない場合にスクリプト エラーが発生しないことを確認するために、いくつかのチェックが追加されています。責任あるデベロッパーは、エラーを適切に処理する必要があります。

複数のトラッカー

Google アナリティクスでは、同じページ上の複数のトラッカーを区別するため、トラッキング オブジェクトに名前を付ける場合があります。同じウェブサイト ページで複数のトラッカーを使用することはおすすめしませんが、複数のトラッカーを扱うことは検討してください。

以下に、各トラッカー オブジェクトを反復処理して _trackSocial メソッドを呼び出す方法の例を示します。ページ上のすべてのトラッカー オブジェクトの配列を返す _getTrackers メソッドを使用しています。

この例では、Facebook イベントがトリガーされると、各トラッカー オブジェクトの _trackSocial メソッドが Google アナリティクスのコマンドキュー _gaq にプッシュされます。 

getSocialActionTrackers = function(network, socialAction, opt_target, opt_pagePath) {
  return function() {
    var trackers = _gat._getTrackers();
    for (var i = 0, tracker; tracker = trackers[i]; i++) {
      tracker._trackSocial(network, socialAction, opt_target, opt_pagePath);
    }
  };
}

function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(_ga.getSocialActionTrackers_('facebook', 'like',
            opt_target, opt_pagePath));
      });
    }
  } catch(e) {}
}