Як використовувати Google Tag Manager: докладне керівництво для новачків

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

Що таке Google Tag Manager

Диспетчер тегів — сервіс, який спрощує використання кодів сторонніх служб на сайтах або в додатках. Завдяки Tag Manager вебмайстру достатньо один раз додати на сайт контейнер або майстер-код. Після цього код інших служб можна додавати через інтерфейс диспетчера.

За допомогою диспетчера тегів на сайт можна додати код будь-яких служб: від сервісів Google до сторонніх платформ. Наприклад, ви можете додати код Google Analytics, Яндекс.Метрики», Liveinternet та інших служб аналітики. Це зручно, якщо ви користуєтеся різними сторонніми сервісами для підвищення ефективності і моніторингу сайту.

Чи можна обійтися без GTM? Так, якщо ви використовуєте одну або дві сторонніх служби, диспетчером тегів можна не користуватися. А якщо ви постійно додаєте на сайт коди різних сервісів, Tag Manager спростить роботу з ресурсом.

Налаштування Google Tag Manager

Щоб використовувати диспетчер тегів, додайте на сайт контейнер. Створіть власні або використовувати вбудовані змінні. Налаштуйте умови активації або тригери і додайте в контейнер теги. Докладні інструкції нижче.

Як додати на сайт контейнер диспетчера тегів

Щоб додати на сайт контейнер Google Tag Manager, авторизуйтеся на сторінці сервісу і створіть новий обліковий запис. У налаштуваннях контейнера вкажіть, де він буде використовуватися.

Скопіюйте код і вставте його на сайт. Якщо ви працюєте з ресурсом під управлінням CMS WordPress, скористайтесь плагінами для вставки коду, наприклад, Head, and Post Footer Injections. Першу частину коду вставте в хедер як можна ближче до відкриває тегу, а другу в тіло сторінки відразу після тега .

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

Як використовувати змінні Google Tag Manager

Активація тегів в диспетчері відбувається, коли значення тригера збігається із заданою користувачем змінної. Наприклад, вбудована мінлива Click Text завжди містить який-небудь текст, а змінна Click URL — URL. В даному випадку тригер активується, якщо значення змінної збігається з заданими користувачем параметрами: кліком по елементу із зазначеним текстом або URL.

Для управління змінними виберіть відповідний розділ меню.

Тут можна скористатися вбудованими змінними або створити власні. Щоб використовувати вбудовані змінні, необхідно натиснути кнопку «Налаштувати» і зазначити потрібну опцію галочкою.

Користувачам доступні наступні типи вбудованих змінних:

• Сторінки. В якості змінної ви можете вибрати повний URL (Page URL), відносний URL (Page Path), ім’я хоста сторінки (Page Hostname), джерело запиту (Page Referrer).
• Утиліти. Цей тип змінних включає події, ID версію контейнера, назва робочої області і ID HTML-тега.
• Помилки. Цей тип вбудованих змінних включає перегляд контейнера в режимі налагодження, а також повідомлення про помилку, URL помилки і номер рядка помилки.
• Кліки. В якості змінної можна використовувати HTML-елементи, класи елементів, URL, текст, елементи, атрибути target ID елемента.
• Форми. В якості змінної можна використовувати елементи і класи форми, атрибути target та href, а також текст форми.
• Історія. Цей тип змінних підтримує активацію тригера при зміні хеш URL. В якості змінної можна використовувати новий і старий фрагменти URL, а також нове і старе стан історії або джерело історії.

Після включення змінної вона стає доступною в фільтрі при створенні тригера.

Як використовувати тригери Google Tag Manager

Тригер — умова активації тега. Воно настає, коли тригер співпадає з вказаним значенням змінної. Щоб налаштувати тригер, виберіть в меню відповідний розділ і натисніть кнопку «Створити».

На сторінці налаштування тригера вкажіть назву та виберіть тип.

У GTM доступні наступні типи тригерів:

