monoの開発ブログ

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

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

設定方法

ウェブ プロパティの作成

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

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

<!DOCTYPE html><html> <head>   ...   <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);

参考