Google Tag Manager: що це таке, як налаштувати та встановити GTM

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

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

Що таке менеджер тегів Google Tag Manager

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

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

Цілі використання Google Tag Manager

Отже, які функції виконує GTM і навіщо його можна використовувати:

1. Для збирання інформації Google Analytics, KISSMetrics та інших сервісів аналітики.
2. Для налаштування ремаркетингу Facebook, Google Ads, AdRoll та інших сервісів.
3. Для розміщення HTML-скриптів під подальше проведення спліт- та A/B-тестів або показ банерів.
4. Щоб мати можливість змінити в стислі терміни теги, розміщені на сайті.

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

Таким чином диспетчер тегів відповість на низку актуальних у просуванні питань:

1. Які місця розміщення найкраще конвертують трафік?
2. Які рекламні кампанії недостатньо ефективні та їх варто виключити?
3. Як раціональніше розподілити рекламний бюджет за основними джерелами?
4. Як виконати відстеження кліків у GTM, знизити вартість кліка, але при цьому залучити більше потенційних клієнтів?

Головні переваги даного інструменту:

• економить ваш час . Щоб додати або змінити тег, вам знадобиться набагато менше часу, ніж для складання ТЗ програмісту. При цьому вам не потрібно чекати, поки спеціаліст звільниться і зможе приступити до вашого завдання. Часто це економить кілька робочих днів;
• простий у роботі . Більшість налаштувань складається з 2-3 простих кроків. При цьому більшість функціонала автоматизована, тому вам не доведеться самостійно вносити гори даних;
• економить маркетинговий бюджет . Використовуючи цей сервіс, вам не потрібно постійно звертатися до розробників або наймати програміста для зміни налаштувань аналітики. Це суттєво скорочує витрати, особливо якщо ви регулярно тестуєте гіпотези та вносите зміни;
• підходить для безлічі сервісів . З його допомогою можна керувати тегами будь-яких інструментів, що використовують мітки для відстеження активності користувача;
• дозволяє керувати кількома проектами . Ви можете одночасно працювати з кількома обліковцями;
• збирає аналітику з різних джерел . Наприклад, з мобільних додатків та корпоративних сайтів;
• зберігає ваші попередні налаштування . Є можливість швидко скинути будь-які зміни та повернутися до попередніх налаштувань;
• не позначається на функціонуванні сайту . Якщо встановлення встановлено правильно, сервіс не уповільнює завантаження сторінок і не викликає проблем у відображенні її елементів.

При коректному використанні GTM стає не просто корисним, а незамінним інструментом інтернет-маркетингу.

Переваги та недоліки Google тег менеджера

Менеджер тегів Google має дійсно безліч переваг, про які ми не згадали вище:

1. "Гугл тег менеджер" абсолютно безкоштовний і не вимагає від вас додаткових вкладень.
2. У GTM просто маса інтеграцій із сторонніми ресурсами та платформами – як безпосередньо від Google, так і від сторонніх розробників.
3. Диспетчер тегів дозволяє суттєво скоротити код сайту, що позитивно позначається на його швидкості роботи.
4. Для зручності можна використовувати вбудований режим налагодження.
5. У GTM можна переглядати та за необхідності відкочувати будь-які зміни. Навіть якщо у коді виявиться помилка, це не стане серйозною проблемою.
6. Ви можете відкривати спільний доступ для роботи з Google Tag Manager, що буде дуже зручним для команд співробітників.

Якщо ми розглядаємо плюси і мінуси диспетчера тегів, треба сказати і про деякі недоліки сервісу. Їх не багато:

1. Якщо під час роботи ви випадково пошкодили код контейнера GTM, це може призвести до клопоту. Тому що ви «зламаєте» і всі теги, які з його допомогою створили. Пошук та виправлення помилки часом займають чимало часу.
2. Встановлення коду GTM на сайт вимагає від вас як мінімум знань у галузі верстки та програмування. Якщо таких немає, доведеться звертатися до знаючого фахівця.
3. Певні незручності може створити відсутність онлайн-підтримки, а також звітів безпосередньо всередині Google Tag Manager.

У яких випадках Google Tag Manager є максимально ефективним?

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

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

На даний момент GTM – це незамінний інструмент у таких випадках:

• ви задієте кілька сервісів аналітики та інтегруєте на свій сайт сторонні сервіси;
• у вас немає розробника в штаті і ви поки що не плануєте його наймати;
• ви хочете фіксувати максимум варіантів взаємодії користувача з сайтом і використовувати це для більш ефективного просування;
• ви активно використовуєте ремаркетинг та регулярно проводите А/В тестування.

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

Як влаштований Google Tag Manager

Щоб допомогти краще розібратися, як працює GTM, спочатку поговоримо про структуру даного сервісу.

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

Кожен обліковий запис включає один або більше контейнерів. Останній – це головний код сервісу. Підключивши його на сайті, можна керувати всіма тегами, розміщеними на ньому. Контейнер зберігає всі теги інтернет-ресурсу або програми. Усередині облікового запису ви можете додати відразу кілька контейнерів для різних інтернет-ресурсів та програм.

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

