Модуль “WEB-

аналітика”

частина ІV
Стань “розробником”
разом з GTM

Genius Academy by Genius.Space

 Частина ІV
Стань “розробником”
разом з GTM
1. Що це таке?
2. Теги / Тригери / Змінні
3. Огляд можливостей GTM.
4. Налаштування і перевірка.
5. Корисні розширення для легкої роботи.

Genius Academy by Genius.Space

 Хто ви?

Маленький Великий
сайт маркетплейс

1. У вас немає штатного 1. У вас окрема команда

розробника розробників
2. Вам потрібно знайти і 2. Всі вони зазвичай
залучити фахівця на зайняті іншими
аутсорсі завданнями
3. Потрібно чекати 3. Потрібно чекати

Проблема єдина
Потрібно оперативно зробити налаштування

Genius Academy by Genius.Space

 Рішення теж єдине для всіх

Google Tag Manager (GTM) - це безкоштовний сервіс від Google, який

спрощує роботу зі сторонніми кодами і тегами на сайтах або в мобільних
додатках. За допомогою нього ви може виконувати різноманітні
налаштування без змін основного коду сайту.

Genius Academy by Genius.Space

 Що вміє GTM?

1. швидко підключити сервіси аналітики такі, як Google Analytics;

2. просто встановити коди для збору даних Facebook, LinkedIn,
Pinterest, Twitter тощо;
3. коректно передавати конверсії в Google Ads та інші рекламні
мережі;
4. власноруч налаштувати відправку даних для ремаркетингу в
Google чи Facebook Ads;
5. легко відстежувати будь-які взаємодії користувача з сайтом та
надсилати в потрібний сервіс аналітики;
6. налаштувати відправку даних для звітів Enhanced Ecommerce;
7. встановити коллтрекінг, чат-бот чи JavaScript код іншого
стороннього сервісу на сайт за пару кліків;
8. налаштувати коректне міждоменне відстеження;
9. проводити А/В тести з використанням Google Optimize;
10. швидко вносити зміни в будь-які існуючі налаштування;

Genius Academy by Genius.Space

 Переваги використання GTM

1. не залежите від розробників (вони повинні встановити лише сам код GTM* на сайт);
2. просто встановити та використовувати;
3. відсутня можливість пошкодити код сайту та його роботу, адже налаштування відбуваються в інтерфейсі GTM;
4. існують версії, що дозволяє “відкотити зміни”;
5. не впливає на швидкість роботи сайту, бо завантажується асинхронно;
6. дає можливість швидко виконати налаштування та перевірити їх коректність в режимі реального часу;
7. є можливість працювати декільком людям незалежно один від одного;
8. має зручний та зрозумілий інтерфейс;
9. велика кількість матеріалів у відкритому доступі, що дозволяє освоїти сервіс самостійно;

Genius Academy by Genius.Space

 Чи все так ідеально?

Глобально: Якщо уточнювати:

Так
1. Важко використовувати з деякими
конструкторами сайтів
2. Потрібен періодичний контроль налаштувань

Genius Academy by Genius.Space

Початок роботи
з GTM

Genius Academy by Genius.Space

 Старт

Перш за все необхідно зайти на сайт

tagmanager.google.com
та створити обліковий запис:
вказати сайт / назву додатка
обрати варіант для якої саме
платформи вам потрібен GTM (сайт,
додаток, АМР чи сервер)

Після цього у вас буде автоматично

створено акаунт та контейнер.

Genius Academy by Genius.Space

 Після цього вам покаже код.
Саме його необхідно передати розробникам,
вставити безпосередньо на сайт

Genius Academy by Genius.Space

 Структура акаунту

1. Акаунт та контейнер — це змістовно аналоги акаунту та

ресурсу в Google Analytics. Їх створюють один або
декілька залежно від потреб бізнесу.
2. Тег — “скрипт/код”, який відправляє дані про дію
користувача на сайті у відповідну систему аналітики.
3. Тригер / Активатор — умова, за якої спрацьовує тег,
наприклад клік на кнопку.
4. Змінна — параметр, який за конкретних умов отримує
певне значення, наприклад текст кнопки “Додати в
кошик”

Genius Academy by Genius.Space

 Для чого потрібні теги?

Їхнє завдання: зібрати інформацію про те, куди ходять

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

Існує 3 групи тегів:

● Рекомендовані (GA)
● Користувацькі (Custom HTML - наприклад Facebook)
● Колекція шаблонів (окремі рішення, прописані
користувачами — наприклад Twitter)

Genius Academy by Genius.Space

Які існують тригери і для чого вони?

Перегляд сторінки — це група взаємодій зі сторінкою

