Що таке Google Tag Manager, навіщо він потрібний і як його використовувати у бізнесі. Основи роботи з GTM

Що таке Google Tag Manager і навіщо він потрібний. Основи роботи з GTM

Google Tag Manager один із тих інструментів, які можуть зробити ваше життя простіше, ефективніше, а в деяких випадках ще й принести додатковий прибуток.

“Навіщо ти мучишся з цими кодами відстеження, пишеш величезні ТЗ та чекаєш, коли програміст їх запровадить? Використовуй Google Tag Manager і твоє життя буде простіше. – Таку фразу в якийсь момент чули багато маркетологів, які зараз використовують цей інструмент на благо свого бізнесу.

Вам знайома така ситуація: потрібно поставити на сайт код відстеження, ви пишете ТЗ програмісту і чекаєте… чекаєте… чекаєте…? Коли не використовуєш GTM

Якщо так, тоді ця стаття для вас 😉

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

  1. Чому варто використовувати Google Tag Manager
  2. Реєстрація облікового запису
  3. Встановлення диспетчера тегів на сайт
  4. Теги, що це таке і навіщо вони потрібні
  5. Робота з тригерами в GTM
  6. Змінні в диспетчері тегів Google

 

Чому варто використовувати Google Tag Manager

Одна з основних причин використання полягає в тому, що вам більше не потрібно покладатися на вашого розробника (який дуже часто навіть не ваш, а на аутсорсі) і чекати, коли він встановить потрібні вам коди на сайт. За допомогою диспетчера тегів ви можете зробити це самостійно без особливих знань програмування. Іншими словами, встановивши на своєму веб-сайті скрипт GTM, ви зможете швидко встановити інші теги Google, такі як Google Analytics або сторонні сценарії/пікселі, наприклад, Facebook Pixel всього в кілька кліків.

Це особливо корисно, якщо вам подобається тестувати та шукати нові шляхи підвищення конверсії на вашому сайті. Наприклад, якщо вам цікаво дізнатися, як користувачі взаємодіють з вашим сайтом, ви можете використовувати Google Tag Manager для встановлення коду Hotjar без залучення розробника.

Додаткові переваги використання диспетчера тегів включають швидкіший час завантаження сайту, більш точну аналітику та багато іншого.

Реєстрація облікового запису в диспетчері тегів Google

Щоб створити обліковий запис потрібно зробити всього кілька простих дій:

  • Залогінитись у свій обліковий запис Google або, якщо такої немає, створити її;
  • Ввести дані облікового запису:
  1. У полі Назва облікового запису вводимо назву вашої компанії;
  2. Вибираємо країну, де працює компанія;
  3. Галочку в цьому пункті ставимо залежно від бажання та доброти душевної.Вікно введення даних облікового запису в Google Tag Manager
  • Заповнити дані для створення контейнера:
  1. Вказуємо назву ресурсу, для якого реєструємо обліковий запис. Найчастіше це адреса вашого сайту;
  2. Вибираємо де використовуватиметься контейнер. Зазвичай диспетчер тегів використовують для веб-сайтів та AMP сторінок;
  3. І не забуваємо натиснути кнопку “Створити”.Створення нового контейнера в Google Tag Manager
  • Залишилося ухвалити угоди про умови використання і можна приступати до встановлення на сайт.Угода про використання диспечера тегів Google

Встановлення диспетчера тегів на сайт

Перш ніж розпочати роботу з Google Tag Manager, вам потрібно встановити його на сайт. І тут є кілька варіацій:

  • зробити це самостійно. Найшвидший спосіб, але потребує певних навичок програмування;
  • використовувати різні плагіни CMS вашого сайту для встановлення GTM – Навичок програмування не вимагає, але потрібно витратити час на пошук відповідного плагіна. Плюс завжди є ймовірність, що при установці в такий спосіб код спрацьовуватиме не на всіх сторінках сайту або виникнуть інші помилки. Найчастіше це найоптимальніший, хоч і найпростіший спосіб;
  • написати ТЗ програмісту та дочекатися його впровадження. Чому б на самкінець не скористатися його послугами 🙂 Це найоптимальніший спосіб, та й часу він займає дуже мало.

Написання ТЗ програмісту

Наприкінці, коли ви створили контейнер, ви мали побачити наступне вікно:Встановлення коду Google Tag Manager на сайт

Саме в ньому описано все, що потрібно зробити вашому програмісту для встановлення. Просто беремо та копіюємо інформацію з цього вікна у файл і відправляємо в роботу.

Якщо раптом ви закрили це вікно, то знайти інструкцію можна просто натиснувши на ідентифікатор контейнера вгорі меню.Ідентифікатор контейнера в GTM

