社交互動 - 網頁追蹤 (ga.js)

本文說明如何使用 Google Analytics (分析) 取得非 Google 聯播網 (例如 Facebook 和 Twitter) 的互動指標。如果您是網站擁有者、內容管理系統外掛程式開發人員，或是想為分享按鈕使用者提供自動社交互動報表功能的社群網路業者，請參閱這份文件，瞭解如何為社群媒體分享按鈕設定 Analytics (分析)。

簡介

根據預設，Google Analytics (分析) 會提供 +1 按鈕的整合式報表。也就是說，如果您已在同一個網頁上導入 ga.js 和 +1 按鈕，系統就會自動記錄所有 +1 社交互動。如要進一步瞭解 +1 分析 (包括疑難排解提示)，請參閱說明中心的「關於社交分析」一文。

如要取得 Facebook 或 Twitter 等其他聯播網的社交互動分析和報表，您必須將 Google Analytics (分析) 與每個網路按鈕整合。透過 Social Plugin Analytics，記錄互動範圍從 Facebook 的「讚」到 Twitter 「Tweet」。雖然事件追蹤也可以追蹤一般的內容互動，但社交分析提供一致的架構，方便您記錄社交互動。因此，Google Analytics (分析) 報表使用者也能取得一組一致的報表，比較多個聯播網上的社交網路互動情形。

如要查看將 Analytics (分析) 與 Facebook 和 Twitter 按鈕整合的實用範例，請參閱社群分析程式碼範例。

設定社交分析

如要設定追蹤社交互動，您必須使用 _trackSocial 方法，將社交互動資料傳送至 Google Analytics (分析)。使用者完成社交互動後，應呼叫此方法。每個社交網路都使用不同的機制來判斷社交互動何時發生，這通常需要整合該網路按鈕的 API。

由於整合社交 Analytics (分析) 的特定細節因社交網路而異，本指南接下來的部分將提供為這兩個聯播網設定社交外掛程式分析的一般最佳做法。建議您參閱各聯播網的開發人員說明文件，瞭解特定網路的實作方式。

以下是 _trackSocial 方法的說明：

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

其中參數代表：

  • network

    必要欄位。字串，代表目前追蹤的社交網路 (例如 Facebook、Twitter、LinkedIn)。

  • socialAction

    必要欄位。字串，代表目前追蹤的社交動作 (例如按讚、分享、推文)。

  • opt_target

    選用設定。代表接收動作的網址 (或資源) 的字串。舉例來說，如果使用者按一下某個網站上的「喜歡」按鈕，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 Analytics (分析) _trackPageview 方法修改選用的網頁路徑參數，以追蹤虛擬網頁瀏覽，通常才需要設定此參數。

Facebook 動作

根據 Facebook JavaScript SDK，如要在網頁中設定「喜歡」按鈕，最簡單的方法就是使用下列程式碼：

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

喜歡次數

若要使用 Google Analytics (分析) 記錄按讚次數，請訂閱 Facebook 的 edge.create 事件，並建立回呼函式來執行 Google Analytics (分析) 追蹤程式碼。

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

當使用者「喜歡」您的網頁時，系統會執行回呼函式，並接收喜歡的資源網址。隨後，系統會將資源以值的形式傳遞至 _trackSocial 方法，以便 Google Analytics (分析) 回報喜歡的網路、動作和網址。

不喜歡

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 推文

根據 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 Analytics (分析) 追蹤推文按鈕事件，您必須使用 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);
});

使用者 Twitter 訊息時，回呼函式會收到一個物件，通常可用於取得要發送 Tweet 訊息的資源網址。Twitter JavaScript 程式碼載入後，會將加註的 Tweet 連結轉換成 iframe，而目前推文所指向的網址會經過編碼，並以查詢參數附加至 iframe 的網址。傳遞至回呼的事件物件會參照這個 iframe，我們可以使用該物件取得 Twitter 推文的資源網址。

上述回呼函式可確保 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 Analytics (分析) 中追蹤您在社交網路上的互動。

因此，本節將說明整合社交外掛程式分析的最佳做法，讓您的產品或 CMS 自動追蹤社交互動。如要查看所有最佳做法的實際操作範例，請參閱社交外掛程式 Analytics (分析) 程式碼範例。

建立例項並使用 _gaq 佇列

最新版的 Google Analytics (分析) 追蹤程式碼支援同步和非同步載入功能。為允許開發人員呼叫尚未載入的方法，Google Analytics (分析) 提供指令佇列 _gaq，可將 _gaq.push(); 推送至哪些追蹤方法。

追蹤程式碼載入後，佇列上的所有指令都會執行。將 Google Analytics (分析) JavaScript 追蹤程式碼與外掛程式或產品整合時，請一律確保這個指令佇列已執行個體化，且您的整合會將 _trackSocial 指令推送至這個陣列。

var _gaq = _gaq || [];

如此一來，無論接收的網頁是否使用傳統或非同步追蹤程式碼片段，系統都會呼叫此方法。

使用者設定

如果您開發的外掛程式整合了社交外掛程式分析，建議您提供下列選項，讓使用者在使用外掛程式時能夠進行設定：

設定選用的網頁路徑參數：_trackSocial 方法的最終參數是用來覆寫社交互動目前的來源網址。最終目標是在網頁追蹤與社交外掛程式分析之間記錄相同的網址。由於有些使用者可能會覆寫使用網頁瀏覽追蹤功能所追蹤的預設網頁網址，因此他們也必須覆寫社交外掛程式 Analytics (分析) 中的網址，才能取得一致的報表。

以下範例說明如何讓使用者設定這些選項，以及程式碼需要如何回應這些選項。

// 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 Analytics (分析) 追蹤程式碼 則會使用未定義參數的預設值。

注意：在這個範例中，系統還新增了幾項檢查項目，以確保在 Facebook API 尚未載入時，不會發生指令碼錯誤。如果您是負責任的開發人員，請務必妥善處理錯誤。

多個追蹤器

有些 Google Analytics (分析) 使用者會命名追蹤物件，以便區分同一網頁上的多個追蹤程式。雖然我們不鼓勵在同一個網頁上使用多個追蹤程式，但您可以考慮處理多個追蹤程式。

以下範例說明如何疊代並呼叫每個追蹤器物件的 _trackSocial 方法。此使用 _getTrackers 方法，會傳回頁面上所有追蹤器物件的陣列。

在這個範例中，觸發 Facebook 事件時，每個追蹤器物件的 _trackSocial 方法都會推送至 Google Analytics (分析) 指令佇列 _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) {}
}