Трекінг конверсій після успішної відправки AJAX-форми заявки через Google Tag Manager (GTM)

Введення або постановка проблеми
Описане рішення відмінно підійде маркетинговим агентствам не мають можливості керувати розробкою замовника і нужденним в налаштуванні трекінгу конверсій.
Дуже часто буває так, що розробники веб-сайтів та інтернет-магазинів використовують АЈАХ-верфикацию полів форми до її остаточної відправки на сервер і при цьому Thank You Page відсутня як така і не має окремого URL для ідентифікації моменту успішної відправки форми інструментами веб-аналітики (Google Analytics, Яндекс Метрикою).
Деякі веб-аналітики не хочуть зайвий раз напружуватися (або просто не можуть) і налаштовують відправлення кодів конверсій на клік по кнопці «Відправити», але ми ж з вами розуміємо, що цей шлях веде до завищення кількості конверсій та перекручення даних про результати маркетингових рекламних кампаній (РК) Яндекс Директ, Google Adwords та інших представників рекламних майданчиків. Спотворення відбудеться кожен раз, коли користувач забуде ввести або введе в неправильному форматі email або номер телефону і натисне на кнопку «Відправити». При цьому конверсія буде зарахована, а заявка фактично не відправиться.
image

Успішна відправка форми для користувача ознаменується появою спливаючого модального вікна, яке спливе завдяки модифікації CSS класу (атрибут class) div а цього модального вікна, що зачаївся в коді сторінки.
image

Варто так само відзначити, що шлях розміщення коду конверсії, лежить через зміну коду шаблону CMS (Content Management System: Бітрікс, OpenCart, Wordpress та інших представників веб-фауни), може виявитися нітрохи не простіше параметри тега Google Tag Manager'a, чим ми і збираємося зайнятися в даній статті. Даний факт підкріплюється ще й тим обставиною, що на сьогоднішній день дуже популярні різні конструктори сайтів та посадкових сторінок (таких як UKit, Wix, Flexbe), які використовують власний набір JS бібліотек для контролів недоступних для редагування простим смертним користувачам.
Пропоноване рішення
Що ж робити аналітикам? Спроба зловити стандартне JavaScript подія onSubmit форми не дозволить коректно ідентифікувати момент успішної відправки форми. Ми підемо іншим шляхом і спробуємо зловити потрібний момент шляхом відстеження мутацій коду і піймавши момент показу форми зворотного зв'язку відправимо відповідна подія в Google Tag Manager.
З вашого дозволу момент створення GTM контейнера і налаштування базових тегів веб-аналітики-ми пропустимо і перейдемо відразу до конфігурації необхідного тега.
Отже, для початку розберемося, яка саме відбувається мутація при успішну відправку форми заявки. Для цього викличемо Chrome Developer Tool і розглянемо код модального вікна успішної відправки форми.

image

Звернувши увагу на CSS клас div " а «m_modal m_65730_done show» можна здогадатися, що добавка show з'являється після успішної відправки форми.
image

Перевірити це можна закривши модальний і знайшовши в коді div по класу «m_65730_done».

image

Далі ми підготуємося і встановимо суб'єкт мутації використовуючи JQuery запит: В нашому випадку це буде $('div[data-id=«65730_done»]').
Що ж далі? Тепер нам знадобиться невелике підмога у вигляді спеціальної JavaScript функції, яка дозволить нам прикріпити спостерігачів за змінами DOM інтерфейсом MutationObserver.
Слід обмовитися, що MutationObserver підтримується не всіма існуючими браузерами. Інтерфейс MutationObserver підтримується в Opera 15+, Firefox 14+ Chrome і 26+. Його також буде підтримувати Internet Explorer 11 і Safari 6.1. Safari 6.0 і Chrome 18-25 підтримують MutationObserver, але з WebKit-префіксом (WebKitMutationObserver).
Більш детальну інформацію про MutationObserver Ви можете знайти на тут.
Виглядає наша функція наступним чином:
$(function() {
(function($) {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

$.fn.attrchange = function(callback) {
if (MutationObserver) {
var options = {
subtree: false,
attributes: true
};

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(e) {
callback.call(e.target, e.attributeName);
});
});

return this.each(function() {
observer.observe(this, options);
});

}
}
})(jQuery);

Чудово, тепер нам залишилося прикріпити attrchange до цільового div, при цьому перевіряючи, що мутація привела до відкриття вікна, а не його закриття:
$('div[data-id="65730_done"]').attrchange(function(attrName) {
if(attrName=='class')
if ($('.m_65730_done.show').length >0) {dataLayer.push({'event': 'POPROBOVAT_BESPLATNO_ZAYAVKA'}); if (testMode) console.log('65730 POPROBOVAT_BESPLATNO_ZAYAVKA');}

Створимо HTML-тег в Google Tag Manager і опублікуємо.

Повний код тега:

<script>
var testMode=true;

$(function() {
(function($) {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

$.fn.attrchange = function(callback) {
if (MutationObserver) {
var options = {
subtree: false,
attributes: true
};

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(e) {
callback.call(e.target, e.attributeName);
});
});

return this.each(function() {
observer.observe(this, options);
});

}
}
})(jQuery);

// Заявка "Спробувати безкоштовно"
$('div[data-id="65730_done"]').attrchange(function(attrName) {
if(attrName=='class')
if ($('.m_65730_done.show').length >0) {dataLayer.push({'event': 'POPROBOVAT_BESPLATNO_ZAYAVKA'}); if (testMode) console.log('65730 POPROBOVAT_BESPLATNO_ZAYAVKA');}

});
</script>

У цьому прикладі ми відправляємо подія в dataLayer, яке надалі обробляємо окремим HTML-тегів в GTM, що викликає в свою чергу коди відправки переходів Google Analytics і Yandex Metrika.
<script>
var str = '{{Event}}';
if (str.indexOf('ZAYAVKA')>0) ga('send', 'event', 'form', 'send', str); else ga('send', 'event', 'button', 'click', str);
yaCounter12345678.reachGoal(str);
</script>

Ура, проблема вирішена! Тепер ми виконуємо код трекінгу конверсії тільки після того, як конверсія дійсно відбулася і отримуємо більш точна кількість конверсій у порівнянні з кількістю натискань на кнопку «Відправити».
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.