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

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

ユニバーサルアナリティクスとGoogleタグマネージャの進化によってイベントトラッキングやクロスドメインのトラッキングが容易に実装できるようになりました。ユニバーサルアナリティクスへの移行に従い GA Functions はその役目を終えていくことになります。これまで多くのWebサイトにご利用いただきありがとうございました。今後のアップデートは脆弱性の対応などを除き終了いたします。

今後は「Googleタグマネージャとアナリティクスの投稿」で、イベント計測や色々なノウハウを発信していきます。

2013年11月16日：ver. 1.4.4を公開。イベントトラッキングで直帰にならないのを防ぐオプションを追加しました。今まではイベントが発生すると直帰にならないために直帰率が大幅に下がってましたが、このバージョンからはイベント測定が直帰に影響しなくなります。オプションで今までのように直帰に影響するように指定することもできます。

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

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

※ユニバーサルアナリティクスには対応していません。ユニバーサルアナリティクスをお使いの場合は、Googleタグマネージャーで同様の機能が実現できますので、Googleタグマネージャーをご利用ください。

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

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

ダウンロード

jquery.gafunc-1.4.4.zip

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

画面

この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,
		noninteraction:true
};
</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です。

noninteraction:true

イベント測定を直帰に影響させないかどうか。バージョン1.4.4から追加。tureのときイベントが発生しても直帰率に影響しません。falseのときはイベントが発生すると直帰にならないので、通常より直帰率が大幅に下がります。デフォルトはtrueです。

オプション設定の例

例えば、「ダウンロードを仮想ページビューで記録、ダウンロードに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.A.com
www.B.com
www.C.com
の3つを連携するときは次のようなトラッキングコードを追加します。

www.A.com :

_gaq.push(['_setDomainName', '.A.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
var gaFunc = {
	xdomain:true,
	xdomainDomain:'B.com|C.com'
};

www.B.com :

_gaq.push(['_setDomainName', '.B.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
var gaFunc = {
	xdomain:true,
	xdomainDomain:'A.com|C.com'
};

www.C.com :

_gaq.push(['_setDomainName', '.C.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
var gaFunc = {
	xdomain:true,
	xdomainDomain:'A.com|B.com'
};

全体のコードは、www.A.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:'B.com|C.com'
};

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_setDomainName', '.A.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.3.zip

jquery.gafunc-1.4.2.zip

jquery.gafunc-1.4.1.zip

jquery.gafunc-1.4.0.zip

更新履歴

ver. 1.4.4

・イベントトラッキングで直帰にならないのを防ぐオプションを追加しました。今まではイベントが発生すると直帰にならないために直帰率が大幅に下がってましたが、このバージョンからはイベント測定が直帰に影響しなくなります。オプションで今までのように直帰に影響するように指定することもできます。

ver. 1.4.3

・jQuery1.9に対応。jQueryのlive関数が廃止になったのでon関数に変更。動作にはjQuery1.7以上が必要です。

ver. 1.4.2

・スクロール測定を修正して、一部のサイトやブラウザでスクロール測定できない不具合を改善

ver. 1.4.1

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

ver. 1.4.0

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

ver. 1.3.0

リリース。

将来の予定

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

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

49件のコメント

コメントする →

トラックバック: アナリティクスのイベントトラッキングでクリック計測!アクセス解析の使い方入門11 - ゆめぴょんの知恵
トラックバック: [アップデート終了] アナリティクス拡張 GA Funcitons 1.4.4：イベントが直帰に影響しないように修正 | Google アナリティクス | murak.net
tomi
2013年9月30日 10:11 AM

村上様
はじめまして。 

GAFunctionsを設置させていただいたのですが、
2日以上経ってもGAのイベントに記録が残らない状況です。

サーバにjQueryとjquery.gafunc.js　の下記２つのファイルをアップロード。

jquery-1.7.2.min.js
jquery.gafunc.min.js

サイトのソースにもhead内に前述のjsファイルURLの2行を記述しました。

その後、ブラウザのJavaScriptのコンソールでエラーが出てないか確認しましたら、
下記が表示されました。

エラーコンソール

Failed to load resource: the server responded with a status of 404 (Not Found)

jquery.gafunc.js
jquery.js

何か他に見落としの可能性などありますでしょうか。
オプション設定はしておりません。

同期非同期、Jqueryについてあまり理解していませんので、
基本的なことかもしれませんが、ご教示いただければ幸いでございます。
よろしくお願いいたします。

返信
- 村上和久
  2013年9月30日 10:22 AM
  
  ファイルが見つからないようですね。
  記述のURLがあっているか、アップロード先があっているか確認してみてください。
  
  返信
  - tomi
    2013年9月30日 2:52 PM
    
    村上様
    
    ご丁寧にご返信ありがとうございます。
     ＞記述のURLがあっているか
    
    Google Analyticsのトラッキングコードが入っているページの内に
    
    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);
    })();
    
    ＞アップロード先があっているか確認してみてください。
    
    アップロード先は、Google Analyticsのトラッキングコードが入っているページと同じフォルダに設定しております。
    
    返信
  - tomi
    2013年9月30日 2:55 PM
    
    村上様
    
    ご丁寧にご返信ありがとうございます。
    
    さきほど誤ってメールしてしまいました。
    申し訳ありません。
    
    正確なメール内容はこちらです。
    
     ＞記述のURLがあっているか
    
    Google Analyticsのトラッキングコードが入っているページの内に
    
    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);
    })();
    
    ＞アップロード先があっているか確認してみてください。
    
    アップロード先は、Google Analyticsのトラッキングコードが入っているページと同じフォルダに設定しております。
    
    返信
    - 村上和久
      2013年9月30日 3:40 PM
      
      jquery.js と jquery.gafunc.js を読み込んでいる記載があるかと思いますが、src=”js/… の部分は環境に合わせて書き換える必要があります。ファイルを格納している位置をご確認の上、換えてみてください。
      
      返信
      - tomi
        2013年10月3日 9:45 AM
        
        村上　様
        
        解決しました。
        無事に設定できました。
        
        設定できなかった原因は
        村上様がご指摘下さったように、
        
        ＞src=”js/… の部分は環境に合わせて書き換える必要があります。
        
        この部分を書き換えたら
        アナリティクスのイベント欄に表示できるようになりました。
        
        ありがとうございました。
