Как настроить захватчик форм в UTMSTAT

  • 8 minute read
  • 18.5K views
Важно: если у вас Тильда или другой популярный конструктор/квиз. Подключайте готовую интеграцию, не надо захватывать формы. Захватчик нужен только для сайтов, где нет интеграций,  обычно это самопис.

Захватчик форм в UTMSTAT предназначен для простого получения заявок, переданных из форм на вашем сайте, без услуг программиста.

Захватчик работает на стандартных селекторах JQuery/Document.querySelectorAll и не использует каких то своих костылей. Поэтому если форма не захватывается, ищите проблему по аналогии с JQuery.

Рассмотрим на примере типовой формы сбора контактов

1. Подготовка сайта

1.1 Как правильно делать верстку

Неграмотная верстка, может сделать невозможным дешевое подключение форм на сайте к аналитике. Чтобы избежать проблем, достаточно следовать простым правилам верстки.

1.1.1 Все формы на сайте нужно делать через тег form

Это стандарт HTML. Не нужно изобретать велосипедов, иначе ломается вся логика работы с формами и нужно будет делать дорогостоящие костыли.

1.1.2 Все формы должны иметь уникальный идентификатор в рамках страницы

Уникальный идентификатор должен быть или у тега form или у контейнера – div.

В качестве идентификатора могут быть атрибуты id или class.

Хорошо:

<form id="callback">...</form>
<div id="callback">
    <form>...</form>
</div>

или

<form class="subscribe">...</form>
<div class="subscribe">
     <form>...</form>
</div>

Плохо:

<div>
    <form>...</form>
    <form>...</form>
</div>

1.1.3 Не используйте ajax-формы без явной необходимости

Если они уже сделаны – оставьте, если планируете делать потому что так “модно” – не надо. На продажи не влияет, нагрузку обычный формы вам не сделают. Ajax только усложняет и удорожает процесс разработки всем.

Захватчик форм их поддерживает, но это лишние сложности.

1.1.4 Не используйте iframe-формы

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

1.2 Типовые ошибки

Захватчик форм будет работать корректно, при условии что в HTML-коде сайта нет технических ошибок, в частности все атрибуты id – уникальны.

Но частая ошибка, что id повторяются и это ломает всю логику селекторов. К сожалению многие программисты не знают или придают этому факту значения.

Как проверить?

  1. Откройте сайт в хроме
  2. Отройте консоль и перейдите во вкладку Console
  3. Если есть там есть замечания, отфильтруйте их по тексту “with non-unique”
  4. Если замечания остались, устраните их все.

Если ошибок нет, консоль будет выглядеть так:

Ошибок нет, все хорошо

2. Настройка захватчика форм

2.1 Перейдите в раздел “Захватчик форм”, подраздел “Настройки“

Ссылка для перехода: https://utmstat.com/forms

Расположение раздела “Захватчик форм”, подраздела “Настройки” в панели управления utmstat

2.2 Нажмите кнопку “Добавить форму”

Расположение кнопки “Добавить форму” в настройках захватчика форм

2.3 Заполните поля в разделе “Добавление формы”

Посмотрите HTML-код вашей формы на сайте.

Перенесите все названия полей/форм/кнопок в захватчик UTMSTAT. Получится примерно вот так:

Нажмите кнопку “Создать”.

Форма захвата создана успешно.

Теперь проверяем форму.

Добавьте в url вашего сайта, где находится форма, параметр ?utmstat_debug=1. Например так http://example.com/?utmstat_debug=1

Если все селекторы правильные, поля и кнопка обведутся пункитром.

2.4 Добавление своих полей

По умолчанию доступны типовые для всех поля – email, телефон и прочее.

Если у вас что-то специфичное, например “Материал швеллера”, то можно добавить новое поле в общую базу полей.

Это делается в разделе CRM/Свои поля – https://utmstat.com/crm-fields-list

Созданное поле будет как в CRM, так и в захватчике форм, а так же будет передаваться во внешнюю CRM.

Чтобы не запутаться, код поля в UTMSTAT должен быть равен значению атрибута name из поля на сайте.

В остальном работа с полем аналогична.

2.5 Проверка работы захватчика формы

2.5.1 Убедитесь что захвачены все формы на сайте и нет ошибок в отладочной панели.

Добавьте в url вашего сайта параметр ?utmstat_debug=1. Например так http://example.com/?utmstat_debug=1

Отладочная панель появится в футере сайта и она должна быть зеленой. Если есть красные поля – разбирайтесь в причинах и исправляйте. Скорее всего нет или неправильный селектор для поля.

Допускаются красные поля, если вы уверены что они не нужны.

Серые поля не имеют значения для сбора лидов, не обращайте на них внимания.

Не допускается обработка селектором нескольких форм в рамках одной страницы.