• Переглянути сторінки. Цей тип активується по готовності об’єктної моделі документа (Модель DOM готова), після повного завантаження всіх елементів сторінки (Вікно завантажено) або відразу після переходу на сторінку (Перегляд сторінки).
• Клік. Цей тип тригера фіксує кліки по посиланнях або будь-яким кликабельним елементів сайту.
• Інші типи. Тут можна вибрати тип «Помилка JavaScript», «Таймер», «події», «Відправлення форми» і «Зміна в історії».

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

Прапорець у полі «Чекати теги» блокує дію до активації всіх тегів в контейнері. Функція «Перевірка помилок» блокує активацію тега, якщо користувач виконує помилкова дія.

Як працюють теги GTM

Щоб відстежувати події або використовувати зовнішні служби, необхідно створити тег і помістити його в контейнер. Google Tag Manager підтримує кілька десятків вбудованих тегів сторонніх сервісів і служб Google. Також ви можете додавати користувальницькі теги.

Принцип роботи з тегами зручно освоювати на прикладі інтеграції ресурсу з системами аналітики «Яндекс.Метрика» і Google Analytics.

Підключіть сайт до Google Analytics. У робочій області скористайтеся функцією «Додати новий тег. У розділі «Конфігурація тега» виберіть тип тега Універсальний Analytics або «Класичний Google Analytics». Google рекомендує користуватися Універсальний Analytics.

Вкажіть ідентифікатор ресурсу. Його можна знайти в обліковому записі Google Analytics в розділі «Адміністратор – Ресурс – Код відстеження. В розділі «Тип відстеження виберіть «Перегляд сторінки».

В розділі «Тригери» виберіть пункт «Всі сторінки». Збережіть зміни.

Підключіть сайт до системи «Яндекс.Метрика». Для цього додайте новий тег. У налаштуваннях конфігурації вкажіть тип «HTML».

У відповідне поле вставте код лічильника «Яндекс.Метрики». Його можна знайти в розділі «Налаштування» сервісу аналітики. Виберіть тригер All Pages.

Перед публікацією контейнера скористайтеся функцією «Попередній перегляд і налагодження».

Натисніть кнопку «Попередній перегляд». Відкрийте сайт в цьому ж браузері. Якщо ви встановили теги вірно, інформація про них з’явиться в діагностичному вікні.

Опублікуйте контейнер. Перевірте коректність роботи служб аналітики. В Analytics можна відправити тестовий трафік в розділі «Адміністратор – Ресурс – Код відстеження. В «Метриці» коректність роботи лічильника можна перевірити з допомогою зазначеної на ілюстрації кнопки.

Якщо на сайті реалізовані AMP, за допомогою диспетчера тегів можна підключити прискорені сторінки до служб аналітики. Якщо ресурс працює на WordPress, інсталювати надбудову AMP for WordPress. У розділі Analytics увімкніть відстеження Tag Manager, вкажіть ID контейнера, тип служби аналітики та ідентифікатор запису в Google Analytics.

Таким же способом сайт можна інтегрувати з іншими сервісами.

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

Нижче ви знайдете рекомендації по практичному використанню Google Tag Manager.

Які завдання можна вирішувати за допомогою диспетчера тегів Google

Завдяки контейнера тегів GTM вам більше не потрібно додавати на сайт код, коли ви хочете розширити функціональність ресурсу або підключити його до нового сервісу. Ось як можна використовувати це на практиці.

Додайте на сайт теги ретаргетинга і ремаркетингу

Щоб додати код ретаргетинга «Вконтакте» через Google Tag Manager, створіть новий тег. Виберіть тип Інтерфейс HTML». Додайте в запропоноване поле код ретаргетинга. Його можна створити в розділі «Ретаргетінг» кабінету рекламодавця «Вконтакте». У полі «Тригери активації» вкажіть варіант All Pages. Якщо код повинен спрацьовувати при відвідуванні деяких сторінок, вкажіть URL в тригер типу «Перегляд сторінки». Збережіть зміни і опублікуйте тег.

Таким же способом додайте теги ремаркетингу і ретаргетинга інших соціальних мереж та рекламних систем.

Підтверджуйте права на сайт за допомогою Google Tag Manager

