このチュートリアルでは、Google アナリティクスを使用して拡張機能の使用状況をトラッキングする方法について説明します。プラットフォーム アプリを開発している場合は、アプリには拡張機能とは異なる制限があるため、アプリ向けアナリティクスをご覧ください。
要件
このチュートリアルは、Google Chrome の拡張機能の作成に精通している方を対象にしています。拡張機能の記述方法については、スタートガイド チュートリアルをご覧ください。
また、拡張機能をトラッキングするには Google アナリティクス アカウントを設定する必要があります。なお、拡張機能には独自の URL がないため、アカウントの設定時に [ウェブサイトの URL] フィールドの任意の値を使用できます。
トラッキング コードの設定
標準の Google アナリティクス トラッキング コード スニペットは、現在のページが https:// プロトコルで読み込まれている場合、SSL で保護された URL から ga.js というファイルを取得します。Chrome 拡張機能とアプリケーションでは、SSL で保護されたバージョンの ga.js に限り使用できます。安全でない HTTP 経由で ga.js を読み込むことは、Chrome のデフォルトのコンテンツ セキュリティ ポリシーで禁止されています。また、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）を介して非同期トラッキング コードを読み込み、1 回のページビューをトラッキングしています。
<!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 アナリティクス アカウント番号に置き換えてください。
ページビューをトラッキングする
この _gaq.push(['_trackPageview']); コードでは 1 回のページビューをトラッキングします。このコードは、拡張機能の任意のページで使用できます。バックグラウンド ページに配置されると、ブラウザ セッションごとに 1 回ビューが登録されます。ポップアップに配置すると、ポップアップが開くたびに 1 回ビューが登録されます。
拡張機能の各ページのページビュー データを確認することで、ユーザーがブラウザ セッションごとに拡張機能を操作した回数を把握できます。
分析リクエストのモニタリング
拡張機能のトラッキング データが Google アナリティクスに送信されていることを確認するには、デベロッパー ツール ウィンドウで拡張機能のページを調べます（詳細については、デバッグ チュートリアルをご覧ください）。次の図のように、すべてが正しく設定されていれば、__utm.gif という名前のファイルに対するリクエストが表示されます。
イベントのトラッキング
イベント トラッキングを構成することで、拡張機能のどの部分をユーザーが最もよく操作するかを判断できます。たとえば、ユーザーがクリックする可能性のあるボタンが 3 つあるとします。
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
クリック イベントを Google アナリティクスに送信する関数を作成します。
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 アナリティクスのイベント トラッキングの概要ページには、各ボタンがクリックされた回数に関する指標が表示されます。
この手法を使用すると、拡張機能のどの部分が過小または過大に使用されているかを確認できます。この情報は、UI の再設計や実装する追加機能に関する判断に役立ちます。
イベント トラッキングの詳細については、Google アナリティクスのデベロッパー向けドキュメントをご覧ください。
サンプルコード
これらの手法を使用する拡張機能のサンプルは、サンプル リポジトリにあります。