ClickTale就像Google分析中的实施一样 [英] ClickTale like implementation on Google analytics

问题描述

我希望在Google分析或任何JavaScript中实现这样的功能

时间报告显示访问者与每个单独字段以及整个联机表单互动的时间。长时间的互动时间可能意味着在某个特定领域的请求过于复杂。

我该怎么做，请多多指教？ 您可以跟踪在提交表单之前，每个字段花费的时间并将其发送到您的服务器。下面的示例跟踪每个字段的焦点时间并将其存储在字段本身的自定义属性中。在提交表单之前，我们会将跟踪数据组合成一个JSON字符串并将其发布到服务器，之后表单提交可以像往常一样进行。

即，例如：

  $（document）.ready（function（）{
 
 $（'＃ （函数（）{//根据需要添加更多的字段类型
 
 $（this）.attr（ 'start'，0）; 
 $（this）.attr（'totalTimeSpent'，0）; //这个自定义属性存储花在字段上的总时间
 
 $（this） （）函数（）{
 $（this）.attr（'started'，（new Date（））。getTime（））; 
}）; 
 
 $ （this）.blur（function（）{
 //重新计算所花费的时间和存储的总时间自定义属性
 var timeSpent = parseDouble（$（this）.attr（'totalTimeSpent'））+（ new Date（））。getTime（） -  parseDouble（$（this）.attr（'started'）））; 
 $（this）.attr（'totalTimeSpent'，timeSpent）; 
}） ; 
 
））; 
 
 $（'＃id-of-your-form'）。submit（function（）{
 
 //从存储在每个字段中的自定义属性值生成跟踪数据转储
 var trackingData = []; 
 $（this）.find（'input，select，textarea'）。each（function（i）{//根据需要添加更多字段类型
 
 //跟踪数据可以包含每个字段的索引，ID和时间
 trackingData.push（{index：i，id：$（this）.attr（'id'），millesecs：$（this）.attr（ 'totalTimeSpent'）}）; 
 
}）; 
 $ b $ //发布它（注意：根据需要添加错误处理）
 $ .post（'/ server / trackFieldTimes'，{trackingData：JSON.stringify（trackingData）}，function（data ）{
 //跟踪提交的数据
}）; 
 
 //返回true，以便表单提交可以继续。 
返回true; 
 
}）; 
 
}）; 
  

I would like to implement something like this in Google analytic or any JavaScript

The Time Report reveals how long visitors interact with each individual field and with the entire online form. A long interaction time may mean that the request at a particular field is too complex.

How can I do it , Some advice please?

解决方案

You can track the time spent on each field and send it to your server before the form is submitted. The below example tracks the time-with-focus for each field and stores it in a custom attribute in the field itself. Just before submitting the form, we assemble the tracking data into one JSON string and post it to server, after which form submission can proceed as usual.

i.e. Something like:

$(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;

  });

});

这篇关于ClickTale就像Google分析中的实施一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！