monolithic kernel

Chrome拡張の利用状況をGoogle Analyticsで解析する

Google AnalyticsはWebサイトのアクセス解析ツールとして有名ですが、Google Chromeの拡張機能の利用状況を解析するためにも利用可能です。

設定方法

ウェブ プロパティの作成

利用状況をトラッキングするためのウェブ プロパティを作成します。ウェブサイトのURLは存在しないため、適当でOKです。

"ウェブ プロパティの作成"

ページビューのトラッキング

background pageやoptionsなど拡張機能内部のHTMLにトラッキングコードを追加します。通常のWebページでは、トラッキング用スクリプトのロードにWebページと同じプロトコルを利用しますが、拡張機能からロードする際にはhttpsを利用します。

<!DOCTYPE html>
<html>
<head>
  <!-- Google Analytics の設定 -->
  <script type="text/javascript">
    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);
    })();
  </script>
</head>
<body>
  <!-- ここにコンテンツを追加 -->
</body>
</html>

イベントのトラッキング

ページビューのトラッキングを行うコードから分かるように、基本的にはWebページのトラッキングと同じ記述で拡張機能のトラッキングを行うことができます。

以下の例ではリンクがクリックされたことをイベントとしてトラッキングしています。

<a id="button1" href="/foo.html">Button1</a>
document.getElementById('button1').addEventListener('click', function() {
  _gaq.push([ '_trackEvent', 'Button1 clicked' ]);
}, false);

参考