Тема 4. Сервіси Google для оптимізації та аналізу сайтів

Google Tag Manager або GTM – безкоштовний сервіс від Google для полегшення роботи з HTML-тегами на сайтах або мобільних додатках. Google Tag Manager – це зручне і, що найголовніше, безкоштовне рішення для керування різними тегами (фрагментами кодів) на вашому сайті. Спочатку цей інструмент був задуманий для керування фрагментами кодів різних аналітичних і рекламних систем, але оскільки інструментарій та можливості у нього дуже широкі, то зараз він використовується і для складніших завдань.

https://tagmanager.google.com/#/container/accounts/6006313379/containers/61496015/workspaces/2

https://developers.google.com/tag-manager/quickstart

https://support.google.com/tagmanager/answer/6103696?hl=ru

Менеджер тегів від Google стане чудовим помічником для тих, хто не має можливості найняти у штат розробника. Для роботи з GTM вам потрібно залучити програміста лише один раз, щоб встановити код менеджера Google на сторінки сайту. Решту роботи ви зможете виконувати самостійно за допомогою готових шаблонів. Які функції виконує GTM?

В чому основні переваги використання Google Tag Manager?

Як відстежити кліки за кнопкою або елементом за допомогою диспетчера тегів? § Дуже часто потрібно передавати дані про кліки за певними елементами на сайті до різних систем аналітики. Нижче ми розберемо, як це зробити на прикладі передачі даних у Google Analytics. Якщо коротко, то алгоритм наступний: § створити тригер, який спрацьовуватиме в момент виконання необхідної дії; § налаштувати тег, який буде передавати інформацію про подію та підключити до неї тригер, створений у попередньому пункті.

Веб-інтерфейс Google Tag Manager досить простий і містить у собі: § Теги – фрагменти коду і не тільки, які ми хочемо активувати на сайті; § Тригери – умови активації тега; § Змінні - можуть використовуватись як у тригерах, так і в тегах. § Сукупність цих компонентів називається контейнером, у кожному з яких є три робочі області, доступні для редагування.

Тег це фрагмент коду, який потрібно виконати. Призначення тегів може бути різним, від передачі даних із сайту в сторонні програми, до зміни форматування стилів на самій сторінці, останнє зустрічається рідше. Якщо сказати просто, то тег, це той фрагмент коду, який вам необхідно було розмістити на вашому сайті без внесення змін до вихідного коду. Тег - це частина JavaScript коду, яка збирає маркетингові дані на сайті та в додатку, а потім пересилає їх на сторонні сервіси, наприклад, Google Analytics, Google Ads, Twitter, Facebook та інші. Тригер – це умова, яка використовується для спрацьовування певного тега. Наведу приклад: під час створення контейнера у вас автоматично створюється тригер "All Pages". Якщо такий тригер підключити до тега, то він (тег) спрацьовуватиме на кожній сторінці вашого сайту із встановленим кодом диспетчера тегів. Наприклад, саме такий триггер потрібен для правильної роботи Google Analytics, встановленої через gtm. Змінна Google Tag Manager - це пара “ключ-значення”. Вони використовуються для зберігання даних, якщо вам доводиться багато разів використовувати те саме значення. Змінні використовуються у двох випадках: для зберігання даних, що використовуються при активації триггерів; для зберігання та передачі даних, що використовуються під час роботи тегів. У багатьох випадках для роботи достатньо активації вбудованих змінних, які постійно оновлюються. Наразі доступні такі категорії: Сторінки, Утиліти, Помилки, Кліки, Форми, Історія, Відео, Прокручування, Видимість.

Тригер - це основна умова спрацьовування тега, без якого він не працюватиме. § Виділяють два види тригерів: § Тригер активації - умова, за якої тег спрацьовує; § Тригер блокування - виняток, при якому тег не працюватиме. § У свою чергу тригери активації поділяються на: § Вбудовані тригери – вже налаштовані та готові до використання; § Користувальницькі тригери - які можна налаштовувати самому. § Наприклад, якщо ти хочеш через GTM додати будь-який код на всі сторінки сайту, то на тег «HTML користувача» ти повісиш тригер на перегляд усіх сторінок. Якщо ж навпаки, тобі потрібен код лише на одній сторінці, то ти налаштуєш його відповідно до URL-сторінки, яка тобі потрібна. Найбільш популярні тригери: Перегляд сторінок - тег спрацьовуватиме на тій сторінці, яку ти задаси; Кліки - тег спрацьовуватиме при кліках на заданий HTML-атрибут або посилання; Подія користувача - один з важливих тригерів, який допомагає налаштувати відстеження необхідних подій на сайті. Нижче наведено список деяких шаблонів тригерів, які за промовчанням надає Google Tag Manager:

Що таке змінні? Змінна є функцією, яку можна викликати всередині іншої змінної, тега або тригера. Вони потрібні для зберігання даних або передачі в тег. § Прикладом даних, що зберігаються, можуть бути: § Об'єкти HTML; § Cookies-сайту; § JavaScript-змінна. § Змінні, як і тригери бувають: § Вбудовані — у вигляді шаблонів і готові до використання; § Користувальницькі – які можна визначити самому. § За замовчуванням GTM доступні не всі змінні, але відсутні можна активувати і вони будуть доступні для подальшого використання.

При роботі з GTM веб-аналітики часто зустрічаються з особливого роду змінної - змінної рівня даних або dataLayer.dataLayer — це назва JS-об'єкта, який служить передачі даних, необхідні роботи GTM, як пар «ключ-значення» всередині нього. Змінна рівня даних дозволяє диспетчеру тегів зчитувати значення налаштованих рівнів даних і передавати їх в теги, тригери і змінні. Сам об'єкт рівня даних є список пар «ключ-значення». Під ключом мається на увазі певна категорія і може бути різні значення. Так, наприклад, можна передавати вибрану мову на сайті або місто, яке вибрав користувач. § В даному випадку код виглядатиме так: § <script> § dataLayer = {'language': 'RU', 'city': 'Москва'}; § </script> § Щоб її встановити, необхідно попросити розробників розмістити змінну рівня даних до оголошення GTM коду на сайті. Для того, щоб звернутися до такої змінної, у GTM є спеціальний тип - Змінна рівня даних.