Кейс: Налаштування відстежень через GTM з використанням Java Script

01. Вступ/Огляд проєкту

Клієнт - мережа закладів харчування, яка надає можливість орендувати залу в одному з своїх закладів для проведення подій різного формату - корпоративів, днів народжень, весіль, тематичних заходів. 

Клієнтом був створений односторінковий сайт. На ньому реалізовані фото закладу, опис доступних для відвідувачів опцій, меню, додана можливість переглянути розташування закладів на мапі, можливість подзвонити, заповнити форму для зворотнього зв’язку, додано колтрекінг Binotel та кнопки соцмереж.

02. Визначення викликів

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

03. Стратегія

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

04. Реалізація

При налаштуванні відстеження частини потрібних подій: перегляд меню, мапи, кліків по номеру телефону, було достатньо скористатись тригером типу Click URL. Аналогічно не викликало труднощів налаштувати взаємодію з колтрекінгом за допомогою тригеру типу Custom Event. Але відстеження відправки форми заявки виявилось більш складним.

Форма на сайті реалізована за допомогою технології Ajax. Тож ми не могли використовувати найочевидніше рішення - базовий тригер відправки форми. Також не існувало події, яку ми могли відловлювати тригером типу Custom Event і не було можливості запушити її за допомогою розробника. Варіант з відстеженням відображення на екрані повідомлення про успішну відправку в нашому випадку теж не підходив, оскільки не було можливості його реалізувати через особливості верстки: елемент css, на який ми могли націлитись, не існував у вигляді контенту на сайті, а генерувався динамічно після успішної відправки форми.

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

А питання відстеження відправки корректно заповненої форми ми вирішили за допомогою JavaScript коду та кастомного тегу HTML, код якого отримував відповідь від серверу про успішну відправку форми та пушив відповідну подію в DataLayer. Зробивши це, ми отримали можливість скористатись тригером типу Custom Event та передавати подію в аналітику.  

05. Результати

В результаті виконаних дій, ми коректно налаштували відстеження:

06. Висновки/Навчання

GTM - дуже потужний інструмент, який дозволяє:

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

GTM дозволяє встановлювати веб-аналітику, рекламні теги, електронну комерцію та багато іншого. Використовуючи GTM можливо налаштовувати відстеження якщо не за допомогою базових тегів та тригерів, то за допомогою Java Script навіть у складних випадках, коли немає можливості залучити до реалізації відстеження розробників.