Каждый селектор и форма созданная в UTMSTAT должна захватывать только одну конкретную форму на текущей странице сайта, иначе будет путаница, так как у одинаковых для селектора форм может быть разный набор полей.

Отладочная панель показывает такую ошибку и ее надо исправлять.

2.5.2 Проверьте каждую форму

Обязательно пройдитесь по всем формам на сайте и убедитесь что с них реально приходит заявка со всеми нужными полями.

Перейдите в раздел “Заявки”.

Если все работает, в течение 1-2 минут должна появится новая заявка.

Новая заявка зарегистрирована

В конце зайдите в отчет робота – https://utmstat.com/alice и убедитесь что у него нет замечаний по формам.

2.6 Что делать, если не работает

  1. В режиме отладки – ?utmstat_debug=1, убедитесь что form обведена красной рамкой, кнопка – желтой, поля – зеленой. Если это не так, используйте более точные селекторы и режим querySelectorAll. Например input#gform_submit_button_2. Иначе бывает что в верстке разные элементы с одним id и идет захват не того элемента.
  2. Убедитесь, что вы не ошиблись в названиях атрибутов и селекторов. Может быть так что в HTML-коде id=”form_main”, а у вас по факту form_main1. Это частная ошибка.
  3. Добейтесь чтобы в режиме отладки подсвечивались все нужные формы и поля. Тут обычно проблема в неправильных селекторах.
  4. Убедитесь что ваш js код не перерисовывает части формы, удаляя все навешанные события.
  5. Если нет подсветки или заявка не создается, убедитесь что нет ошибок JS в консоли хрома и интеграции JS в списке интеграций. Бывает неправильный селектор, например число #34 или #79990000001 вызывают ошибку и захват форм прерывается.
  6. Если проблема с конкретной формой – отключите все формы, кроме проблемной и настройте текущую. Если все заработало, включите остальные формы, возможно у полей форм не уникальные селекторы.
  7. Если не уверены что форма отправляет нужные данные, в режиме отладки, при отправке формы показывается id заявки в очереди. Посмотреть что ушло можно в логе захватчика по этому id.
  8. Если селекторы завязаны на id, убедитесь что все id на странице уникальны. Если это не так, исправьте.
  9. Если все равно не работает, обратитесь в поддержку.

3. Галочки политики конфиденциальности и прочие согласия


Такие галочки не несут смысла для CRM, но чтобы отладочная панель была без ошибок, галочки также нужно захватить.

Для них предусмотрено 4 поля:

  • Согласие на обработку персональных данных
  • Согласие с офертой
  • Согласие с пользовательским соглашением
  • Согласие с использованием cookies

Настройте селектор на любое подходящее поле и проблема будет решена.

4. Захват корзины интернет магазина

Корзина интернет-магазина подключается 3 способами:

  1. Подключение к CRM на уровне кода интернет-магазина, обычно это связка с RetailCRM или 1C-Битрикс.
  2. Подключение через вебхуки (Тильда)
  3. Захват формы корзины

Если вы не готовы делать варианты 1 и 2, но хотите быстрый результат. То можно просто закинуть всю табличку из корзины в любую CRM через захватчик.

Захват корзины производится в 5 шагов:

  1. Захват контейнера со всеми формами, но иногда часть форм может быть за пределами контейнера – это нормально
  2. Захват полей с информацией о клиенте, как в обычной форме
  3. Захват таблицы с товарами (поле – Корзина /Контейнер с товарами в корзине)
  4. Захват поля с итоговой суммой (поле – Корзина / Стоимость товаров в корзине)
  5. Захват кнопки или формы отправки заказа

Обратите внимание, что таблица с товарами и итоговая сумма задаются в отдельном блоке настроек формы – Корзина. Если все сделано правильно, в режиме отладки блоки подписываются как “Список товаров в корзине” (3) и “Стоимость товаров в корзине” (4).

Добейте чтобы все подсветилось и все будет работать.

5. Настройка AJAX/Popup форм

Ajax форма – это когда верстка формы загружается в момент нажатия на кнопку на сайте, а не в момент загрузки сайта. Поэтому если сделать обычную настройку, то форма не захватится.

Как работает ajax-форма и захватчик форм:

  1. Загрузился сайт и сработал захватчик, а так как формы не было в верстке, то форма не захватилась.
  2. Нажали на кнопку, например – Заказать
  3. Отправился запрос на сервер
  4. Пришел ответ с версткой
  5. Форма показалась на сайте
  6. Сработал захватчик формы

Нам нужно вызвать функцию захвата формы в момент реальной загрузки HTML-кода формы в HTML-код сайта, то есть на шаге 5.

Для этого нужно указать селектор кнопки, которая и вызовет отрисовку самой формы.

