Отслеживание отправки WPForms через GTM

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

Для этого нам потребуется:

1. Создаём тег прослушки отправки формы WPForm;
2. Создаем триггер, который срабатывает при наступлении специального события;
3. Отправляем данные в системы аналитики.

Создаем тег для прослушки форм

Тег будет со следующими параметрами:

• Название тега — произвольное;
• Тип тега — пользовательский html;
• Триггер — all pages;
• Код для вставки приведен ниже.

<script>
  var elementsArray = document.querySelectorAll('[id^="wpforms-form-"]');
  elementsArray.forEach(function(elem) {
    elem.addEventListener("submit", function(e) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: "wpFormSubmit",
        wpFormElement: event.target
      });
    });
  });
</script>

В GTM это будет выглядеть так:

Строчка wpFormElement: event.target нужна только, если вы будете доставать из формы значения полей или идентификатор формы через JS код. Я этого делать в моем примере не буду, т.к. мне достаточно встроенной переменной form id, но для примера приведу код для переменной вида «Пользовательский JS» ниже:

function() {
  var wpFormId = {{wpFormElement}}.id;
  return wpFormId ? wpFormId : undefined;
}

Обратите внимание, что оборачивать функцию в <script></script> не требуется. Вы просто создаете две переменных:

• переменную уровня данных с именем wpFormElement, из которой будут извлекаться данные;
• переменную типа «Собственный JS» c кодом, приведенным выше, который и будет извлекать данные из первой переменной.

Вместо {{wpFormElement}}.id вы можете использовать точечную нотацию для извлечения других элементов формы, помимо id, например:

• значение полей формы — {{wpFormElement}}..elements.item(0);
• действие — {{wpFormElement}}.action.

Закончили лирическое отступление и возвращаемся к основной теме.

Создаем триггер

Наш тег отправляет на уровень данных специальное событие wpFormSubmit. Нам нужно создать триггер со следующими параметрами:

• Имя — произвольное;
• Тип триггера — «Специальное событие»;
• Имя события — wpFormSubmit.

Выглядит это примерно так:

Отправка данных в аналитику

Следующим шагом создадим еще один тег для отправки данных в аналитические системы. Я в качестве примера приведу отправку в Google Analytics 4, но по аналогии можно отправить дынные в UA или Метрику.

Параметры тега:

• Название — произвольное;
• Тип тега — Google Analytics Событие GA4;
• Тег конфигурации — ваш тег настроек GA4;
• Название события — generate_lead (можно произвольно, но лучше использовать такое же название как у меня);
• Параметры события — как минимум нужно передать {{Form ID}}. Все передаваемые мной параметры на скриншоте ниже;
• Триггер активации тега — созданный на предыдущем шаге триггер.

Если статья была полезна, подпишитесь на канал в telegram. Туда 1-2 раза в месяц я отправляю уведомления о выходе новых статей. Чаще не получается, т.к. я не теоретик, а практикующий специалист. Если есть идеи по поводу новых статей, не стесняйтесь писать их ниже в комментариях. Я все читаю.