Перевірка коректності встановлення GTM на сайті

Звичайно, написати ТЗ це ще лише півсправи. Потрібно переконатися у правильності встановлення кодів. Тут, як у Матриці – два варіанти:

  • Перейти у вихідний код сайту і подивитися чи правильно:Перевірка коректності установки GTM у вихідному коді сайту
  • Використати розширення Google Tag Assistant. Це дозволяє побачити всі коди відстеження компанії Google, які стоять на сайті, а також підказує, якщо один з них встановлено неправильно. Наприклад, на скріншоті нижче бачимо, що диспетчер тегів з ідентифікатором GTM-NS4QQ3P встановлено некоректно, про що свідчить червона піктограма біля нього.Перевірка коректності установки GTM через Google Tag Assistant

Щоб детальніше дізнатися про помилку, необхідно натиснути на виділений блок. Тепер ми бачимо більше інформації щодо нашого тегу. Знизу в окремому блоці Where to optimize відображається інформація, з чим пов’язана помилка. У разі ми бачимо, що код відповіді HTTP – Status 404. Ця помилка пов’язана з тим, що наш контейнер є порожнім і в ньому не опубліковано жодних налаштувань. Якщо інформації про помилку в блоці Where to optimize вам недостатньо, можна натиснути на знак “?” і отримати ще детальніший опис помилки.Помилка Status 404 у Google Tag Assistant

Тепер, GTM на нашому сайті встановлений, час перейти до знайомства з основними сутностями, з якими нам доведеться працювати.

Теги в Google Tag Manager, що це таке і навіщо вони потрібні

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

Тег – Це фрагмент коду, який Ви розміщуєте на своєму сайті. Ви можете використовувати як вбудовані шаблони для налаштування тегів, наприклад для Google Analytics або Hotjar або ж додавати фрагменти користувача за допомогою тегів типу Користувальницький HTML і Користувальне зображення.Види тегів у GTM

Іншими словами, якщо ви хочете додати на сайт якийсь код відстеження, то для цього вам необхідно створити тег із певними налаштуваннями. Наприклад, для встановлення коду Google Analytics за допомогою GTM потрібно створити наступний тег:Налаштування тега для встановлення коду Google Analytics за допомогою GTM

Більше детально почитати про теги ви можете у статті Теги в Google Tag Manager. Керівництво для новачків і не лише.

Робота з тригерами в GTM

При створенні тега крім блоку конфігурації тега є ще другий блок, який називається тригери.Додавання тригера до блоку з конфігурацією тега в GTM

Тригер – це умова, коли тег (фрагмент коду) має спрацювати. Наприклад, якщо ми хочемо встановити код Google Analytics, то згідно з інструкцією він має бути розміщений на кожній сторінці нашого сайту. Тому будемо використовувати тригер All Pages .

Іншими словами, якщо ми хочемо впровадити на сайт якийсь код відстеження, нам обов’язково потрібно виконати лише два пункти:

  • Додати фрагмент коду – тег з потрібною конфігурацією для відправки даних;
  • Вказати умову, коли цей код спрацьовуватиме – Тригер з потрібними налаштуваннями.

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

І є ще одна сутність, без якої начебто і можна обійтися, але яка дуже спрощує роботу – Змінна.

Змінні в диспетчері тегів Google

Якщо дуже спростити, то змінну можна як пару ключ – значення. Де ключ – це назва змінної. При роботі з GTM ви виявите два типи змінних: вбудовані та користувацькі.

Вбудовані змінні

Як відомо з назви, вбудовані змінні існують у диспетчері тегів за замовчуванням. Прикладом такої змінної може бути Page URL, в якій зберігається URL-адреса поточної сторінки.Вбудована змінна Page URL у Google Tag Manager

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

У вбудованих змінних переважно зберігається розширена технічна інформація про досконалу дію. Наприклад, у момент події кліка по кнопці у змінній Click Classes зберігатиметься інформація про клас кнопки, за якою був клік; у змінній Click Text зберігатиметься інформація про текст, який був на цій кнопці.

Користувальницькі змінні

Якщо ж вам недостатньо тієї інформації, яка є у вбудованих змінних і ви хочете зберігати якісь свої дані – можете створити змінну користувача. Наприклад, у нас може бути змінна назва UA_ID, в якій ми зберігатимемо ідентифікатор Google Analytics зі значенням UA-92839822-1. У такому разі нам не доведеться щоразу, коли налаштовують нову подію, бігти в обліковий запис Google Analytics і шукати там ідентифікатор.Налаштування змінної користувача з ідентифікатором Google Analytics

Замість висновку

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

Якщо у вас виникають питання в роботі з цим інструментом – пишіть їх у коментарі.