Как будет работать:

  1. Клик по кнопке для вызова формы запускает отложенный вызов функции повторного захвата форм.
  2. Форма загрузилась
  3. Захватчик форм делает несколько попыток захватить новую форму, пока не получит подтверждение что форма захвачена.
  4. Готово, далее работаете как с обычной формой.
Итого: чтобы захватить ajax-форму, нужно лишь указать селектор кнопки, которая вызывает эту форму, а далее обычная настройка селекторов формы.

6. Сложные случаи

6.1 Готовый код

Если ваши формы сделаны через IFrame или устаревшие конструкторы сайтов типа Платформа LP. То тут надо использовать наше API.

Но мы уже сделали заготовки кода под типовые кейсы, смотрите их в личном кабинете здесь – https://utmstat.com/crm-form

6.2 Сложные селекторы

Если единственный способ захватить поле, это написать сложный селектор из нескольких dom-элементов, используйте консоль хрома для отладки.

Сначала убедитесь что селектор находит нужное поле там, потом копируйте его в форму.

Пример кода для теста сложного селектора:

document.querySelectorAll('form#quiz2 > div.quiz__steps > div.quiz__list > div.slick-list > div.slick-track > div.quiz__item > div.flex > ul > li > label > input[name="question7[]"]')

Как выглядит консоль хрома:

7. Как работать с селекторами

7.1 Общие сведения

Захватчик форм работает на базе стандартных селекторов javascript – примеры

Задача селектора указать точный адрес элемента в DOM-дереве HTML-кода сайта, чтобы получить оттуда значение, которое ввел пользователь и отравить его в UTMSTAT и CRM.

Пример кода сайта

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="contact_form">
    <div class="form_field">
        <input id="phone" name="phone">
    </div>
    <div class="form_field">
        <input id="email" name="email">
    </div>
</form>

</body>
</html>

Для поля phone селектор будет выглядет так:

form > div.form_field > input[name="phone"]

Если привести аналогию с почтовыми адресами, то селектор выглядел бы так:

Москва > Тверская 7 > Подъезд 4 > Квартира 33

Точный адрес элемента.

7.2 Правила работы с селекторами в UTMSTAT

7.2.1 Всегда работаем в режиме querySelectorAll

Если вы новичек в селекторах, остальные режимы вас будут путать.

7.2.2 Всегда указываем полный путь до элемента

В рамках страницы, селекторы должны возвращать форму/поле/кнопку в единственном экземпляре. Если селектор подходит для двух разных полей, то будет путаница.

Поэтому чтобы ни вы ни захватчик не путались, всегда пишем селектор подробно.

Примеры:

Плохо, на странице может быть несколько форм и несколько полей, нет однозначного адреса откуда брать значение. Не смотря на то что это селектор по id и он по идее должен быть уникальным на странице, часто это правило нарушается.

#phone

Плохо, на странице может быть несколько форм и несколько полей, нет однозначного адреса откуда брать значение.

input[name="phone"]

Хорошо, указали конкретную форму – contact_form, а также точный адрес внутри дерева, где лежит нужный input.

form#contact_form > div.form_field > input[name="phone"]

7.2.3 Завязываться только на теги и их атрибуты – id, name, class

Не надо усложнять и делать сложный код, тегов + id, name, class обычно более чем хватает.

Список того, что крайне не рекомендуется использовать:

  • * – любые элементы.
  • :visited – «псевдоклассы», остальные разные условия на элемент
  • .c1.c2 – элементы одновременно с двумя классами
  • a#id.c1.c2:visited – элемент a с данным id, классами c1 и c2, и псевдоклассом visited
  • div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div
  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть)

8. Как гуглить решение проблемы

Захватчик форм работает на базе стандартных селекторов javascript, которые в свою очередь работают через метод document.querySelectorAll. Поэтому если что-то не получается, то можно смело гуглить решение проблемы для document.querySelectorAll, UTMSTAT в логику никак не вмешивается.

Если решение проблемы работает в консоли хрома (раздел 4), оно будет работать и в UTMSTAT.

План гугления такой:

  1. Гуглим проблему, например по запросам “javascript queryselector by class” или “javascript queryselector by data attribute” или “javascript queryselector second element“
  2. Обычно решение с примерами кода есть на https://stackoverflow.com/ в выдаче гугла.
  3. Адаптируйте примеры под свою задачу.
  4. Если не получается сходу, работайте по плану из раздела 4. “Сложные случаи”

9. Проблемы и решения

9.1 Не срабатывает селектор на кнопке

Выберите тип события onClick.

9.2 Форма перестала работать

  1. Проверьте что форма включена.
  2. Проверьте что не поменялась верстка на сайте и селекторы формы не потеряли актуальность.
Total
0
Shares
Like 0
Like 0
Tweet 0
Вам также понравится