Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」

Google Analyticsにイベント測定などの機能を拡張するJavaScript「GA Funcitons」の説明とダウンロードのページ。

2012年4月22日：ver. 1.4.1を公開。クロスドメインとスクロール測定を同時に有効にするとスクロール時にエラーが出るバグを修正しました。クロスドメインとスクロール測定を同時に使う方は新しいバージョンに差し替えてください。

2012年1月25日：クロスドメインについてのサンプルコードに「_gaq.push(['_setAllowHash', false]);」が抜けていたので追加しました。

2012年1月23日：ver. 1.4.0を公開。複数トラッキングコードなどに対応しました。詳しくは「オプション設定」を参照してください。

GA Funcitonsには次の機能があります。

・外部リンクのクリックを測定
・PDF、ZIP、エクセル、画像などのダウンロードを測定
・mailto:のクリックを測定
・外部リンクやダウンロードのクリックまでの時間を測定
・フォーム入力欄毎のフォーカス、変更などのイベントを測定
・フォーム入力の時間を測定
・一定時間のページ滞在で直帰にしない
・ページのスクロール量を測定
・クロスドメインのリンクを自動的に変換

Google Analyticsの非同期トラッキングコードに対応していて、非同期と同期の切り替え、イベントかページビューのどちらで記録するか指定可能です。

設定はhtmlにタグを2行追加するだけ。既存のGoogle Analyticsのトラッキングコードはそのままでいいので、自分で既にトラッキングコードをカスタマイズしていても支障なく使えるようになっています。

ダウンロード

jquery.gafunc-1.4.1.zip

このファイルの他に jQuery が必要ですので合わせてダウンロードしてください。

画面

このJavaScriptを組み込むと、Google Analyticsで次のようなデータが見られるようになります。

イベントカテゴリはこのようになります。

外部リンクのクリック測定。イベントアクションにドメインを記録、イベントラベルに外部リンクURLを記録、イベントの値にリンク元ページ表示からクリックまでの秒数を記録します。

ダウンロードのクリック測定。イベントアクションに拡張子を記録、イベントラベルにダウンロードURLを記録、イベントの値にリンク元ページ表示からクリックまでの秒数を記録します

フォーム入力の測定。イベントアクションにイベントの種類を記録、イベントラベルに「URL#入力要素#idまたはname属性」を記録、イベントの値に直前のフォーム入力イベントからの秒数を記録します。キャプチャにおかしい部分がありますが開発中の画面なので気にしないでください。

スクロール量の測定。イベントアクションに’scroll’を記録、イベントラベルにページのURLを記録、イベントの値にスクロール量を記録します。スクロール量は、ブラウザ表示領域の下端がページ全体の高さの何%までスクロールしたかです。

ページに一定時間滞在したときのイベントです。イベントアクションに’stay’を記録、イベントラベルにページのURLを記録、イベントの値に秒数を記録します。

インストール方法

1. Google Analyticsのトラッキングコードを導入しておいてください。

2. jquery.js と jquery.gafunc.js をサーバに格納します。どちらも圧縮したファイル(〜.min.js)が用意されているのでそちらを使った方が高速になります。

3. Google Analyticsのトラッキングコードが入っているページの<head></head>内に次のようにタグを2行、追加してください。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.gafunc.js"></script>
<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:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

jQueryが既に入っているときは2行目だけをjQueryより後に追加してください。Google Analyticsのトラッキングコードの位置は後でも先でもいいです。

以上で完了です。1日程度経ってから、Google Analyticsで確認してみてください。

注意点

このツールを導入すると直帰率が大幅に減ります。Google Analyticsにイベントを記録すると直帰と見なさなくなるためです。直帰率の意味が変わると認識してください。今までは「ページ遷移しなければ直帰」というのが「何も操作しないでページを閉じたら直帰」という意味になると理解すればいいでしょう。

イベントが多くなりすぎないようにご注意ください。Google Analyticsの制限で1訪問あたりに記録されるイベント数は500までです。イベントが多すぎるときは入力フォームの測定をオフにするなどして調整してください。

外部リンクのクリック、ダウンロードの測定は、非同期だと送信されないことが多かったので同期トラッキングをデフォルトにしています。設定で非同期に変更可能です。そのためクリックしたときに少しタイムラグが出る場合があります。気になる方は非同期を試してみてください。非同期にするとイベントのときはある程度記録されるようですが仮想ページビューは記録されないようです。

