К основному содержимому
Продвинутая интеграция с формами
Mariia Lobchenko avatar
Автор: Mariia Lobchenko
Обновлено более 6 мес. назад

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

Для перехода к настройке выберите раздел "Маркетплейс интеграций" — "CMS/Site builders" — "Формы на вашем сайте"

При первичной настройке форм выбрать пункт “Продвинутая настройка (подключить каждую форму отдельно)”

Если же вы ранее уже настроили другой тип интеграции, то переключиться нужно здесь:

Обязательно подтвердив переключение нажав на “Да” (таким образом простая настройка форм перестает работать, и нужно будет все формы настраивать отдельно при продвинутом способе)



Настройка формы в продвинутом варианте состоит из 6 основных пунктов:

Название формы

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

Ее можно назвать START NOW - header main. Таким образом понятно, что форма находится в шапке на главное странице и само название формы.


Страницы, на которых появляется форма

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

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


XPath кнопки отправки формы

В данном поле нужно прописать путь к кнопке, которая отвечает за отправку формы. По аналогии с настройками XPath в скрипте — есть возможность выбрать поиск элемента по id, class, text (тогда интеграция сама сформирует XPath) или выбрать мануальный режим и ввести итоговый XPath самостоятельно.

- айди кнопки можно найти в коде сайта;

- кнопка может быть как типа button, так и просто input;

- кнопка может быть без сабмита;

- XPath (путь к элементу) необходимо создавать по аналогии с XPath-ами для подмены, главным отличием является то, что вместо одинарных кавычек должны быть двойные, то есть XPath будет выглядеть не так //ul[@id='new_list'], а вот так //ul[@id=”new_list”].

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


Чек-боксы о форме

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

ВАЖНО! Функционал работает только совместно с "observeDOM": true (раздел Коллтрекинг - Настройки скрипта)

Самостоятельно отправлять данные формы в Ringostat этот вариант настройки для продвинутых пользователей. В случае, когда стандартные настройки не дают возможности корректно работать интеграции с формами, нужно чтобы разработчик сайта клиента внёс правки в код.


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

window.ringostatAPI.sendFormDataToRingostat('id_формы', e);

Где:

- 'id_формы' — можно найти на странице со списком форм:

- е — это ивент, который есть у каждой кнопки и инпута. В 99% случаев достаточно так и написать “e”. В остальных случаях вместо “е” достаточно написать “event”.

ВАЖНО! Без доработок со стороны разработчика вашего сайта отслеживание запускаться НЕ будет.

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


Настройка действий формы

В этом блоке настраиваются дополнительные действия по заполнению формы (если ничего не выбрано, то интеграция будет только передавать данные в СРМ).

Перезванивать клиенту после отправки формы — данная опция позволяет инициировать Callback-звонок клиенту сразу после заполнению формы клиентом на сайте

Перезванивать клиенту только в рабочие часы — по заполнению формы система будет инициировать Callback в рабочее время. Этот чек-бокс выступает дополнительной настройкой для предыдущего, т.е. нельзя просто отметить “Перезванивать клиенту только в рабочие часы”, нужно обязательно активировать чек-бокс “Перезванивать клиенту после отправки формы”.

Перезагрузить страницу после отправки формы — позволяет перезагружать страницу после отправки формы. Можно использовать, например, для того чтобы клиент увидел что что-то произошло после заполнения и отправки формы (например, появилась надпись “форма отправлена успешно” и форма отправилась).


Поля формы которые будут передаваться в Ringostat

В этом разделе нужно настроить список полей, данные из которых клиент хочет получать в СRM.

1.Из выпадающего списка нужно выбрать тип поля (Имя, Фамилия, Отчество, ФИО, Телефон, Почта, Другое)

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

Тип поля Другое — для одной формы можно создать до 10 полей этого типа.То есть вы можете создать 10 полей с типом Другое, если вам необходимо передавать данные не только из стандартных полей, но и, например, из поля Комментарий или любых других ваших кастомных полей.

Дополнительно вы можете выбрать для таких полей как Имя, Фамилия, Отчество, ФИО, Почта, Телефон, Другое галочку “Поле является обязательным к заполнению”. Таким образом интеграция будет подсвечивать поле красной обводкой и блокировать обработку формы, если пользователь не заполнил это поле.

А также для полей Телефон и Почта есть возможность включить валидацию.

Таким образом, для поля Телефон активируется плагин валидации номеров телефона (такой же, как запускается на нашем Callback), у клиента будет подставляться флажок страны:

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

2. Теперь нужно прописать путь к полю формы. Прописываем его идентично как мы прописывали XPath для кнопки отправки формы.


Настройка формы на этом завершена и она будет отображаться у вас вот так:


Нашли ответ на свой вопрос?