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

Если на вашем сайте есть форма для ввода данных с кнопкой подтверждения отправки, вы можете настроить сбор данных из этой формы при помощи 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 код и проверьте настроенный сбор данных.

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

❗ Обратите внимание: Если вы знаете, что у многих пользователей вашего сайта интернет-соединение нестабильно и/или скрипт Carrot quest может не успеть загрузиться и данные могут не попасть в карточку лида - то в таком случае можно использовать методы URL API. 

После заполнения формы вам нужно перенаправить пользователя на страницу сайта, в ссылку на которую добавлены указания на данные, которые надо собрать из формы. Пример ссылки для перенаправления: 

https://example/?cq_identify_Название_свойства_для_передачи={{значение_свойства_для_передачи_в_cq}}

Подробнее метод рассматривается в документации для разработчиков.