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

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

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

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

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

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

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

Створюємо тег з типом «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>

Скрін тега:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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