Сьогодні ми поговоримо про те, як швидко і легко налаштувати цілі на кнопки для відстеження дій відвідувачів через Google Tag Manager. Напевно, кожен з нас стикався з ситуацією, коли внаслідок якихось чергових змін в коді сайту, наші цілі злітали і відстеження припинялося. Для того, щоб в майбутньому уникнути таких ситуаціях, ви самостійно (без допомоги програмістів) можете встановити цілі, які будуть безвідмовно працювати, поки ви самі це не зупините.
До основних переваг Google Tag Manager відносяться:
Таким чином, на кожній сторінці сайту є контейнер, всередині якого містяться теги, які виконуються при виконанні певних правил. У свою чергу, макроси потрібні для налаштування цих правил і тегів.
Нижче наведена покрокова інструкція того, як почати працювати з Google Tag Manager.
Крок 1. Створюємо контейнер
Після натискання кнопки виникне спливаюче вікно, в которомнужно натиснути кнопку прийняття умов угоди:
Після прийняття угоди буде сформований контейнер (фрагмент js-коду), який необхідно розмістити на всіх сторінках сайту відразу ж після відкривається тега body.
N.B. Контейнер необхідно розміщувати відразу після відкриття тега body. В іншому випадку, всі методи і дані, розташовані вище контейнера, просто не будуть працювати.
До того ж, варто пам'ятати, що для основного домену та піддоменів сайту краще використовувати різні контейнери.
Крок 2. Додаємо тег Google Analytics
У вікні настройки тега вводимо відповідні дані:
- ім'я та тип тега
- ідентифікатор веб-ресурсу
- тип відстеження
Після введення типу відстеження необхідно додати правило активації тега, без якого робота тега просто неможлива. У правому верхньому блоці натискаємо кнопку «додати правило», де ставимо галочку навпроти умови «всі сторінки сайту», так як ми хочемо, щоб код відстеження спрацьовував на всіх сторінках сайту.
Крок 3. Налаштовуємо макрос
Після настройки тега, приступаємо до налаштування макросу для відстеження події для форми «Зворотній зв'язок». Для цього нам треба створити три макросу (eventCategory, eventAction, eventLabel), на основі яких буде сформований тег відстеження події.
Створюємо макрос GA Event_action. Вказуємо ім'я, тип макроса, вказуємо змінну рівня даних і вибираємо версію рівня даних. Після натискаємо кнопку «Зберегти».
Аналогічним чином створюємо макроси GA Event_category, GA Event_label.
Крок 4. Створюємо тег
По закінченню створення трьох макросів приступаємо до створення тега:
Вказуємо ім'я, тип тега, ідентифікатор відстеження Google Analytics, тип відстеження, заповнюємо параметри події (раніше створені три макросу).
Крок 5. Створюємо правило активації події
Потім приступаємо до створення правила активації події. Для цього у верхній бічній частині екрану натискаємо кнопку «Створити». У вікні вказуємо ім'я правила і умова його виконання.
Принцип роботи відстеження подій за допомогою Google Tag Manager
Зазвичай для відстеження подій через Google Analytics ми використовуємо фрагмент коду (наведений нижче), який ми безпосередньо додаємо в код сторінки для певної кнопки:
Так як код відстеження події ми не будемо впроваджувати безпосередньо в код сторінки, то б удемо робити прив'язку дії при натисканні з використанням jQuery і підключенням через Google Tag Manager наступним чином:
1. Створюємо новий тег
2. Додаємо в поле HTML наступний код:
$ (Document) .ready (function ()<$('селектор нужного объекта').click(function()
3. Після створення тега, переходимо до створення цілі в Google Analytics, де вказуємо значення для кожної змінної:
4. Після цього, зазначені нами значення, включаємо в метод dataLayer.push ():
Як бачите, налаштувати цілі за допомогою Google Tag Manager не складно. Виконавши всі вищевказані рекомендації, ви зможете з легкістю налаштувати всі ваші події і спостерігати за поведінкою відвідувачів на вашому сайті, без допомоги сторонніх осіб.