Google Analyitcsでスクロール量を取得するjQuery Plugin


ダウンロードはこちらからお願いします。

jquery.ga_scroll2.js

以前公開していたjQueryを使って、どこまでスクロールされたのかを取得するスクリプトを改良しました。

信頼と実績のアイトランス株式会社の石井社長が、社長自ら神懸かり的なリファクタリングをしていただき、ぼろぼろだったスクリプトを修正していただきました。
社長オリジナル版はこちらにあります。
jquery.ga_scroll.js

元々の設計がおかしい所があったので、直していただいたものをちょこっと修正して使いやすくしました。
もともとUser Insightをパクることを目的としていたスクリプトだったので、とりあえず取れるデータは全部取っちまえ的な考えだったのですが、GAでは使いにくい所がありました。
そこで、カスタムイベントでスクロール量(10%刻み)と滞在時間(30秒)、カスタム変数にスクロール量をセッションレベルのスコープで格納するようにしました。
たとえば、ランディングページに仕込んで、ランディングページがどこまで閲覧されて、どのくらいの時間見られたのかがカスタムイベントによってわかるようになり、カスタム変数でセグメント化することで、スクロール量とコンバージョンをクロス集計することが可能になります。
もともとは、ホイールの利用回数とか、クリック数とかも取っていたのですが、集計も面倒なので止めました。
スクロール量とクリック数だけに絞ることで使いやすくなったと思います。

ダウンロードはこちらからお願いします。
jquery.ga_scroll2.js

使い方

jqueryを読み込んだ後に、jquery.ga_scroll2.jsを読み込んで、実行させてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="js/jquery.ga_scroll2.js"></script>
<script type="text/javascript">// <![CDATA[
    $(function(){
         $.ga_scroll2();
    })
// ]]></script>

こんな感じです。

取得されるデータ

デフォルトの状態で利用すると、ページを移動するときに以下のようなデータがGoogle Analyticsへ送信されます。

カスタムイベント(スクロール)
category: 「scroll」
action : 設置したページのURL
label:スクロール量(10%刻みでのヒストグラム)
例:10-20, 40-50 など

カスタムイベント(滞在時間)
category: 「duration」
action : 設置したページのURL
label:滞在時間(30秒刻みでのヒストグラム)
例:30-60, 90-120 など

カスタム変数(スロット3)
カスタム変数にはスクロール量のデータが入ります。
スコープはセッションレベルです。
デフォルトではスロット3になっていますので、被らないように変更してください。

設定

jquery.ga_scroll2.jsファイル中にある
var defualt_options = { 〜〜
が設定箇所です。
enableをfalseにすると、機能が使えなくなります。
track_scrollもしくは、track_durationのどちらかは必ずtrueにしておいてください。

引数に設定内容を入れて、渡すこともできます。jQuery分かる人は利用してみてください。

One Comment

  1. FA より:

    使わせてもらっております。

    スクロールの方で100-110というのが出たのですが、
    これは一番下までスクロールしたということでよいのでしょうか?

Leave a Reply