Сбор данных из формы

Если на вашем сайте есть форма для ввода данных с кнопкой подтверждения отправки, вы можете настроить сбор данных из этой формы при помощи JavaScript. Данные будут записываться только после того, как пользователь нажмёт по кнопке в форму, которая подтвердит отправку данных.

❗Важно: если ваша форма в iframe, мы не сможем собирать из неё данные.

Рассмотрим пример формы с вводом имени, телефона и кнопкой отправки данных:

Для того, чтобы начать записывать данные с проверкой клика по кнопке, нам понадобится найти селекторы полей для ввода данных и селектор кнопки.

Подробнее о том, как найти селектор нужного элемента, мы рассказываем в этой статье. 

После того, как селекторы найдены, перейдите в раздел "Настройки" - "Сбор данных о посетителях" - "Настроить JavaScript код" и добавьте туда следующий скрипт:

function getClosest(el, s) {
    var r = undefined;
    while (el) {
        if (el.matches(s)) {
           r = el;
           break;
       } else if (el.tagName.toLowerCase()=='body') {
           break;
       };
       el = el.parentElement;
  };
  return r;
};
document.addEventListener('click', function(e) {
    if (e.target.matches('СЕЛЕКТОР КНОПКИ В ФОРМЕ')) {
        var form = getClosest(e.target, 'form'),
            name = form.querySelector('СЕЛЕКТОР ИМЕНИ').value,
            phone = form.querySelector('СЕЛЕКТОР ТЕЛЕФОНА').value;
        carrotquest.track('Название события');
        carrotquest.identify([
           {op: 'update_or_create', key: '$name', value: name},
           {op: 'update_or_create', key: '$phone', value: phone}
       ]);
    };
});

В скрипт необходимо добавить селекторы, которые вы нашли ранее. В эту строчку добавляем селектор кнопки в форме:

if (e.target.matches('СЕЛЕКТОР КНОПКИ В ФОРМЕ')) {

Селектор поля с именем и телефоном добавляем в эти строчки:

name = form.querySelector('СЕЛЕКТОР ИМЕНИ').value,
phone = form.querySelector('СЕЛЕКТОР ТЕЛЕФОНА').value;

Добавляем название события, которое будет фиксироваться при клике на кнопку:

carrotquest.track('Название события');

Название события может быть любым. Главное, чтобы оно подсказывало вам, что оно было записано после клика именно по этой кнопке.

После того, как все селекторы расставлены по своим местам, сохраните изменения в разделе Настроить JavaScript код и проверьте настроенный сбор данных.

❗ Важно: приведенный выше скрипт является примером. Вы можете его менять в зависимости от той формы, с которой хотите настроить сбор данных - добавлять переменные или менять текущие.