(кожна сторінка має декілька рівнів завантаження, і
можна відслідкувати будь-який з них)
Клік — це взаємодія з елементом на сайті при кліку на
нього.
Взаємодія користувача — дії відмінні від кліку, які
можуть бути виконані користувачем на сторінці
(перегляд елементу, відео, скрол, відправка форми).
Інше — це всі інші взаємодії, які не можна відстежити
попередніми тригерами. (наприклад, події які
налаштовані в коді сайті, а через GTM ми маємо лише
перенаправити їх в GA чи іншу систему)

Genius Academy by Genius.Space

 Які існують змінні?

1. Вбудовані — стандартні та доступні

всім. Мають окремі групи змінних для
відстежень взаємодій з відео та
формами, скролом сторінки, кліками по
елементах тощо. Раджу активувати
одразу змінні основних груп, щоб потім
не шукати в чому проблема
конкретних налаштувань.
2. Користувацькі — створені під потреби
проєкту (наприклад, зрозуміла назва
Форми, визначення типу сторінки,
ідентифікатор аналітики тощо).

Genius Academy by Genius.Space

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

Genius Academy by Genius.Space

 Виконуємо базові налаштування
для відслідковування в Google Analytics 4

1. Створюємо тег відповідного типу

(Google Tag).
2. Додаємо тригер
на перегляд сторінок.
3. Вказуємо ідентифікатор GA4.
4. Зберігаємо тег

Genius Academy by Genius.Space

 Приклад налаштування івенту GA4
для відслідковування скролу сторінки

1. Створюємо тег відповідного типу (GA4 подія).

2. Створюємо і зберігаємо тригер на скрол,
вказавши відсотки при яких він буде
активувати тег, або обираємо серед
створених раніше.
3. Вказуємо ідентифікатор аналітики.
4. Вказуємо назву івенту (назва не повинна
містити спеціальних символів).
5. Створюємо додатковий параметр для
отримання даних по глибині скролу.
6. Зберігаємо тег.

Genius Academy by Genius.Space

 Створення власних параметрів в GA4
для відображення у звітах

1. Переходимо у відповідний розділ

налаштувань GA4.
2. Створюємо спеціальний параметр
вказавши назву, яку ми раніше
використали в GTM.
3. Вказуємо область дії.
4. Зберігаємо.

Genius Academy by Genius.Space

 Конверсії в GA4 (1)

Будь-яку подію можна перетворити на конверсію в один клік.

Genius Academy by Genius.Space

 Конверсії в GA4 (2)

Якщо потрібно налаштувати

конверсію на подію, яка
відбувається за різних умов
(наприклад, ми створили один тег
на скрол і передаємо динамічний
параметр глибини скролу, але
конверсією будемо вважати лише
прокрутку на 80%).

В такому випадку, ми можемо

створити окрему подію на основі
вже існуючої, просто вказавши
необхідні параметри в інтерфейсі
GA4

Genius Academy by Genius.Space

Перевірка коректності і
публікація налаштувань

Genius Academy by Genius.Space

Для перевірки налаштувань потрібно
перейти до режиму “Попередній
перегляд”.

На наступному кроці вставити

посилання на сторінку, де необхідно
перевірити налаштування.

Genius Academy by Genius.Space

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

Вкладка GTM-0123456 показує всі теги

які спрацювали на сторінці.
Для подій GA4 існує окрема вкладка,
що дозволяє відфільтрувати інші теги
(наприклад, теги Facebook і тд.)

Genius Academy by Genius.Space

 Режим Debug View GA4

В інтерфейсі GA створили окремий звіт, який дозволяє бачити лише тестові дані, щоб
перевірити коректність налаштувань, що значно спрощує роботу оскільки не потрібно
виокремлювати себе в звітах Real Time як це було в попередній версії.

Genius Academy by Genius.Space

 Публікація налаштувань

Після перевірки коректності роботи тегів/подій

всі внесені в GTM зміни потрібно опублікувати, інакше дані збиратись не почнуть.

Для цього натискаємо відповідну кнопку,

можна також вказати, які саме налаштування виконувались.

Genius Academy by Genius.Space

Події для відслідковування кліків на сайті
ми детально розберемо на Воркшопі

Genius Academy by Genius.Space

 Якщо вам здалось, що це важко,...

…то вам не здалось, бо це найскладніша тема модуля

Genius Academy by Genius.Space

Як полегшити роботу?

Genius Academy by Genius.Space

 Корисні розширення

Для роботи з GTM: Інші:

1. Tag Assistant 1. Facebook Pixel Helper

2. dataLayer Inspector+ 2. UET Tag Helper (Bing Ads)
3. GTM Copy/Paste 3. Datalayer Checker
4. Da Vinci Tools 4. Wappalyzer
5. SEO Meta in 1 Click
6. Redirect Path

Genius Academy by Genius.Space

Якщо виникнуть
питання?

t.me/kateryna_tserkovna

linkedin.com/in/kateryna-tserkovna/

Genius Academy by Genius.Space