javascript - ClickTale 类似在 Google Analytics 上的实现

Question

我想在 Google Analytic 或任何 JavaScript 中实现类似的东西

时间报告显示访问者与每个单独的字段和整个在线表单交互的时间。较长的交互时间可能意味着在特定领域的请求过于复杂。

我该怎么做，请给我一些建议？

Answer 1

您可以跟踪在每个字段上花费的时间，并在提交表单之前将其发送到您的服务器。下面的示例跟踪每个字段的焦点时间并将其存储在字段本身的自定义属性中。在提交表单之前，我们将跟踪数据组合成一个 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;

  });

});