Как отслеживать отправку форм Elementor в событиях Google Analytics с помощью JQuery

Как отслеживать отправку форм Elementor в событиях Google Analytics

Последние несколько недель я работал над клиентским сайтом WordPress, который имеет довольно много сложностей. Они используют WordPress с интеграцией в ActiveCampaign для воспитания потенциальных клиентов и Zapier интеграция в Зендеск Продать с помощью Элементарные формы. Это отличная система… запуск капельных кампаний для людей, которые запрашивают информацию, и продвижение потенциальных клиентов к соответствующему торговому представителю по запросу. Я действительно впечатлен гибкостью формы, внешним видом и ощущениями Elementor.

Последним шагом было предоставление клиенту аналитической панели через Google Analytics, которая предоставила им данные о производительности за месяц при отправке форм. У них установлен Диспетчер тегов Google, поэтому мы уже фиксируем транзакции электронной торговли и просмотры YouTube на сайте.

Я сделал несколько попыток использовать DOM, триггеры и события в Диспетчере тегов Google, чтобы зафиксировать успешную отправку формы для Elementor, но мне не повезло. Я протестировал массу различных способов мониторинга страницы, наблюдая за сообщением об успехе, которое появлялось через AJAX, но оно просто не работало. Итак ... Я немного поискал и нашел отличное решение от Tracking Chef под названием Отслеживание форм Bulletproof Elementor с помощью GTM.

Скрипт использует JQuery и Диспетчер тегов Google, чтобы Событие Google Analytics когда форма успешно отправлена. С небольшими правками и одним улучшением синтаксиса у меня было все необходимое. Вот код:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

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

Установить скрипт через пользовательский код Elementor

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

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

Пользовательский код Elementor

  • Перейдите в Elementor> Пользовательский код
  • Назовите свой код
  • Установите местоположение, в данном случае конец тег тела.
  • Установите приоритет, если у вас есть несколько сценариев, которые вы хотите вставить, и установите их порядок.

Отправка формы Elementor на мероприятие GA через GTM

  • Нажмите обновить
  • Вам будет предложено установить условие и просто установить его по умолчанию для всех страниц.
  • Обновите кеш, и ваш скрипт готов!

Предварительный просмотр интеграции с Диспетчером тегов Google

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

Я не собираюсь давать здесь руководство о том, как предварительный просмотр и отладка Диспетчера тегов Google… Я предполагаю, что вы знаете. Я могу отправить свою форму на моей подключенной тестовой странице и увидеть данные, отправленные в данные GTM, как это должно быть:

уровень данных диспетчера тегов Google

В этом случае категория была жестко задана как Форма, целью была форма «Связаться с нами», а метка - «Отправка».

В Диспетчере тегов Google настройте переменные данных, событие, триггер и тег

Последний шаг - настроить Диспетчер тегов Google для сбора этих переменных и отправки их в тег Google Analytics, настроенный для события. Элад Леви подробно описывает эти шаги в своем другом посте - Общее отслеживание событий в Диспетчере тегов Google.

Как только они будут настроены, вы сможете видеть события в Google Analytics!

Получить Elementor Pro

Раскрытие информации: в этой статье я использую свои партнерские ссылки.

6 комментариев

  1. 1
  2. 3

    Я использую многошаговую форму elementor, но я хочу отслеживать событие, когда пользователь нажимает кнопку «Далее».
    Может ты знаешь мне это событие. Спасибо!

  3. 5

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.