• відстежувати поведінкову активність - відвідані сторінки, шляхи переходу, час відвідування, глибину перегляду, конверсії тощо;
• налаштовувати покази ремаркетингових оголошень;
• демонструвати користувачеві потрібний варіант контенту щодо A/B-тестів чи колл-трекинга.
• настроювання показу рекламних банерів та інших оголошень на сайті.

Умова, яка активує або припиняє виконання тега - тригер. Це дії, вчинені користувачами: відвідування певної веб-сторінки, перехід URL, конверсія, інше. Вони також задаються через інтерфейс Менеджера тегів, що безпосередньо не вимагає зміни коду сторінки. Також тригери використовують для припинення виконання тега. У GTM передбачені такі тригери:

• перегляд сторінки — якщо Ви завантажуєте сторінку в браузері користувача;
• видимість елементів – активує тег, коли елемент з'являється на екрані користувача;
• клік - починає виконання тега, якщо користувач клацнув по заданому елементу (кнопка, посилання тощо);
• відправлення форми;
• зміна історії — тег активується при зміні фрагмента URL;
• помилка JS - дозволяє зберегти інформацію про помилки в аналітиці;
• прокручування - відстежує глибину скролінгу;
• таймер - після закінчення заданого часу;
• відео YouTube — взаємодії з YouTube роликами на вашому сайті;
• користувальницька подія - відстежує типи взаємодії, для яких не підходять інші тригери;
• група тригерів – активують тег, якщо користувач виконав кілька умов.

Змінні – це параметри зі змінними значеннями. У GTM їх використовують і в тригерах, і в тегах. У тригерах змінні допомагають задати більш точні умови активації тега. А в тегах їх використовують для збирання динамічних значень. У сервісі передбачені вбудовані змінні, а також є можливість встановити власні.

Встановлення Google Tag Manager

1. Створення облікового запису та контейнера в тег менеджера

Для початку вам необхідно у браузері зайти до Google-акаунту. Потім перейти в Tag Manager і натиснути "Створити обліковий запис". Далі потрібно буде вказати назву облікового запису і вашу країну. Нижче в розділі «Створення контейнера» вкажіть його назву та виберіть тип платформи веб-сайту. Натискайте кнопку «Створити», прийміть умови користувача, підтвердьте свою згоду з правилами натисканням кнопки «Так» і переходьте безпосередньо до інтеграції коду на сайт.

2. Встановлення коду GTM на сайт

Насамперед видаліть усі попередні теги з вашого сайту, потім у менеджері тегів відкривайте розділ «Робоча область» і клацніть на ID контейнера — шестизначний код з префіксом GTM-… .

Рядки коду, що з'явилися, інтегруйте на ваш сайт згідно з інструкціями сервісу. Верхню частину коду (починається з <script>) скопіюйте в <head> сторінки відразу під dataLayer, а нижню частину коду (починається з <noscript>) вставте після тега <body>.

3. Опублікуйте контейнер

Щоб опублікувати код Менеджера тегів, просто збережіть зміни. Але перед тим, як зробити це, варто перевірити, чи працює контейнер. Ви можете скористатись браузерним розширенням Tag Assistant, яке працює в Google Chrome і більшості інших браузерів на основі Chromium. У ньому справді маса зручних функцій. Зокрема, режим попереднього перегляду, який дозволяє перевірити зміни до публікації.

Коротко про структуру менеджера тегів

До складу Гугл Тег Менеджер входять такі елементи:

• контейнер (Container). Його реалізують як фрагмент коду JavaScript. Саме в ньому містяться всі інші елементи: теги, тригери та змінні. Контейнер додають на всі сторінки сайту;
• тег (Tag). Це частини коду із зовнішніх ресурсів, за допомогою яких можна налаштувати відстеження поведінки користувачів, конверсії, дізнатися про результативність реклами. Теги дають можливість встановити критерії ЦА, протестувати, як користувачі реагують на зміни, і виконати безліч інших дій;
• тригери (Triggers). Це компоненти, що визначають умови, за яких активуються або, навпаки, блокуються теги. Прикладом може бути натискання кнопки зворотного дзвінка, додавання в кошик чи інші дії;
• змінні (Variables). Це сполучна ланка між двома попередніми компонентами. Якщо потрібно передати інформацію від тегів до тригера або назад, потрібно правильно налаштувати пару «ім'я — значення».

Доступ до всіх елементів налаштування здійснюється через обліковий запис GTM.

Як настроїти Google Analytics за допомогою Google Tag Manager

Google Analytics - один з найважливіших інструментів для збору даних про активність користувачів. Щоб виконати його налаштування, потрібно створити профіль у GA.

Далі в Менеджері тегів відкривайте «Робоча область» → «Змінні» → «Створити». Зліва виберіть «Налаштування».

Наступне, що потрібно зробити, — вказати ID відстеження. Копіювати потрібно у самому сервісі. Виберіть «Адміністратор», натисніть «Налаштування ресурсу». Там ви знайдете ідентифікатор. Скопіюйте та вкажіть його в GTM. Після цього дайте ім'я змінної та застосуйте всі зміни.

