Обробка подій DataLayer в Contact Form 7 за допомогою Google Tag Manager

Стаття буде вам корисна, якщо:

ви використовуєте плагін Contact Form 7 на своєму сайті WordPress;
ви хочете налаштувати посилання контактних даних як мету в Google Analytics (або як подію);
у вас на сайті розміщений код відстеження GA за допомогою Google Tag Manager.

Щоб передати дані за допомогою Data Layer, потрібно виконати кілька кроків:

Створіть тег GTM, який передає подія Data Layer під час якого зазначається вдале надсилання форми (і вмикає ідентифікатор форми, якщо необхідно).
Створіть тригер GTM, який шукає подію рівня даних під час посилання форми та запускає другий тег.
Створіть тег GTM, який надсилає події в Google Analytics на основі події Data Layer.
Створіть змінну рівня даних ідентифікатора форми.
Налаштуйте конверсію цілей в Google Analytics на основі події.

Крок 1: Увійдіть в Google Tag Manager та створіть тег №1

Під час натискання кнопки «Відправити» в формі «Contact Form 7» запускається подія посилання форми. На жаль, подія спрацьовує незалежно від того, була форма заповнена правильно чи ні. Тобто воно спрацює, навіть якщо обов’язкові поля не було заповнено.
На щастя, плагін запускає події DOM для кількох різних сценаріїв, а вони вже, в свою чергу, розрізняють успішні форми та неуспішні. Що це означає? Що нам потрібно буде передавати Data Layer тільки в разі успішного відправлення форми на сайті:

wpcf7invalid — запускається, коли повідомлення форми Ajax успішно завершено, але пошта не відправляється, тому що є поля з неприпустимим введенням;
wpcf7spam — запускається, коли повідомлення форми Ajax успішно завершено, але пошта не відправлена, оскільки виявлена можлива активність спаму;
wpcf7mailsent — запускається, коли повідомлення форми Ajax успішно завершено, і пошта відправлена;
wpcf7mailfailed — запускається, коли подача форми Ajax завершена успішно, але вона не вдалася під час посилання пошти;
wpcf7submit — спрацьовує, коли подача форми Ajax успішно завершена, незалежно від інших інцидентів.

Середнє значення ключа: wpcf7mailsent. Як описано, цей тригер спрацьовує, коли форма успішно відправлена. Ми збираємося використовувати Javascript для створення події рівня даних. Увійдіть в систему GTM і виберіть поле «Новий тег» або перейдіть до розділу «Теги» і створіть його. Створіть новий тег GTM (CF7FeedBackSend) з наступною конфігурацією:

Тип тега: Custom HTML

document.addEventListener( 'wpcf7mailsent', function( event ) {

dataLayer.push({

'event' : 'wpcf7successfulsubmit',

'CF7formID' : event.detail.contactFormId

});

}, false );

</script>

Тригер: All pages.
Що тут відбувається: це прослуховування події wpcf7mailsent DOM що запускає подію в шар даних «CF7FeedBackSend». Він також фіксує ідентифікатор форми в коді для Contact Form 7, поміщає його в шар даних (на скріншоті нижче видно, що ідентифікатор форми — «1717»).

Потім ми створимо тригер, який використовує цю подію Data Layer для запуску подій Google Analytics, на яких ґрунтуватиметься конверсія мети.

Крок 2: Створення тригера в GTM

Тут нам потрібно створити новий тригер в Google Tag Manager, я назвав його CF7 Trigger.
Тип тригера: призначена для користувача подія.
Умови активації тригера: всі призначені для користувача події.

Цей тригер використовує для користувача подію Data Layer, яку ми створили на кроці 1, щоб викликати тег події Google Analytics, який ми встановимо на кроці 3.

Крок 3: Створення тега №2

Увійдіть в GTM і виберіть поле «Новий тег». Назвіть новий тег, так, як ви хочете.
Заповніть наступні поля, як такі:

Тип тега: Universal Analytics
Ідентифікатор відстеження: ідентифікатор відстеження Google Analytics. У мене це змінна {{GA Tracking Code}}
Тип треку: Подія

Потім потрібно встановити категорію, дію, ярлик і значення для створюваної події. Якщо ви не знайомі з цими полями, на сторінці довідки Google Analytics для подій є додаткова інформація.

Категорія: ви можете написати будь-яку назву і вона буде зображатися в Google Analytics, коли ви перейдете до звіту про події.
Дія: Знову ж таки, вибір за вами.
Ярлик: Якщо ви хочете відстежувати різні форми окремо, вам потрібно помістити в поле змінну {{CF7-formID}} і уважно слідувати подальшим інструкціям.

Значення додавати не потрібно.

Крок 4: Створіть змінну рівня даних ідентифікатора форми

На кроці 2 ми додали ідентифікатор коду для контактної форми. Коли форма відправляється, ідентифікатори форм додаються в Data Layer, і нам потрібно передавати їх в події Google Analytics.
Додайте нову призначену для користувача змінну під назвою CF7-formID. Задайте наступне ім’я змінної: CF7formID (з урахуванням регістру).

Крок 5: Налаштування конверсії цілі

Перейдіть в Google Analytics, звідти за параметрами Адміністратор> Представлення> Цілі. Натисніть на Створити мету і налаштуйте її як таку:
Налаштування мети: виберіть «Власна»

Опис мети:
Ім’я: Назвіть, як вам подобається.
Тип: виберіть подію.

Інформація про мету:
Категорія: contact-form (або як ви назвали її в GTM)
Дія: successful-form-submit (або як ви назвали в GTM)
Ярлик: виберіть ідентифікатор форми, яку ви хочете відстежувати, наприклад 1717. Якщо ви не хочете відстежувати різні форми окремо, ви можете залишити це поле порожнім.
Значення: тут ви можете додати іншу змінну, наприклад URL сторінки та т. і.

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

Перевірка впровадження Data Layer для Contact Form 7

Для того, щоб перевірити правильність застосування посилання подій в Google Analytics, необхідно протестувати мету. Надішліть тестове повідомлення з вашого сайту, але не забудьте: мета зображатися не буде, якщо у вас встановлений фільтр для ip-адреси відправленого повідомлення.

Перейдіть за наступним шляхом в GA: У режимі реального часу> Конверсія.

Після посилання тестового повідомлення на сайті повинна зобразитися відпрацьована мета Contact Form (або інша задана назва).

Подія передається за допомогою Data Layer тільки в тому випадку, якщо ви використовуєте нову версію плагіна Contact Form і форма відпрацьовується шляхом технології (без перезавантаження сторінки). Якщо при посиланні форми з сайту сторінка перезавантажується, мета відпрацьовуватися не буде.

Як налаштувати Data Layer, використовуючи інші плагіни контактних форм

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

Не пропустіть