オプション設定

デフォルトでは次の機能が無効になっています。

・フォーム入力のフォーカスイベントの測定
・一定時間のページ滞在で直帰にしない
・クロスドメインのリンクを自動的に変換

設定を変更するには、次のタグをページに追加してください。位置はどこでも構いません。インストールで追加したタグの直後でいいでしょう。外部ファイルにして読み込んでも構いません。

<script type="text/javascript">
var gaFunc = {
		tracker:'',
		outbound:true,
		outboundEvent:true,
		outboundAsync:false,
		outboundSelector:'a[href^="http"]:not([href*="//' + location.host + '"])',
		outboundPrefix:'/outbound/',
		download:true,
		downloadEvent:true,
		downloadAsync:false,
		downloadSelector:'a',
		downloadTypes:'pdf|zip|jpe?g|png|gif|mp\d?|mpe?g|flv|wmv|docx?|pptx?|xlsx?',
		downloadPrefix:'/download/',
		mailto:true,
		input:true,
		inputSelector:'form',
		inputFocus:false,
		inputChange:true,
		inputClick:true,
		inputReset:true,
		stay:false,
		staySec:60,
		scroll:true,
		scrollAsync:true,
		scrollClientRatio:150,
		xdomain:false,
		xdomainDomain:'othersite1.com|othersite2.com',
		locationSearch:false
};
</script>

値はデフォルト値です。変更が不要な行は削除して構いません。

tracker:”

[ver. 1.4.0] 複数のトラッキングコードを使用するとき、トラッカー名を指定します。詳しくは「複数のトラッキングコードを使う」を参照してください。

outbound:true

外部リンクのクリック測定をするかどうか。

outboundEvent:true

外部リンクのクリックをイベントで記録するかどうか。falseにすると仮想ページビューとして記録します。

outboundAsync:false

外部リンクのクリックの送信を非同期で行うかどうか。falseにすると同期通信を使用します。

outboundSelector:’a[href^="http"]:not([href*="//' + location.host + '"])’

[ver. 1.4.0] 外部リンクのクリックを測定する要素をjQueryのセレクターの書式で指定します。デフォルトは「自サイト以外へリンクする<a>タグ」です。

outboundPrefix:’/outbound/’

外部リンクのクリックを仮想ページビューで記録するとき、URLの先頭に付加する文字列。

download:true

ダウンロードの測定をするかどうか。

downloadEvent:true

ダウンロードをイベントで記録するかどうか。falseにすると仮想ページビューとして記録します。

downloadAsync:false

ダウンロードの送信を非同期で行うかどうか。falseにすると同期通信を使用します。

downloadSelector:’a’

[ver. 1.4.0] ダウンロードを測定する要素をjQueryのセレクターの書式で指定します。この要素から次のdownloadTypesで測定対象が絞り込まれます。

downloadTypes:’pdf|zip|jpe?g|png|gif|mp¥d?|mpe?g|flv|wmv|docx?|pptx?|xlsx?’

ダウンロードを測定する対象のURLの拡張子。正規表現で指定します。

downloadPrefix:’/download/’

ダウンロードを仮想ページビューで記録するとき、URLの先頭に付加する文字列。

mailto:true

mailto:のリンクのクリックを測定するかどうか。

input:true

フォーム入力のイベントを測定するかどうか。

inputSelector:’form’

フォーム入力を測定する対象を絞り込みます。jQueryのセレクターの書式で測定する対象の親要素を指定します。デフォルトは’form’なので、formタグの中のみが測定対象になっています。

例えば、クラス’serachform’のフォームを測定したくないときは ‘form:not(.searchform)’ と書きます。

inputFocus:false

フォーム入力のフォーカスイベントを測定するかどうか。デフォルトではイベント数が多すぎないようにfalseになっています。

inputChange:true

フォーム入力の変更イベントを測定するかどうか。

inputClick:true

フォーム入力のクリックイベントを測定するかどうか。

inputReset:true

フォーム入力のリセットのクリックを測定するかどうか。

stay:false

ページ表示から一定時間経過すると、イベントを送信して直帰と見なさないようにするかどうか。デフォルトではfalseになっています。

