ClickTale как реализация в Google Analytics

Question

Я хотел бы реализовать что-то подобное в Google Analytics или в любом 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;

  });

});