Якщо ви ще не підтвердили права на сайт в кабінеті вебмастера Google, зробіть це за допомогою диспетчера тегів. У Search Console виберіть відповідний спосіб і натисніть кнопку «Підтвердити».

При необхідності аналогічним способом підтвердіть всі версії сайту.

Додайте кнопки шерінга на зображення

Це одна з приватних можливостей миттєвої інтеграції сайту зі сторонніми сервісами за допомогою Tag Manager. Скопіюйте код кнопок шерінгу обраного сервісу, наприклад, AddThis. Створіть тег типу «HTML». Вставте код кнопок. В якості тригера активації вкажіть варіант All Pages. Збережіть зміни і опублікуйте контейнер.

Перевірте коректність роботи кнопок шерінгу.

Відстежуйте внутрішні переходи на сайті

Зовнішні переходи зручно відстежувати за допомогою UTM-міток. А внутрішні кліки краще моніторити за допомогою подій в Google Analytics.

Уявіть, що плануєте відслідковувати переходи по конкретній посиланням. У Tag Manager виберіть меню «Змінні – Налаштувати – Click URL». Ви активували потрібну змінну.

В розділі «Тригери» створіть новий тригер. Виберіть тип «Клік — Тільки посилання».

На наступній сторінці відзначте галочкою опцію «Чекати теги» і «Всі кліки по посиланнях». В якості умови виконання тригера вкажіть URL цільової сторінки. Збережіть зміни.

Після установки тригера додати тег відстеження. В розділі «Теги» створіть новий. У налаштуваннях профілю виберіть тип Універсальний Analytics. У меню «Тригери» виберіть відповідне значення. У налаштуваннях конфігурації заповніть поля «Тип відстеження», «Категорія», «Дія», «Ярлик». Для зручності моніторингу значення в полі «Ярлик» повинно відповідати обраній дії.

Після публікації контейнера ви зможете відслідковувати вибране подія в розділі Google Analytics «Поведінка – Події».

Відстежуйте переходи по всіх зовнішніх посиланнях

В даному випадку мова йде про кліках по будь-яких зовнішніх посилань, які є на сайті. Створіть власну змінну. Виберіть тип компонента «Ім’я хоста» для змінної типу URL. Оберіть опцію «Прибрати www». В додаткових настройках вкажіть у полі «Джерело URL» значення Click URL.

Створіть тригер типу «Клік – Всі елементи». В умовах активації виберіть опцію «Деякі посилання». У фільтрі вкажіть, що тригер активується, якщо ім’я хоста не містить URL вашого сайту.

Створіть тег активації тригера. Виберіть тип Універсальний Analytics. Виберіть тип відстеження заповніть поля «Категорія», «Дія» і «Ярлик». Опублікуйте тег в контейнері.

Відстежуйте переходи по конкретній зовнішньому посиланню

Створіть власну змінну, виберіть тип URL. Вкажіть тип компонента «Повний URL». У полі «Джерело URL» виберіть значення Click URL.

В умовах активації виберіть значення «Деякі посилання». Вкажіть, що тригер активується, якщо користувач переходить з конкретного URL.

Збережіть тригер. Створіть тег Універсальний Analytics і опублікуйте його в контейнері.

Уточнюйте показник відмов

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

Створіть новий тригер, вкажіть тип «Таймер».

В поле «Інтервал» вкажіть час активації тригера. Наприклад, для активації таймера через 30 секунд вкажіть значення 30 000 мілісекунд. У полі «Обмеження» вкажіть значення «1». У цьому випадку таймер буде активуватися один раз для кожної сесії.

В умовах активації тригера вкажіть URL, на яких повинен спрацьовувати таймер.

Створіть і опублікуйте в контейнері новий тег Універсальний Analytics. Таймер буде запускатися кожен раз, коли відвідувач буде проводити на вами зазначених сторінках більше 30 секунд.

Якщо таймер буде працювати на всіх сторінках сайту, ви зможете відстежувати в Google Analytics уточнений показник відмов. За замовчуванням система аналітики вважає відмовою все відвідування, в ході яких людина переглядає одну сторінку сайту. Після активації таймера сесії тривалістю понад 30 секунд не будуть вважатися відмовами, навіть якщо відвідувач переглядає одну сторінку.