staySec:60

ページに一定時間滞在で直帰と見なさない秒数。

scroll:true

ページのスクロール量を測定するかどうか。

scrollAsync:true

スクロール量のイベント送信を非同期で行うかどうか。

scrollClientRatio:150

スクロール量の測定は、一定以上スクロールしたときだけ、ページを抜けるときにスクロール量の最大値を送信しています。イベントがむやみに発生して直帰がほとんどなくなるのを防止するためです。その閾値を指定します。画面の高さの何%以上スクロールしたらイベント送信するかを指定します。

xdomain:false

クロスドメインのリンクの自動変換をするかどうか。デフォルトではfalseになっています。

xdomainDomain:’othersite1.com|othersite2.com’

クロスドメインの対象となるドメイン名を指定します。複数のドメインは ‘|’ で区切ります。正規表現は使用できません。詳しくは「クロスドメインについて」を参照してください。

locationSearch:false

イベントのラベルに記録するURLに、?から始まるクエリーパラメータも記録するかどうか。デフォルトはfalseです。

オプション設定の例

例えば、「ダウンロードを仮想ページビューで記録、ダウンロードにLZHを追加して画像を除く、フォーム入力測定をid=’contactform’内の要素に限定する、フォーカス測定を有効にする、3分以上ページに滞在したら直帰にしない」設定に変更する場合は次のようなコードになります。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.gafunc.js"></script>
<script type="text/javascript">

var gaFunc = {
  downloadEvent:false,
  downloadTypes:'lzh|pdf|zip|mp¥d?|mpe?g|flv|wmv|docx?|pptx?|xlsx?',
  inputSelector:'#contactform',
  inputFocus:true,
  stay:true,
  staySec:180
};

  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:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

複数のトラッキングコードを使う

[ver. 1.4.0] 複数のトラッキングコードを使って、GA Functionsを別のプロパティで測定できます。Googleアナリティクスの既存のプロパティに影響を与えずにGA Functionsを導入したいときに使えます。

例えば、プロパティ UA-XXXXXXXX-X で今までの測定を行い、新たに作成したプロパティ UA-YYYYYYYY-Y のみで GA Funcitons の測定をするときは次のようなトラッキングコードを全ページに挿入します。こうすると GA Funciotns のトラッキングはプロパティ UA-XXXXXXXX-X に影響を与えずにプロパティ UA-YYYYYYYY-Y のみに記録されます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.gafunc.js"></script>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

_gaq.push(['b._setAccount', 'UA-YYYYYYYY-Y']);
_gaq.push(['b._trackPageview']);
var gaFunc = {
  tracker:'b'
};

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

クロスドメインについて

クロスドメインのリンクの自動変換機能は、Google Analyticsトラッキングコードの _getLinkerUrl の処理を自動で行います。POSTには対応していません。
xdomainDomainには、このタグを埋め込むサイトとは別のドメインのみを指定してください。共有ドメインや自身のドメインは含めないでください。部分一致なのでサブドメインは省略できます。
_setDomainName, _setAllowLinker は自分でGoogle Analyticsトラッキングコードに追加してください。

例えば、
www.example-petstore.com
dogs.example-petstore.com
www.my-example-blogsite.com
の3つを連携するときは次のようなトラッキングコードを追加します。

www.example-petstore.com :

