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

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

はじめに

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

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

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

ソーシャル解析の設定

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

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

_trackSocial メソッドの説明は次のとおりです。

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

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

  • network

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

  • socialAction

    必須。トラッキングされるソーシャル アクション(高評価、共有、ツイートなど)を表す文字列。

  • opt_target

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

  • opt_pagePath

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

Facebook アクション

Facebook JavaScript SDK に従って、ページに高評価ボタンを設定する最も簡単な方法は、次のコードを使用することです。

<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.push(); というトラッキング メソッドをプッシュできるコマンドキュー _gaq が用意されています。

トラッキング コードが読み込まれると、キューにあるすべてのコマンドが実行されます。Google アナリティクス JavaScript トラッキング コードをプラグインやプロダクトと統合する場合は、常にコマンドキューがインスタンス化され、統合によって _trackSocial コマンドがこの配列に push されるようにする必要があります。

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 に設定されます。Google アナリティクス トラッキング コードでは、未定義のパラメータにデフォルト値を使用します。

: この例では、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) {}
}