Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する


投稿日:2015年7月10日
  • 1
  • 15


Google Analyticsのイベントを利用すれば細かな挙動も把握が可能

google_extention_7

Chrome機能拡張の解説」第7弾。

無事に機能拡張が完成したらGoogle Analyticsで利用状況を把握しましょう。

至れり尽くせりのチュートリアルが用意されているので、真似すればさくっと追加できます。

Tutorial: Google Analyticsの公式ドキュメント

今回はページアクションでpopup.htmlを開いた時にカウントしてみます。

manifest.json

Test Extention 14を作り、バージョンを1.4へ変更。
外部オリジンとやりとりするのでcontent_security_policyで「https://ssl.google-analytics.com」を追加します。

{
	"manifest_version": 2,
	"name": "Test Extention",
	"version": "1.4",
	"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
	"browser_action": {
		"default_popup": "popup.html",
		"default_icon": "19px.png",
		"default_title": "Hello Worldを表示するよ"
	}
}

poppu.html

外部ファイルでgoogleAnalytics.jsを読み込みます。

<!DOCTYPE html>
<meta charset="UTF-8" />
<html>
<head>
<title></title>
<script type="text/javascript" src="./googleAnalytics.js"></script>
</head>

<body>

<p id="hello">Hello World!</p>

</body>
</html>

googleAnalytics.js

UA-00000000-0の部分は自分のサイトに割り振られたトラッキング IDに変更してください。

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

機能拡張を読み込んでポップアップを表示します。
analyticsのリアルタイムでpopup.htmlのカウントが流れば成功です。

google_extention44

ボタンのクリックイベントをカウントする

続いてボタンをクリックしたことをイベントとしてカウントします。
より詳細な利用状況を把握できます。
manifest.jsonは同じなので省略。

poppu.html

とりあえずサンプルなのでざっくりしてます。
今回はボタンをクリックしたことをカウントするので、input要素でtypeをsubmitとします。またイベント名に使用するのでclassも指定しておいてください。

Ajaxを行うform.jsも追加で読み込みます。

<!DOCTYPE html>
<meta charset="UTF-8" />
<html>
<head>
<title></title>
<script type="text/javascript" src="./googleAnalytics.js"></script>
</head>

<body>

<p id="hello">Hello World!</p>

<form action="cgi-bin/formmail.cgi" method="post">
<input class="Chrome submit" type="submit" value="送信">
</form>

</body>
</html>

googleAnalytics.js

buttonsを取得するタイミングですが、フォームを読み込んだ後で無いと取得できないのでイベントリスナーでloadのコールバックとして実行しています。
見たままですが、クリックイベントでtrackButtonClickを実行して「_gaq.push」でイベントを送信しています。この例ではターゲットのクラス名をイベント名にしています。

// analyticsにクリックイベントを「クラス名」で送信する
function trackButtonClick(e) {
	_gaq.push(['_trackEvent', e.target.className, 'clicked']);
}

// inputのtypeがsubmitの要素のクリック用イベントリスナー
window.addEventListener('load', function() {
	var buttons = document.querySelectorAll("input[type='submit']");
	for (var i = 0; i < buttons.length; i++) {
		buttons[i].addEventListener('click', trackButtonClick);
	}
});

Test Extention 14をダウンロードする

実際にフォームを扱う場合はAjax等を使うと思いますが、その場合はイベントリスナーの部分を関数にして、completeのコールバックで実行すればフォームデータ取得後に実行できます。

機能拡張でリロードして送信ボタンをクリックしてみます。

google_extention45

このようにボタンのクリックイベントをカウントすることができます。ボタンのクラスを変更すれば細かな利用状況も把握できます。


次の投稿では「デベロッパー登録して、機能拡張をGoogleストアに登録する方法」を解説します。



現在のページを共有する



現在のページに関連する記事

PukiwikiでGoogle Analyticsを使う PukiwikiでGoogle Analyticsを使う
Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する Chromeの機能拡張を作成して、ブラウザで読み込み、デバックする方法
Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する WordPressのショートコードを利用してSNSのVertical Balloonを設置する方法
Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について
Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する Chrome機能拡張のコンテンツスクリプトについて
Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する jQueryでクロスサイトのiframe広告のクリックをカウントする方法
Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法

おすすめの記事

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成す…

そのサイト、WordPressじゃなくてWixで十分じゃない?

そのサイト、WordPressじゃなくてWixで十分じゃない?

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法

Norikraの使い方をサンプルのクエリとイベントを交えて解説

Norikraの使い方をサンプルのクエリとイベントを交えて解説

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。