_gaq.push(['_setDomainName', '.example-petstore.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
var gaFunc = {
	xdomain:true,
	xdomainDomain:'my-example-blogsite.com'
};

dogs.example-petstore.com :

_gaq.push(['_setDomainName', '.example-petstore.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
var gaFunc = {
	xdomain:true,
	xdomainDomain:'my-example-blogsite.com'
};

www.my-example-blogsite.com :

_gaq.push(['_setDomainName', 'my-example-blogsite.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
var gaFunc = {
	xdomain:true,
	xdomainDomain:'.example-petstore.com'
};

全体のコードは、www.example-petstore.comの場合、次のようになります。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.gafunc.js"></script>
<script type="text/javascript">

var gaFunc = {
  xdomain:true,
  xdomainDomain:'my-example-blogsite.com'
};

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_setDomainName', '.example-petstore.com']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_setAllowHash', false]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

クロスドメインの詳細については Googleアナリティクスクロスドメイントラッキングを参照してください。

ライセンス

フリーソフト、MIT License です。

旧バージョン

jquery.gafunc-1.4.0.zip

jquery.gafunc-1.3.0.zip

更新履歴

ver. 1.4.1

・クロスドメインとスクロール測定を同時に有効にするとスクロール時にエラーが出るバグを修正

ver. 1.4.0

・複数トラッキングコード対応
・外部リンク計測、ダウンロード計測の対象の指定

ver. 1.3.0

リリース。

将来の予定

次のような機能を予定しています。

・ページ内リンクなどイベント測定強化

12件のコメント

コメントする →

けい
2012年5月17日 11:32 AM

便利に使わせていただいております。
環境依存調査のため、様々なブラウザで調査した所、
Firefox各バージョン, chrome各バージョン, IE9では問題無く動作しましたが
IE8ではスクリプトエラーが発生しスクリプトが実行されないですね。

スクリプトエラーの確認方法ですが
「インターネットオプション」->「詳細設定」タブ
->「設定」内の「ブラウズ」->「スクリプトエラーごとに通知を表示する」にチェックを入れ、
フォームのある画面で入力フォームにフォーカスを合わせれば確認可能です。

返信
ss
2012年5月17日 11:04 AM

お世話になります。GAFunctionsを設置させていただいたのですが、2日以上経ってもGAのイベントに記録が残らない状況です。サーバにjQueryとjquery.gafunc.jsをアップロードし、サイトのソースにもhead内に前述のjsファイルURLの2行を記述しているのですが、何か他に見落としの可能性などありますでしょうか。なお、オプション設定はしておりません。お心当たりなどありましたらご教示いただければ幸いです。よろしくお願いいたします。

返信
トラックバック: アナリティクスのイベント分析でフォームを改善しよう | Google アナリティクス | murak.net
カズクン
2012年4月23日 2:24 PM

はじめまして。
GA Functions の使用を検討させていただいています。

使用に際し、お聞きしたいところがあり、コメントさせていただきました。

現在運営しているサイトで、GA Functions の「複数のトラッキングコードを使う」と
「クロスドメインについて」を利用したいと考えています。

この2つを併用する場合、以下のようなコードの記述でよろしいでしょうか？

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

_gaq.push(['b._setAccount', 'UA-YYYYYYYY-Y']);
_gaq.push(['b._setDomainName', '.example-petstore.com']);
_gaq.push(['b._setAllowLinker', true]);
_gaq.push(['b._setAllowHash', false]);
_gaq.push(['b._trackPageview']);
var gaFunc = {
tracker:’b’
xdomain:true,
xdomainDomain:’my-example-blogsite.com’
};

以上、よろしくお願いいたします。

返信
- 村上和久
  2012年4月23日 6:12 PM
  
  ご検討ありがとうございます。
  tracker:’b’
  の後ろにコンマが必要で
  tracker:’b',
  のようになりますが、他は大丈夫かと思います。
  
  返信
  - カズクン
    2012年4月24日 12:44 PM
    
    早々のご回答、ありがとうございます。
    上記の形で一度使用させていただきたいと思います。
    
    返信
トラックバック: Googleアナリティクスを機能拡張するGA Funcitons 1.4.1 バグ修正 | Google Analytics | murak.net
村上和久
2012年3月6日 12:38 PM

外部リンクの測定は、単純に自サイト以外を対象にしているので、クロスドメインの設定をしていてもクロスドメインのリンクが外部リンクとして測定されてしまいます。
外部リンクの測定で特定のドメインを除外したいときは、次のオプションを設定してみてください。
outboundSelector:’a[href^="http"]:not([href*="//' + location.host + '"],[href*="//除外したいドメイン名"])’

運営堂さんから情報いただきました。ありがとうございます。

返信
村上和久
2012年2月12日 4:01 PM

不具合：
サイトによって、スクロール量が測定できないことがあります。
$(‘html’).attr(‘clientHeight’)が取得できないためですが、その原因は調査中です。

返信
トラックバック: Googleアナリティクスにフォーム入力イベントなどを機能拡張する「GA Functions」が複数トラッキングコードに対応 | Google Analytics | murak.net
トラックバック: 【GA】Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」が便利そう | ウェブ解析士　皆元チナ
トラックバック: Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」を公開 | Google Analytics | murak.net