Як відстежувати подання форм -елементів у подіях Google Analytics за допомогою JQuery

Як відстежувати подання форм Elementor у подіях Google Analytics

Останні кілька тижнів я працюю над клієнтським сайтом WordPress, який має досить багато складнощів. Вони використовують WordPress з інтеграцією до ActiveCampaign для виховання потенційних клієнтів та а Zapier інтеграція до Zendesk Продам через Форми Elementor. Це чудова система ... розпочинає крапельні кампанії для людей, які запитують інформацію, і просять провідника до відповідного торгового представника за запитом. Я дійсно вражений гнучкістю форми та виглядом Elementor.

Останнім кроком було надання інформаційної панелі аналітики для клієнта за допомогою Google Analytics, яка забезпечила їм ефективність надсилання форм за місяць. У них встановлено Менеджер тегів Google, тому ми вже фіксуємо транзакції електронної комерції та активність перегляду YouTube на сайті.

Я зробив кілька спроб використовувати DOM, тригери та події в Менеджері тегів Google для зйомки успішної подачі форми для Elementor, але мені не пощастило. Я випробував безліч різних способів моніторингу сторінки, стежачи за повідомленням про успіх, яке спливає через AJAX, і воно просто не працює. Отже… Я трохи пошукав і знайшов відмінне рішення від Tracking Chef, яке називається Відстеження форми куленепроникних елементів за допомогою 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 для всіх ваших клієнтів. Це міцна платформа, і кількість інтеграцій партнерів продовжує зростати. З’єднайте його з подібним плагіном Контактна форма БД і ви також можете зібрати всі свої подані форми.

Elementor Pro має чудову опцію управління сценаріями. Ось як ви можете ввести свій код:

Спеціальний код 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

    Я використовую кілька кроків у формі елементів або, але я хочу відстежувати подію, коли користувач натискає кнопку «Далі».
    Чи можете ви знати мені цю подію. Спасибі!

  3. 5

Що ви думаєте?

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.