Как да проследявате изпращането на формуляри за елементи в събития в Google Анализ с помощта на JQuery

Как да проследявате изпращането на формуляри за елементи в събития в Google Анализ

Работя на клиентски WordPress сайт през последните няколко седмици, който има доста сложности. Те използват WordPress с интеграция към ActiveCampaign за подхранване на потенциални клиенти и а Zapier интеграция в Zendesk Продавам от Форми на елементите. Това е страхотна система ... стартиране на капкови кампании за хора, които искат информация, и призоваване на съответния търговски представител. Наистина съм впечатлен от гъвкавостта и външния вид на Elementor.

Последната стъпка беше осигуряването на аналитично табло за управление на клиента чрез Google Analytics, което им осигури ефективност при изпращането на формуляри през месеца. Те имат инсталиран Google Tag Manager, така че вече улавяме транзакциите на електронната търговия и активността при гледане в YouTube на сайта.

Направих няколко опита да използвам DOM, тригери и събития в Google Tag Manager за улавяне на успешното изпращане на формуляр за Elementor, но изобщо нямах късмет. Тествах много различни начини за наблюдение на страницата, наблюдавайки съобщението за успех, което ще се появи чрез AJAX и просто не работи. Така че ... Направих малко търсене и намерих чудесно решение от Tracking Chef, наречено Проследяване на формуляри за бронирани елементи с GTM.

Скриптът използва Jquery и Google Tag Manager, за да натиснете Събитие на Google Анализ когато формулярът е изпратен успешно. С някои малки редакции и едно подобрение на синтаксиса имах всичко необходимо. Ето кода:

<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 за всички ваши клиенти. Това е солидна платформа и броят на партньорските интеграции продължава да нараства. Свържете го с плъгин като Формуляр за контакт DB и можете също да съберете всичките си подадени формуляри.

Elementor Pro има чудесна вградена опция за управление на скриптове. Ето как можете да въведете кода си:

Персонализиран код на Elementor

  • Отидете до Елемент> Персонализиран код
  • Дайте име на кода си
  • Задайте местоположението, в този случай края етикет на тялото.
  • Задайте приоритет, ако имате повече от един скрипт, който искате да вмъкнете, и задайте реда им.

Изпращане на формуляр Elementor до GA Event чрез GTM

  • Щракнете върху актуализация
  • Ще бъдете помолени да зададете условието и просто да го зададете по подразбиране за всички страници.
  • Опреснете кеша и скриптът ви е на живо!

Визуализирайте интеграцията на Google Tag Manager

Google Tag Manager има фантастичен механизъм за свързване към екземпляр на браузъра и действително тестване на кода ви, за да наблюдава дали променливите се изпращат правилно или не. Това е от съществено значение, тъй като Google Analytics не е в реално време. Можете да тествате, да тествате и да тествате и наистина да се разочаровате, че данните не се показват в Google Analytics, ако не сте осъзнали това.

Няма да давам урок как да го направя визуализация и отстраняване на грешки в Google Tag Manager... Предполагам, че знаете. Мога да изпратя формуляра на свързаната си тестова страница и да видя данните, изпратени към данните на GTM, както е необходимо:

слой данни на мениджър на маркери на Google

В този случай категорията беше твърдо кодирана като формуляр, целта беше формулярът за връзка с нас, а етикетът е подаване.

В Google Tag Manager настройте променливи на данни, събития, тригери и маркери

Последната стъпка от това е да настроите Google Tag Manager да улавя тези променливи и да ги изпраща до маркер на Google Analytics, настроен за събитие. Елад Леви подробно описва тези стъпки в другата си публикация - Общо проследяване на събития в Google Tag Manager.

След като те бъдат настроени, ще можете да видите Събития в Google Анализ!

Вземете Elementor Pro

Разкриване: Използвам партньорски връзки в тази статия.

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.