更新日: 2016年2月18日
Chrome Extension

GoogleアナリティクスでChrome拡張のcontent_scriptsをアクセス解析する

Chrome Extension（Chrome拡張）で、content scripts の Google アナリティクスによるアクセス解析を試してみたところ、上手くできたのでシェアしておきます。やってみたら案外簡単だったものの、情報源自体はかなり少なかったです。基本的に、以下のページで考えた方法でやってみましたところ上手くいきました。

Chrome拡張をGoogle Analyticsで解析する方法まとめ | EasyRamble

基本的な方針として、content scripts で直接トラッキングは行えないので、Message Passing で content scripts → background へとメッセージを送り、background の chrome.runtime.onMessage.addListener にイベントをトラッキングするコードを埋め込みます。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Chrome 拡張のトラッキング方法は、以下の公式ドキュメントに基本的なことが書いてあります。

Tutorial: Google Analytics – Google Chrome

それから content_scripts を解析する方法については、以下 GitHub で見つけた popout_for_youtube という Chrome 拡張のコードが大変参考になりました。CoffeeScript のコードですが、やりたかったことはまさに同じです。

popout_for_youtube
background.coffee

ということで、以下は行った作業の記録。

Googleアナリティクスのプロパティを作成

まずは、Google Analytics にログイン後、Chrome Extension 解析用のプロパティを新規作成します。

アナリティクス設定 → プロパティ → 新しいプロパティを作成

Screen Shot 2015-02-05 at 15.19.03

情報を入力後、トラッキングIDを取得しておきます。Chrome Extension の場合、ウェブサイトのURLはありませんので、何かしら適当に入力。

Chrome Extension の manifest.json に content_security_policy を追加

Chrome Extension の manifest.json に content_security_policy を追加します。また、この後すぐに作成する Google アナリティクス解析用のコードである js/analytics.js を background に追加しておく。

manifest.json

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  "background": {
    "scripts": ["js/analytics.js", ...]
  },
  ...,
}

{

...,

"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",

"background": {

"scripts": ["js/analytics.js", ...]

...,

}

解析用コードの js/analytics.js を作成

公式ドキュメントの Installing the tracking code を参考に、解析用コードの js ファイルを作成。

Tutorial: Google Analytics#Installing the tracking code – Google Chrome

js/analytics.js

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-*****']);
_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);
})();

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-*****']);

_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-*****’ の箇所は、解析用のプロパティを新規作成した時に取得したトラッキングIDに変更する。

options page や popup page の解析

Chrome Extension の options page（options.html）や popup page（popup.html）のアクセス解析は簡単です。通常のウェブページと同じように、html ファイルに解析用コードを挿入しておくだけでOKです。

options.html や popup.html

<script src="../js/analytics.js"></script>

1	<script src="../js/analytics.js"></script>

background page (background.js) にイベントをトラッキングするコードを埋め込む

ここが本題です。公式ドキュメントを参考に、イベントをトラッキングするコードを background.js に埋め込んでいきます。

Tutorial: Google Analytics#Tracking events – Google Chrome

content_scripts から chrome.runtime.sendMessage で送られたメッセージが、background.js の chrome.runtime.onMessage.addListener で listen されている前提です。content_scripts を解析するには、そこにイベントトラッキング用のコードを記述します。

_trackEvent メソッドの詳細については以下。カテゴリー、アクション、ラベルを引数に取るので、取得したい情報に応じてそれらの引数を渡します。

Event Tracking – Web Tracking (ga.js) – Google Analytics

実際の background.js は以下のようになりました。汎用的な trackEvent() メソッドを定義して、それを用いて、トラッキングしたい情報別に reportVersion(), reportContentEvent() を定義しています。

js/background.js

(function(){
  // https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
  function trackEvent(category, action, opt_label) {
    var label = opt_label || '';
    _gaq.push(['_trackEvent', category, action, label]);
  }

  // https://developer.chrome.com/extensions/runtime#method-getManifest
  function reportVersion() {
    var version = "v" + chrome.runtime.getManifest().version;
    trackEvent('Background', 'version', version);
  }

  function reportContentEvent() {
    trackEvent('Content', 'some_event', '');
  }

  // ...

  function init(){
    reportVersion();

    // Listen to request from content script.
    chrome.runtime.onMessage.addListener(
      function (request, sender, sendResponse) {
        someOperation();
        reportContentEvent();
        return true;
      }
    );
  }

  chrome.storage.sync.get(
    DEFAULT_OPTIONS,
    function(items) {
      init();
    }
  );
})();

(function(){

// https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide

function trackEvent(category, action, opt_label) {

var label = opt_label || '';

_gaq.push(['_trackEvent', category, action, label]);

}

// https://developer.chrome.com/extensions/runtime#method-getManifest

function reportVersion() {

var version = "v" + chrome.runtime.getManifest().version;

trackEvent('Background', 'version', version);

}

function reportContentEvent() {

trackEvent('Content', 'some_event', '');

}

// ...

function init(){

reportVersion();

// Listen to request from content script.

chrome.runtime.onMessage.addListener(

function (request, sender, sendResponse) {

someOperation();

reportContentEvent();

return true;

}

);

}

chrome.storage.sync.get(

DEFAULT_OPTIONS,

function(items) {

init();

}

);

})();

reportVersion() は Chrome 拡張のバージョンをトラッキングし、background の init 時（初期化時）にトラッキングを行っています。引数のカテゴリーは ‘Background’、アクションは ‘version’、ラベルは version（バージョン番号）を渡しています。

reportContentEvent() は、content_scripts から chrome.runtime.sendMessage でメッセージが送信される度に、トラッキングを行う解析用のメソッドです。引数のカテゴリーは ‘Content’、アクションは ‘some_event’、ラベルは ”（空）にしています。ラベルは Extension の機能に応じて、content_scripts から取得した情報等を渡せば有意義な解析が得られるかと思う。

以上の方法で、reportContentEvent() が background.js を通して、content_scripts の解析を行ってくれます。