Передача данных в Roistat через Google Tag Manager — простое решение
Простое решение, которое позволяет вместе с отправкой формы с сайта создать заявку в Roistat без правок кода сайта. Нужен минимальный опыт работы с GTM и базовое понимание HTML.
Что нужно для этого:
- Сайт с размещенным контейнером Google Tag Manager
- Код счетчика Roistat, установленный непосредственно в коде сайта.
Суть решения по передаче заявок в Roistat через GTM
При отправки формы данные введенные в поля передаются в Роистат при срабатывании функции roistatGoal.reach().
Вдобавок к стандартным полям контактных данных (имя, телефон, email) также передается Title страницы на которой сработала форма, а также содержание поля «Сообщение».
Также передается значение селектора региона, который определяется по IP
Что нужно сделать:
- Cкачать код контейнера Google Tag Manager ( .json)
- Импортировать его в Ваш контейнер GTM в интерфейсе Администрирование > Импорт контейнера
- Настроить под свой проект тег Roistat, триггер его срабатывания и переменные.
Важно! При импорте контейнера необходимо выбрать вариант импорта «Объединить»
Пояснения:
Настройка тега Roistat не вызовет сложностей. В моем варианте все нужные для первичной квалификации лида данные передаются в параметре text. Вы можете их также передавать в fields.
1 2 3 4 |
<script type="text/javascript"> roistatGoal.reach({leadName: "Заявка с сайта", name: {{roistat_name}}, phone: {{roistat_phone}}, email: {{roistat_email}}, text: ("Интересует " + {{roistat_title}} + ". Регион: " + {{roistat_region}} + ". " + {{roistat_message}} )}); </script> |
В двойных фигурных скобках указаны переменные, вместо которых при срабатывании функции roistatGoal.reach() подставляются значения полей формы.
Триггер запускает функцию при отправке формы. В моем варианте триггер привязан в ID формы. Вам нужно будет вставить свое значение ID формы
Переменные
{{roistat_name}} *передает значение поля Имя
{{roistat_phone}} * передает значение поля Телефон
{{roistat_email}} * передает значение поля email
{{roistat_title}} *передает Title заголовок страницы на которой сработала форма
{{roistat_region}} * передает автоматически выбранный селектор региона
{{roistat_message}} * передает содержание поля Сообщение
Как настроить переменные под свой проект?
Переменные привязаны к именам полей ввода. К примеру данный код
1 2 3 4 5 |
function() { var emailSelector = "[name=author_mailbox]"; var email = document.querySelector(emailSelector); return email.value; } |
содержится в переменной {{roistat_email}} и подставляет вместо нее содержимое поля на сайте собирающее email, которое имеет следующий код
1 |
<input type="text" name="author_mailbox" value="" placeholder="Электронная почта" class=""> |
Как видим общее у поля и нашей переменной имя элемента author_mailbox.
Что Вам нужно сделать для настройки:
Войти в редактирование переменной в вашем эккаунте Google Tag Manager(a) и заменить соответствующие значения во вторых строках на имена соответствующих полей на своем сайте.
Очевидные плюсы использования Tag Manager для создания заявок в Roistat
- Легко настраивать передачу в Roistat в полях дополнительных сведений внутри «fields» абсолютно любые данные (я например в одном из проектов передаю названия сработавшей формы, название страницы, тип страницы на которой сработала форма)
- Не нужно искать или ждать программистов (что еще хуже самому лезть в код сайта и искать среди «костылей» нужную форму)
Комментарии