msuzuki
2013年7月24日 8:47 AM

あと、ChromeだとDownloadが集計できませんか？
オプトアウトアドオンなど外して試してみたのですが、リアルタイムも集計もどちらにもカウントされていないみたいでした。

返信
- 村上和久
  2013年7月24日 9:39 PM
  
  私のサイトではChromeでもデータが取れてます。
  差し支えなければURLを教えていただけますか？
  
  返信
msuzuki
2013年7月19日 1:38 PM

PDFなどのファイルのダウンロードをカウントしたくページに組み込んでみたのですが、
・Reading
・Outbound
は取れているのですが、Downloadだけカウントされず困っております。

————————————————————–
jquery　1.10.2
GA Functions 1.4.3
————————————————————–
■リンク箇所

————————————————————–

何かアドバイスがあればよろしくお願いいたします。

返信
- msuzuki
  2013年7月22日 9:45 AM
  
  自己解決しました。
  
  どうやら ID=”mainbody” (classはOK) がＮＧらしく
  Downloadが動かないみたいでした。
  
  返信
  - 村上和久
    2013年7月22日 12:11 PM
    
    msuzukiさん、自己解決ということでよかったですね。お力になれずすみません。
    頂いた投稿のリンク個所はdoc/1000_CXXXX_A.xlsとのことなので、デフォルトの設定でしたら大丈夫なはずですが、なんでだろう？
    オプションの downloadSelector や downloadTypes を変えてみる方法がありますので、もしまだ動かない事があったら試してみてください。
    
    返信
    - msuzuki
      2013年7月23日 9:38 AM
      
      ・・・・・・
      
      上記のようにid属性が「mainbody」内にあるリンクはカウントされませんでした。
      ＩＤを「main-body」や「main_body」に変更したら問題なく集計されるようになりました。何かJSとバッティングしてるんでしょうかねぇ？
      
      返信
      - 村上和久
        2013年7月23日 5:54 PM
        
        gafunc内ではそのIDは使ってないので、htmlのどこかでそのIDを二重に使ってるか、他のJSとバッティングしてるかも知れませんね。