Categories
GoogleAnalytics

Google Analyticsで、どこまでスクロールしたのかが分かる

2011年4月24日追記
このファイルは完全に修正しました。
最新版は下のページにあります。
http://web-analytics-or-die.org/?p=355

このページのスクリプトは、バグまみれなので、使わないようにしてください。

———–

GAを使って、どこまでスクロールされたのかを取得するプラグインを作成しました。
User Insightの機能いいなって思って作りました。

ついでに、
・ページでの滞在時間
・マウスクリック回数
・マウスホイール（上）利用回数
・マウスホイール（下）利用回数
も取得しちゃっています。

トラックイベントの変数に最大スクロール位置を入れて、
ひとつのカスタム変数の中に「:」区切りで全ての値を入れています。
GAを使って簡単にデータを取ることを目的としていますので、マウス位置の動きとかをとりたい場合は、素直にUserInsightを入れましょう。

サンプルサイト
http://tanakanakana.happy888.net/scroll.html

ga_scroll.js
（2011/4/24 リンク外しました。）

var firstTime = new Date().getTime();

$(function() {

    var conf = {
    //カスタムリンクに入れる変数を設定
        link_var : "scroll_p",
    //マルチカスタム変数で利用するスロット
        slot : 1,
    //マルチカスタム変数のカテゴリ名
        category : "pageData",
    //サイト内で使用しているページレベルのカスタム変数
        page_var : [1,2],
    //_trackEvent(category, action, optional_label, optional_value)
    //トラックイベントのカテゴリ名
        l_category : "pageData",
    //トラックイベントのアクション名
        l_action : "scroll_point",
    //トラックイベントのラベル名
        l_label : "scroll_point"
    }


    //初期化
    var d = {
        scroll_p : 0, //スクロール位置
        durTime : 0.00, //滞在時間
        wheelUp : 0,  //ホイールアップの回数
        wheelDown : 0, //ホイールダウンの回数
        mClick : 0 //マウスクリックの回数
    }

    //前処理:ページレベルのカスタム変数を消去
    for(var i=0; i<conf.page_var.length; i++){
        pageTracker._deleteCustomVar(i);
    }

    var getVar = function(){
        for(var s in d){
            if(s == conf.link_var){
                return eval("d." + s);
            }
        }
    }

    var setVar = function(d_array){
        var temp = d_array[0];
        for(var i=1; i < d_array.length; i++){
            temp = temp + ":" + d_array[i];
        }
        return temp;
    }


    var loopWait = function(timeWait) {
        var timeStart = new Date().getTime();
        var timeNow = new Date().getTime();
         while( timeNow < (timeStart + timeWait ) )
     {
         timeNow = new Date().getTime();
    }
        return;
    }

    $(window).scroll(function(){
        var temp_p = $(window).scrollTop();
        if(d.scroll_p < temp_p){
            d.scroll_p = temp_p
        }
        //console.log(d.scroll_p);
    });

    $(window).mousewheel(function(e,del){
        if(del>0){
            d.wheelUp++;
            }else{
            d.wheelDown++;
        }
        //console.log("up:"+ d.wheelUp + ",down:" + d.wheelDown);
    });

    $(window).click(function(){
        d.mClick++;
        //console.log(d.mClick);
    });

    $(window).unload(function(e){
        var nowTime = new Date().getTime();
        d.durTime = (nowTime - firstTime)/1000;
        var cstmLink = getVar();
        var d_array = [d.scroll_p, d.durTime, d.wheelUp, d.wheelDown, d.mClick];
        var cstmVar = setVar(d_array);
        //console.log(cstmLink + ">>" + cstmVar);

        //mcvにセット
        pageTracker._setCustomVar(
            conf.slot,
            conf.category,
            d_array,
            3
        );
        //トラックイベント
        pageTracker._trackEvent(
            conf.l_category,
            conf.l_action,
            conf.l_label,
            parseInt(cstmLink)
        );
        loopWait(50);
    });


 });

トラックイベントに入れる変数は変更可能です。
滞在時間をトラックイベントにすることもできます。
これを使うと念願の直帰ユーザーの滞在時間まで取れます！
（クロス集計で余裕でだせます！）
トラックイベントを利用すると、GAの画面上で平均値を出すことができるので、
パッとみたいものをトラックイベントに入れれば良いかと思います。

■諸注意
*重くなります
作るの大変そうだったので、JavaScriptのライブラリ(jQueryとjQueryプラグイン)を使っています。
一般的な環境では気にならない程度ですが、確実にサイトのパフォーマンスは下がります。
その他のライブラリ(prototype.jsなど）を使っている場合は、そのままでは共存できません。コードを改編すれば、共存することもできますが、ライブラリを2つ使うと、パフォーマンスが落ちるので、あまりオススメしません。
逆に既にjQueryを使っているサイトであれば、パフォーマンスの問題はそれほどないです。

*動作がとろくなります
ビーコンを読み込むイベントは「onUnload」イベントを使っています。
ページを移動した時、ページを閉じたときに、ビーコンを読み込んでいます。
その際、50msの遅延処理を行っているので、ちょっと遅いなくらいに感じるかもしれないです。

*全部のデータが取れるわけではないです
onUnloadイベントは結構テキトーなイベントでブラウザによっては取得できないこともあります。全てのデータを取るというつもりではなく、あくまでも傾向を知るという形で使った方が良いかと思います。
Google Chromeでは遅延処理が効かなくなっていたので、取れない場合もあるかもしれないです。
ブラウザごとの挙動の違いは↓にまとまっています。
http://hisasann.com/housetect/2008/09/onunload.html

*全ページに入れることはあまりオススメしません
動作が重くなるので、全ページに入れることはあまりオススメできません。
ランディングページなど、ココぞというページにだけ使う方が良いかと思います。
GAの仕様として1セッション当たり500リクエストまでに制限されていますが、 ページ移動時、ページ閉じる時だけなので、その点は問題ないと思います。

*これまでのプラグインとは一応共存できる
これまで作った他のプラグインとは一応共存できているみたいです。
ただし、オフサイトリンククリック時にも 50msの遅延処理を行っているので、さらに重く感じるかもしれないです。
サンプルサイト

■インストール方法

各種jsを用意し、アップロードした後、
GAコードが適切に入っているHTMLのヘッダ内に

<script src=’jQueryへのパス’></script>
<script src=’jquery.mousewheel.min.jsへのパス’></script>
<script src=’ga_scroll.jsへのパス’></script>

を入れてください。パスは適宜変更してください。
これだけできっと動きます。

1 reply on “Google Analyticsで、どこまでスクロールしたのかが分かる”

ちなみに、スクロール位置については、単純に座標を取得しているだけなので、
あんまり意味はないかもしれないです。
ページの長さを取得して、何％見られたかみたいな形にした方が良いかもしれません。
どこかで余裕があれば作ります。

Leave a Reply

Your email address will not be published. Required fields are marked *