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 にイベントをトラッキングするコードを埋め込みます。

スポンサーリンク

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

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

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

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

js/analytics.js

‘UA-*****’ の箇所は、解析用のプロパティを新規作成した時に取得したトラッキングIDに変更する。

options page や popup page の解析

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

options.html や popup.html

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

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

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

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

Google アナリティクスでの確認

options page, popup page などは通常のウェブページの解析と同じように確認できる。イベントの解析については、Google アナリティクス管理画面の「行動 → イベント」から確認できます。

イベントカテゴリ、イベントアクション、イベントラベルをそれぞれ確認できるので、取得したい情報に応じてカテゴリ、アクション、ラベルを設定しておくと便利です。

以上、Chrome Extension を Google アナリティクスで解析する方法でした。content_scripts の解析もイベントトラッキング用のコードを用いることで自由に行えますね。

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!