このドキュメントでは、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.pathname
とlocation.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) {} }