本教學課程示範如何使用 Google Analytics (分析) 追蹤擴充功能的使用情形。如果您正在開發平台應用程式,請參閱「應用程式數據分析」,因為應用程式的限制與擴充功能並不相同。
需求條件
本教學課程需要您具有一些熟悉的 Google Chrome 編寫擴充功能。如需如何編寫擴充功能的資訊,請參閱入門教學課程。
此外,您也必須設定 Google Analytics (分析) 帳戶,才能追蹤額外資訊。請注意,設定帳戶時,您可以使用「網站網址」欄位中的任何值,因為您的擴充功能沒有專屬網址。
安裝追蹤程式碼
如果目前網頁是使用 https://
通訊協定載入,標準 Google Analytics (分析) 追蹤程式碼片段會從 SSL 保護的網址中擷取名為 ga.js
的檔案。Chrome 擴充功能和應用程式「只能」使用受 SSL 保護的 ga.js
版本。Chrome 的預設內容安全政策禁止透過不安全的 HTTP 載入 ga.js
。除了上述原因以外,Chrome 擴充功能也由 chrome-extension://
結構定義代管,因此需要稍微修改追蹤程式碼片段,才能直接從 https://ssl.google-analytics.com/ga.js
(而非預設位置) 提取 ga.js
。
以下是非同步追蹤 API 的修改程式碼片段 (修改過的行以粗體顯示):
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
您也必須放寬預設內容安全政策,確保擴充功能有權載入資源。manifest.json
中的政策定義可能如下所示:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
以下的彈出式視窗 (popup.html
) 會透過外部 JavaScript 檔案 (popup.js
) 載入非同步追蹤程式碼,並追蹤單一網頁瀏覽:
<!DOCTYPE html>
<html>
<head>
...
<script src="popup.js"></script>
</head>
<body>
...
</body>
</html>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
請注意,您應該將字串 UA-XXXXXXXX-X
換成您自己的 Google Analytics (分析) 帳號。
追蹤網頁瀏覽量
_gaq.push(['_trackPageview']);
程式碼會追蹤單一網頁瀏覽。這組程式碼可用於擴充功能中的任何網頁。放置在背景頁面時,每個瀏覽器工作階段只會登錄一次瀏覽。放入彈出式視窗後,每當彈出式視窗開啟時,它都會註冊檢視畫面。
藉由查看擴充功能中每個網頁的網頁瀏覽資料,您可以瞭解使用者在每個瀏覽器工作階段與擴充功能互動的次數:
監控數據分析要求
為了確保擴充功能的追蹤資料順利傳送至 Google Analytics (分析),您可以在「開發人員工具」視窗中查看擴充功能的頁面 (詳情請參閱偵錯教學課程)。如下圖所示,如果所有設定正確無誤,您應該會看到名為 __utm.gif 的檔案要求。
追蹤事件
設定事件追蹤後,您就可以判斷使用者最常與擴充功能的哪些部分互動。舉例來說,假設使用者有三個可能會點選的按鈕:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
撰寫將點擊事件傳送至 Google Analytics (分析) 的函式:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
並把它當做每個按鈕點擊的事件處理常式:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
Google Analytics (分析) 事件追蹤總覽頁面會提供指標,說明每個按鈕的點選次數:
藉由這種做法,您就能瞭解擴充功能的哪些部分使用率偏低。這項資訊可協助您決定 UI 重新設計或其他實作功能。
如要進一步瞭解如何使用事件追蹤,請參閱 Google Analytics (分析) 開發人員說明文件。
程式碼範例
如要瞭解使用這些技術的擴充功能範例,請前往範例存放區。