Перейти до основного контенту
Розширена інтеграція з формами
Mariia Lobchenko avatar
Автор: Mariia Lobchenko
Оновлено понад 7 міс. тому

Розширений спосіб налаштування форм — дозволяє збирати дані тільки з певних форм, й дасть можливість налаштувати форми у яких не виконується submit або якщо форми динамічні. Тобто цей спосіб є більш гнучкий, що дозволяє мануальне налаштування перехоплення ваших будь-яких форм із сайту.


Щоб перейти до налаштування, виберіть розділ "Маркетплейс інтеграцій" - "CMS/Site builders" - "Форми на вашому сайті".

При першому налаштуванні форм оберіть пункт “Розширене налаштування (підключити кожну форму окремо)”

Якщо ж ви раніше вже налаштували інший тип інтеграції, то переключитися потрібно тут:

Обов'язково підтвердіть перемикання інтеграції, натиснувши на “Так” (у такий спосіб просте налаштування форм перестає працювати, і потрібно буде всі форми налаштовувати окремо при розширеному способі)


Налаштування форми у розширеному варіанті складається із 6 основних пунктів:


Назва форми

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

Таку форму можна назвати (до прикладу) Підключити – 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 для кнопки відправки форми.


Налаштування форми на цьому завершено і воно відображатиметься у вас ось так:


Ви отримали відповідь на своє запитання?