+38 (044) 39-39-881, +38 (061) 22-80-881 пн-пт 9:00-17:00

  • Укр
    • Eng (в розробці)
    • Rus (в розробці)

+38 (044) 39-39-881, +38 (061) 22-80-881 пн-пт 9:00-17:00

  • Укр
    • Eng (в розробці)
    • Rus (в розробці)

Налаштування відстежування Contact Form 7 через Google Tags Manager (GTM)

Відносно нещодавно, популярний модуль «Contact Form 7» для сайтів на WordPress змінив алгоритми відстежування факту відправлення форм. Раніше це можно було зробити одним рядком запису налаштуванні форм в адмінці сайту. Зараз цей метод не працює. Розробники плагіну пропонують налаштовувати відстежування через зовнішні зміни у коді сайту.

В цій статті ми роздивимося варіант відстеження Contact Form 7 через Custom Event. Чему саме цей метод? - тому що він унікальний. Якщо створити передачу кастомної події, використовуючи DOM events, то на його підставі можна налаштувати будь-який тег. Будь то відстежування цілей Analytics або конверсії Google Ads.

План дій для відстежування Contact Form 7. Що необхідно налаштувати в GTM

Змінна рівня даних
Тригер з типом «модель DOM Готова»
Тег для прослуховування фактичного відправлення формы
Тригер с типом «Custom event (кастомна подія)»
Приклади тегів відстеження для Analytics, Google Ads та Метрики

Змінна рівня даних

Тут все просто. Створюємо нову змінну, присвоюємо їй відповідний тип та ім'я:

Illustration

Тригер з типом «модель DOM готова»

Даний тригер нам потрібен для того, щоб теги спрацьовували тільки після того, як повне DOM дерево сайту прогрузилося і змінна рівня даних встигла отримати потрібне значення.

Illustration

Тег для прослуховування фактичного відправлення формы

Створюємо тег з типом «Custom HTML», тригером для якого буде виступати «модель DOM готова». Вставляємо наступний код:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '45' == event.detail.contactFormId ) {
dataLayer.push({'wpcf7FormID' : event.detail.contactFormId , 'event': 'sent-contact-form'});
}
}, false );
</script>

Скрін тега:

Докладніше про тег:

wpcf7mailsent – це метод обробки форми у випадку успішного відправлення даних. Докладніше - на сайті для розробників Contact Form 7.
45 – це номер форми, який ви можете знайти в адмін-панелі сайту в налаштуваннях форм. Виконується умова: якщо номер форми = «45» і вона заповнена, то відправити подію «sent-contact-form». Якщо форма має інший номер, то подія не спрацює. Якщо у вас декілька форм, то для кожної потрібно створювати окремий тег зі своїм номером та назвою події. В іншому випадку всі форми будуть генерувати одну і ту ж подію.
wpcf7FormID – назва нашої раніше створеної змінної рівня даних.
sent-contact-form – ім'я, яке ми присвоюємо події (ідентифікатор події).

Тригер з кастомною подією (Custom event)

Цей тригер спрацьовує в момент, коли активується подія під час успішного відправлення форми. Для цього прописуємо назву нашої кастомної події, яку ми вказали в тегу прослуховування:

Illustration

В принципі, на цьому можно було б завершувати статтю. Найголовніше - це створення тригеру, який спрацьовує по факту успішного відправлення форми. Активувати цим тригером можна будь-який тег.
Про всяк випадок, розпишу весь процес налаштування до кінця для основних тегів.
Для всіх цих тегів тригером буде виступати кастомна подія.

Відстежування подій Contact Form 7 в Google Analytcis

Створюємо тег з типом Universal Analytics:

Illustration
Категорія – значение которое мы укажем в настройках цели Analytics значення, яке ми вкажемо, налаштовуючи цілі Analytics.
Дія – аналогично
Ідентифікатор відстежування – це ваш лічильник Analytics (у даному прикладі він підставляється через змінну)
Тригер — наша раніше створена кастомна подія

Налаштування цілі в Analytics

Додаємо нову ціль, вибираємо «власна», також вона є «спеціальна ціль».
Тип цілі – «подія»
В «категорію» та «дію» прописуємо ті ж данні, що прописували і в тег GTM для Analytics

Illustration

Відстежування подій Contact Form 7 в Яндекс Метріці

Створюємо тег с типом «Кастомний HTML»:

Illustration

<script>
yaCounterХХХХХХ.reachGoal(‘sent-contact-form’);
</script>

Функія, яка передає подію в Метрику, де:
ХХХХХХ – це номер вашого лічильника
sent-contact-form – назва події (ідентифікатор)

Налаштування цілі в Метріці

Illustration

У якості типу умови вибираємо «JavaScript-подія». Прописуємо ідентифікатор події, такий як і для тегу. Зберігаємо.

Відстежування конверсій Contact Form 7 в Google Ads

Створюємо конверсію в Google Ads:

Переходимо: «налаштування» — «відстежування» — «конверсії»
Створюємо конверсію, даємо їй імя і вписуємо необхідні параметри обліку. Зберігаємо.

В GTM створюємо тег з типом «Відстежування конверсій Google Ads»:

Illustration

Прописуємо ідентифікатор та ярлик конверсії, які вказані в налаштуваннях конверсій Google Ads.
На цьому все. Якщо залишились питання, пишіть в коментарях. Підписуйтесь на наші канали в Telegram та Facebook. Там багато актуального і цікавого!
Зверніть увагу на інші наші статті по темі: «Налаштування показника відмовлень в Analytics через GTM» та «Основні вимоги до сайту перед запуском реклами».

Отримати консультацію

Дякуємо за звернення!

Ми зв'яжемось з Вами у найближчий час

Can't send form.

Please try again later.