Відстежуйте взаємодія з контактною формою

Якщо на сайті є контактні форми, відстежуйте заповнення за допомогою GTM. Для цього в меню «Змінні» встановіть змінну Form Classes.

Створіть тригер. В настройках вкажіть тип «Відправка форми».

У налаштуваннях тригера переключіть галочку в положення «Деякі форми». Вкажіть в якості умов активації «Фільтр Form Classes містить» і вкажіть значення атрибута class форми.

Створіть відповідний тег Універсальний Analytics. Збережіть зміни і опублікуйте контейнер. Значення атрибута class форми можна знайти в коді сторінки.

Відстежуйте кліки по соціальних кнопок і віджетів

Практично на кожному сайті є соціальні плагіни, наприклад, віджети сторінок в Facebook і «Вконтакте», кнопки Follow Me. За допомогою диспетчера тегів можна відстежувати кліки за конверсійними кнопок віджетів типу «Подобається» або «Підписатись». Наприклад, налаштуйте відстеження кліків по іконці Twitter в блоці Follow Me.

У меню «Змінні» встановіть змінну Click Classes.

Створити тригер, виберіть тип «Клік — всі елементи». Переведіть перемикач у положення «Деякі кліки». У фільтрі активації вкажіть значення атрибута class кнопки Twitter з блоку Follow Me. Його можна знайти в коді елемента.

Додайте дані у фільтр диспетчера тегів, збережіть зміни. Створіть відповідний тег Універсальний Analytics і опублікуйте оновлений контейнер.

Відстежуйте переходи по тексту кліка

Цю функцію можна використовувати для перевірки ефективності CTR елементів ресурсу. Уявіть, що на сайті є однакові кнопки з різним закликом до дії. Щоб визначити, які кнопки натискають частіше, активуйте змінну Click Text.

Створити тригер, виберіть тип «Клік – Всі елементи». Встановіть галочку в положення «Деякі кліки». Виберіть фільтр Click Text. В якості умови активації тригера відзначте «Містить» і введіть потрібний текст.

Створіть і опублікуйте тег Google Analytics.

Відстежуйте конкретні джерела зовнішнього трафіку

За допомогою Google Tag Manager зручно моніторити кількість відвідувачів з конкретних сайтів. Для цього створіть тригер. Виберіть тип «Перегляд сторінки». В якості змінної вкажіть Referrer. В якості правила активації вкажіть «Містить» і додайте URL джерела, який потрібно відстежувати.

Створіть тег з типом відстеження «Подія» і опублікуйте його в контейнері. Після цього Google Analytics буде фіксувати подію при кожному відвідуванні сайту вибраного джерела.

Щоб відстежувати відвідування з конкретної сторінки, в якості змінної вкажіть Referrer, а в правилах активації відзначте «Одно» і додайте повний URL сторінки.

Використовуйте GTM для впровадження мікророзмітки

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

Скористайтеся генератором Schema JSON-LD або аналогічним інструментом, щоб отримати код. Створіть тег типу «HTML». Вставте код розмітки. Виберіть тригер активації All Pages.

Відстежуйте джерела трафіку за допомогою подій Google Analytics

Цю функцію можна використовувати, щоб швидко оцінити кількість джерела трафіку і кількість відвідувань з того чи іншого сайту.

Створіть власну змінну типу «Джерело посилання HTTP». Вкажіть тип компонента «Ім’я хоста».

Створіть тригер типу «Перегляд сторінок». В умовах активації вкажіть, що тег активується, якщо URL джерела не збігається з URL вашого сайту.

Створіть і опублікуйте в контейнері тег Google Analytics. Після цього в розділі «Події – Огляд – Категорія подій» Google Analytics можна оцінювати джерела трафіку.

Це далеко не всі можливості диспетчера тегів. Запропоновані приклади допоможуть освоїти принцип роботи GTM. Після цього ви зможете самостійно вибирати параметри для моніторингу за допомогою служб аналітики і додавати на сайт коди інтернет-сервісів.

Знахідка для нетехнічних фахівців

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

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