Далі створіть тег для спрямування даних до Analytics: у GTM зайдіть у розділ «Теги» → «Створити».

Далі:

1. Виберіть універсальну аналітику. Потрібен розділ Universal Analytics.
2. Під час вибору типу відстеження знайдіть пункт «Перегляд сторінки».
3. Назвіть змінну унікальним іменем.
4. У пункті «Тригери» вкажіть «Всі сторінки».
5. Введіть назву створеного тега та натисніть «Зберегти».

Тепер слід опублікувати тег: в роб. області клацніть «Надіслати», напишіть назву зміненої версії для вашого контейнера та виберіть «Опублікувати».

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

Як встановити піксель Facebook

Спочатку необхідно створити сам піксель "ФБ". Для цього перейдіть до Events Manager. Клацніть на кнопці в центрі екрана «Підключити джерело даних». У вікні виберіть пункт «Інтернет» і натисніть «Підключити»:

Дотримуйтесь інструкцій:

1. Вибираємо «Піксель Facebook» та натискаємо «Підключити».

2. Заповнивши коротку форму, задавши назву пікселя та URL-адресу веб-ресурсу, натисніть «Продовжити».

   

3. Далі вибираємо пункт "Додати код пікселя на сайт вручну".

   

1. У вікні натискаємо «Скопіювати код».

Тепер заходимо у свій обліковий запис GTM, вибираємо контейнер сайту та натискаємо «Додати новий тег». Далі необхідно вибрати індивідуальне налаштування HTML-тегу, вказати назву та додати код вашого пікселя, скопійований раніше.

Після цього відкрийте список із розширеними налаштуваннями вашого тега. Знайдіть пункт "Параметри спрацьовування" і виберіть "Один раз на сторінці", і пункт "Тригери" - вкажіть All Pages, потім натисніть "Зберегти".

Що зробити, якщо потрібно додати тригер в Гугл Тег Менеджер

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

Додати тригер в GTM можна у такий спосіб:

• увійдіть до свого облікового запису;
• виберіть контейнер, до якого потрібно додати новий компонент;
• ліворуч у бічній панелі виберіть блок «Тригери»;

• у правому верхньому кутку з'явиться кнопка «Додати тригер» (Add Trigger);
• далі потрібно визначитися з типом тригера і вибрати його зі списку, що випадає;
• наступний крок — налаштування додаткових умов. Наприклад, якщо вибрано тип «Завантаження сторінки», необхідно ввести URL;
• далі введіть ім'я для нового тригера, щоб легко зрозуміти його призначення, і збережіть зміни.

Аналогічно можна додати групу тригерів.

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

Що потрібно знати про налаштування змінних в GTM

Налаштування GTM передбачає вказівку змінних. Вони необхідні для таких функцій:

• збереження інформації, що вкаже на активацію тригера;
• передача даних у тег з різних джерел, наприклад, DataLayer, змінних JS, cookies або інших HTML-об'єктів;
• установки зв'язку з тригерами, які визначають, за дотримання яких умов буде активовано той чи інший тег. Наприклад, запуск тригера «Глибина перегляду» спрацює, якщо користувач переглянув 10, 50 чи 90 відсотків сторінки. При налаштуванні потрібно буде вказати точне число, за якого буде запущено тригер.

З вбудованими змінними працювати простіше — їх активують або відключають. Для цього потрібно зайти в однойменний розділ, перейти до блоку налаштування та встановити або зняти прапорець навпроти потрібної змінної. Для контейнерів, призначених для роботи із сайтами, можна вибирати серед 9 категорій. Аналогічні добірки є для контейнерів AMP, Android, iOS та застарілих мобільних.

Якщо є необхідність отримати додаткові дані, працюють у розділі змінних користувачів. Нові умови можна встановити в блоці «Змінні». Для роботи з сайтами доступні 6 категорій змінних користувачів: Панель навігації, Змінні сторінки, Елементи сторінки, Утиліти, Дані контейнера, Дані, надані користувачем.

Коротко про налаштування цілей у GTM

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

Для початку вмикаємо всі змінні, за винятком групи Error, тому що вони рідко потрібні. Нагадаємо, це робиться у блоці «Змінні».

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

Далі відкривається нове вікно або вкладка, де шукають потрібну форму, заповнюють її та відправляють. Потім потрібно повернутися до панелі керування, перейти на вкладку попереднього перегляду та у розділі Summary переглянути події. Цікавить те, що пов'язане з плагіном Contact Form 7.

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

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

На завершення залишилося перевірити роботу створеного тегу — заповнюємо форму у попередньому перегляді події. Якщо все правильно, публікуємо зміни та даємо версії оригінальне ім'я.

Можливі проблеми при роботі з Google Tag Manager

Які завдання реально вирішує Google менеджер тегів

Цей інструмент незамінний при виконанні таких завдань:

• виявлення помилок у JS;
• гнучке налаштування E-commerce для онлайн-магазину;
• налаштування ремаркетингу;
• відстеження використання користувачами фільтрів на майданчику, чекбоксів, форм тощо.

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

Висновки

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

І який висновок можна зробити?

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