Google Tag Manager один із тих інструментів, які можуть зробити ваше життя простіше, ефективніше, а в деяких випадках ще й принести додатковий прибуток.
“Навіщо ти мучишся з цими кодами відстеження, пишеш величезні ТЗ та чекаєш, коли програміст їх запровадить? Використовуй Google Tag Manager і твоє життя буде простіше. – Таку фразу в якийсь момент чули багато маркетологів, які зараз використовують цей інструмент на благо свого бізнесу.
Вам знайома така ситуація: потрібно поставити на сайт код відстеження, ви пишете ТЗ програмісту і чекаєте… чекаєте… чекаєте…? 
Якщо так, тоді ця стаття для вас 😉
Google Tag Manager (відомий також як GTM) – це зручна і, що не менш важливо, безкоштовна система керування скриптами (тегами), яка дозволяє вам встановлювати різні корисні фрагменти кодів безпосередньо на ваш сайт. GTM включає десятки зумовлених шаблонів тегів, що не вимагають користувальницького кодування. Нижче ми розберемо основи роботи з цим інструментом:
- Чому варто використовувати Google Tag Manager
- Реєстрація облікового запису
- Встановлення диспетчера тегів на сайт
- Теги, що це таке і навіщо вони потрібні
- Робота з тригерами в GTM
- Змінні в диспетчері тегів Google
Чому варто використовувати Google Tag Manager
Одна з основних причин використання полягає в тому, що вам більше не потрібно покладатися на вашого розробника (який дуже часто навіть не ваш, а на аутсорсі) і чекати, коли він встановить потрібні вам коди на сайт. За допомогою диспетчера тегів ви можете зробити це самостійно без особливих знань програмування. Іншими словами, встановивши на своєму веб-сайті скрипт GTM, ви зможете швидко встановити інші теги Google, такі як Google Analytics або сторонні скрипти/пікселі, наприклад, Facebook Pixel всього в кілька кліків.
Це особливо корисно, якщо вам подобається тестувати та шукати нові шляхи підвищення конверсії на вашому сайті. Наприклад, якщо вам цікаво дізнатися, як користувачі взаємодіють з вашим сайтом, ви можете використовувати Google Tag Manager для встановлення коду Hotjar без залучення розробника.
Додаткові переваги використання диспетчера тегів включають швидкіший час завантаження сайту, більш точну аналітику та багато іншого.
Реєстрація облікового запису в диспетчері тегів Google
Щоб створити обліковий запис потрібно зробити всього кілька простих дій:
- Перейти на офіційий сайт Google Tag Managerи вибрати пункт Реєстрація;
- Залогінитись у свій обліковий запис Google або, якщо такого немає, створити її;
- Ввести дані облікового запису:
- У полі Назва облікового запису вводимо назву вашої компанії;
- Вибираємо країну, де працює компанія;
- Галочку в цьому пункті ставимо залежно від бажання та доброти душевної.
- Заповнити дані для створення контейнера:
- Вказуємо назву ресурсу, для якого реєструємо обліковий запис. Найчастіше це адреса вашого сайту;
- Вибираємо де використовуватиметься контейнер. Зазвичай диспетчер тегів використовують для веб-сайтів та AMP сторінок;
- І не забуваємо натиснути кнопку “Створити”.
- Залишилося ухвалити угоди про умови використання і можна приступати до встановлення на сайт.
Встановлення диспетчера тегів на сайт
Перш ніж розпочати роботу з Google Tag Manager, вам потрібно встановити його на сайт. І тут є кілька варіацій:
- зробити це самостійно. Найшвидший спосіб, але потребує певних навичок програмування;
- використовувати різні плагіни CMS вашого сайту для встановлення GTM – Навичок програмування не вимагає, але потрібно витратити час на пошук відповідного плагіна. Плюс завжди є ймовірність, що при установці в такий спосіб код спрацьовуватиме не на всіх сторінках сайту, або виникнуть інші помилки. Найчастіше це найоптимальніший, хоч і найпростіший спосіб;
- написати ТЗ програмісту та дочекатися його впровадження. Чому б востаннє не скористатися його послугами 🙂 Це найоптимальніший спосіб, та й часу він займає дуже мало.
Написання ТЗ програмісту
Наприкінці, коли ви створили контейнер, ви мали побачити наступне вікно:
Саме в ньому описано все, що потрібно зробити вашому програмісту для встановлення. Просто беремо та копіюємо інформацію з цього вікна у файл і відправляємо в роботу.
Якщо раптом ви закрили це вікно, то знайти інструкцію можна просто натиснувши на ідентифікатор контейнера вгорі меню.
Перевірка коректності встановлення GTM на сайті
Звичайно, написати ТЗ це ще лише півсправи. Потрібно переконатися у правильності встановлення кодів. Тут, як у Матриці – два варіанти:
- Перейти у вихідний код сайту і подивитися чи правильно:
- Використати розширення Google Tag Assistant. Це дозволяє побачити всі коди відстеження компанії Google, які стоять на сайті, а також підказує, якщо один з них встановлено неправильно. Наприклад, на скріншоті нижче бачимо, що диспетчер тегів з ідентифікатором GTM-NS4QQ3P встановлено некоректно, про що свідчить червона піктограма біля нього.
Щоб детальніше дізнатися про помилку, необхідно натиснути на виділений блок. Тепер ми бачимо більше інформації щодо нашого тегу. Знизу в окремому блоці Where to optimize відображається інформація, з чим пов’язана помилка. У разі ми бачимо, що код відповіді HTTP – Status 404. Ця помилка пов’язана з тим, що наш контейнер є порожнім і в ньому не опубліковано жодних налаштувань. Якщо інформації про помилку в блоці Where to optimize вам недостатньо, можна натиснути на знак “?” і отримати ще детальніший опис помилки.
Тепер, GTM на нашому сайті встановлений, час перейти до знайомства з основними сутностями, з якими нам доведеться працювати.
Теги в Google Tag Manager, що це таке і навіщо вони потрібні
Оскільки ми з вами вивчаємо інструмент для керування тегами, то логічно розпочати наше знайомство саме з цієї сутності.
Тег – це фрагмент коду, який ви розміщуєте на своєму сайті. Ви можете використовувати як вбудовані шаблони для налаштування тегів, наприклад для Google Analytics або Hotjar, або ж додавати фрагменти користувача за допомогою тегів типу Користувальницький HTML і Користувальне зображення.
Іншими словами, якщо ви хочете додати на сайт якийсь код відстеження, то для цього вам необхідно створити тег із певними налаштуваннями. Наприклад, для встановлення коду Google Analytics за допомогою GTM потрібно створити наступний тег:
Більше детально почитати про теги ви можете у статті Теги в Google Tag Manager. Керівництво для новачків і не лише.
Робота з тригерами в GTM
При створенні тега, крім блоку конфігурації тега, є ще другий блок, який називається тригери.
Тригер – це умова, коли тег (фрагмент коду) має спрацювати. Наприклад, якщо ми хочемо встановити код Google Analytics, то згідно з інструкцією він має бути розміщений на кожній сторінці нашого сайту. Тому будемо використовувати тригер All Pages .
Іншими словами, якщо ми хочемо впровадити на сайт якийсь код відстеження, нам обов’язково потрібно виконати лише два пункти:
- Додати фрагмент коду – тег з потрібною конфігурацією для відправки даних;
- Вказати умову, коли цей код спрацьовуватиме – тригер з потрібними налаштуваннями.
Кожному з цих пунктів варто приділити увагу, адже ви не хочете, щоб інформація про відправлення форми на сайті спрацьовувала в момент завантаження кожної сторінки?
І є ще одна сутність, без якої начебто і можна обійтися, але яка дуже спрощує роботу – Змінна.
Змінні в диспетчері тегів Google
Якщо дуже спростити, то змінну можна як пару ключ – значення. Де ключ – це назва змінної. При роботі з GTM ви виявите два типи змінних: вбудовані та користувацькі.
Вбудовані змінні
Як відомо з назви, вбудовані змінні існують у диспетчері тегів за замовчуванням. Прикладом такої змінної може бути Page URL, в якій зберігається URL-адреса поточної сторінки.
При цьому вбудовані змінні можна розділити умовно ще на дві категорії: за замовчуванням і ті, які потрібно включити самостійно. Щоб дістатися до других, потрібно натиснути кнопку Налаштувати у верхньому правому кутку і відзначити галочками змінні, які ви хочете включити.
У вбудованих змінних переважно зберігається розширена технічна інформація про виконану дію. Наприклад, у момент події кліка по кнопці у змінній Click Classes зберігатиметься інформація про клас кнопки, по якій був клік; у змінній Click Text зберігатиметься інформація про текст, який був на цій кнопці.
Користувальницькі змінні
Якщо ж вам недостатньо тієї інформації, яка є у вбудованих змінних і ви хочете зберігати якісь свої дані, можете створити користувацьку змінну. Наприклад, у нас може бути змінна з назвою UA_ID, в якій ми зберігатимемо ідентифікатор Google Analytics зі значенням UA-92839822-1. У такому разі нам не доведеться щоразу, коли налаштовують нову подію, бігти в обліковий запис Google Analytics і шукати там ідентифікатор.
Замість висновку
Звичайно, в одній статті розповісти про всі, навіть базові поняття, диспетчера тегів дуже складно, тому продовження слідує.
Якщо у вас виникають питання в роботі з цим інструментом, пишіть їх у коментарі.
