Интеграция Tilda с Mindbox через GTM

Google Tag Manager (GTM) — бесплатный инструмент для управления маркетинговыми активностями. Используя GTM, можно отслеживать действия клиентов на сайте при помощи тегов.
Теги — фрагменты кода, которые настраиваются на стороне GTM и обычно помещаются внутрь страницы. Теги помогают сторонним сервисам собирать данные и проводить анализ поведения клиентов на сайте.

Основные термины GTM

• Контейнер — фрагмент кода на языке JavaScript, аналогичный Mindbox JS SDK или счетчику Яндекс.Метрики. Из контейнера выгружаются и исполняются теги.
• Тег — настраиваемый фрагмент кода. Операции в Mindbox являются тегами.
• Триггер — условие срабатывания тега. Например, отправка формы, клик по кнопке или открытие страницы с определенным URL.
• Переменная — сущность, которая хранит информацию для использования в тегах. Переменные бывают разных типов и могут содержать постоянное значение или фрагмент кода для динамического вычисления.

Подключение Tilda к GTM

Перед интеграцией Tilda с Mindbox необходимо подключить сайт к GTM. Процесс подключения сайта описан в инструкции Tilda Help Center.

Настройка сбора контактов с формы на сайте

Раздел описывает настройку передачи персональных данных клиентов из форм на Tilda. Раздел включает следующие инструкции:

• Создание интеграции и операций
• Настройка переменных в GTM
• Настройка триггеров в GTM
• Настройка тега с трекером Mindbox в GTM
• Настройка тега для отправки данных из формы в Mindbox
• Проверка интеграции

Создание интеграции и операций

В Mindbox создайте точку интеграции для сайта и настройте операцию для создания клиентов на основании данных из формы.
Пример настроек операции:

Настройка переменных в GTM

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

1. В GTM нажмите на поле ввода правой кнопкой мыши → Исследовать или Исследовать элемент. Откроется инспектор кода.
2. В инспекторе кода скопируйте значение переменной id=:

3. Создайте переменную с типом Собственный код JavaScript и вставьте код, заменив значение input_id на ID поля ввода.
   Переменная считывает указанное значение в поле формы сбора контактов.
   Для каждого поля ввода в форме необходимо создать отдельную переменную.

function() {
  var data = document.getElementById( 'input_id' ).value;
  return data;
}

Если в инспекторе кода отсутствует параметр id, то скопируйте значение переменной name=:

В переменную вставьте код, заменив в нём значение form_name на имя поля ввода:

function getValue() {
  var inputValue = document.getElementsByName("form_name")[0].value;
  return inputValue;
}

Настройка триггеров в GTM

Для настройки триггера на заполнение формы необходим event ID события.

1. Внутри настраиваемого контейнера нажмите Предварительный просмотр.
2. В открывшемся окне укажите адрес страницы с формой.
3. На странице сайта заполните и отправьте форму.
   На странице с предварительным просмотром появится новое действие.
4. Скопируйте название события.

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

Настройка тега с трекером Mindbox в GTM

1. Создайте тег с типом Пользовательский HTML.
2. В конфигурацию скопируйте код трекера Mindbox.
3. Триггером укажите системное событие Consent Initialization - All Pages.

Настройка тега для отправки данных из формы в Mindbox

Необходимо создать теги для каждой из форм на сайте.

1. Создайте тег с типом Пользовательский HTML.
2. В конфигурацию скопируйте код JavaScript async из созданной операции.
3. В параметры клиента в операции укажите переменные, получаемые из формы, внутри двойных фигурных скобок.
4. Обрамите код тегами <script> и </script>

Проверка интеграции

1. Нажмите Предварительный просмотр.
2. В открывшемся окне укажите адрес страницы с формой сбора данных.
3. Отправьте форму.
4. Вернитесь на страницу с предварительным просмотром.
   В событии отправки формы в блоке Tags Fired находится настроенный для формы тег.

5. Чтобы увидеть данные, переданные в Mindbox, нажмите блок Tags Fired.

При успешной настройке в Mindbox создается новый клиент с введенными в форме данными.

6. Чтобы запустить передачу данных с публично доступной страницы, опубликуйте контейнер с изменениями.

Настройка передачи действий клиентов на сайте

Раздел описывает настройку выдачи клиентам действий в зависимости от их активности на сайте. В описанном случае действие выдается при нажатии на кнопки.
Раздел включает следующие инструкции:

• Создание интеграции и операций
• Настройка триггеров в GTM
• Настройка тега с трекером Mindbox в GTM
• Настройка тегов для передачи факта нажатий в Mindbox
• Проверка интеграции

Создание интеграции и операций

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

Если на проекте нет нужного шаблона действия, создайте его:

Настройка триггеров в GTM

Для отслеживания нажатий используется встроенное событие Клик. Триггер содержит только это событие:

Настройка тега с трекером Mindbox в GTM

1. Создайте тег с типом Пользовательский HTML.
2. В конфигурацию скопируйте код трекера Mindbox.
3. Триггером укажите системное событие Consent Initialization - All Pages.

Настройка тегов для передачи факта нажатий в Mindbox

Необходимо создать теги для каждой из форм на сайте.

1. Создайте тег с типом Пользовательский HTML.
2. В конфигурацию скопируйте код JavaScript async из созданной операции.
3. Обрамите код тегами <script> и </script>

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

Проверка интеграции

1. Нажмите Предварительный просмотр.
2. В открывшемся окне укажите адрес страницы нужной кнопкой.
3. Нажмите кнопку.
4. Вернитесь на страницу с предварительным просмотром.
   В событии Click в блоке Tags Fired находится настроенный тег для формы.

5. Чтобы увидеть данные, переданные в Mindbox, нажмите блок Tags Fired.

При успешной настройке и привязке DeviceUUID текущего устройства к одной из карточек клиентов у клиента появляется нужное действие.

6. Чтобы запустить передачу данных с публично доступной страницы, опубликуйте контейнер с изменениями.