2011-12-11 14 views
3

實現我想實現在谷歌分析或任何JavaScript這樣的事情先向ClickTale像谷歌分析

的時間報告揭示了長訪問者如何與每個單獨的現場,並與整個網絡的形式進行互動。長時間的交互時間可能意味着某個特定領域的請求過於複雜。 enter image description here

我該怎麼做,請給點建議?

+0

您曾經試圖跟蹤時間的onfocus和的onblur事件? – jrosell

回答

3

您可以跟蹤在每個字段上花費的時間並在表單提交之前將其發送到您的服務器。下面的示例跟蹤每個字段的焦點時間並將其存儲在字段本身的自定義屬性中。就在提交表單之前,我們將跟蹤數據組裝成一個JSON字符串並將其發佈到服務器,之後表單提交可以照常進行。

即是這樣的:

$(document).ready(function() { 

    $('#id-of-your-form').find('input, select, textarea').each(function() { // add more field types as needed 

    $(this).attr('started', 0); 
    $(this).attr('totalTimeSpent', 0); // this custom attribute stores the total time spent on the field 

    $(this).focus(function() { 
     $(this).attr('started', (new Date()).getTime()); 
    }); 

    $(this).blur(function() { 
     // recalculate total time spent and store in it custom attribute 
     var timeSpent = parseDouble($(this).attr('totalTimeSpent')) + ((new Date()).getTime() - parseDouble($(this).attr('started'))); 
     $(this).attr('totalTimeSpent', timeSpent); 
    }); 

    }); 

    $('#id-of-your-form').submit(function() { 

    // generate tracking data dump from custom attribute values stored in each field 
    var trackingData = []; 
    $(this).find('input, select, textarea').each(function(i) { // add more field types as needed 

     // tracking data can contain the index, id and time spent for each field 
     trackingData.push({index: i, id: $(this).attr('id'), millesecs: $(this).attr('totalTimeSpent')}); 

    }); 

    // post it (NOTE: add error handling as needed) 
    $.post('/server/trackFieldTimes', {trackingData: JSON.stringify(trackingData)}, function(data) { 
     // tracking data submitted 
    }); 

    // return true so that form submission can continue. 
    return true; 

    }); 

});