Енциклопедія інтернет-маркетингу: що таке google tag manager и як його використовувати

Що таке GoogleTagManager і як його використовувати

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

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

 Що таке GoogleTagManager 

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

Структура GTM

  • Акаунт – те місце, де ви можете керувати своїми контейнерами.
  • Контейнер – це головний і єдиний фрагмент JS-коду, який ми вставляємо на всі сторінки сайту. По суті, він є тегом, але його функція полягає в тому, що він служить контейнером для всіх тегів.
  • Тег – це невеликі фрагменти коду веб-сайтів, які дозволяють відстежувати трафік і поведінку  відвідувачів, аналізувати ефективність реклами на сайтах і в соціальних мережах, використовувати засоби ремаркетингу і таргетингу а певні аудиторії, тестувати і покращувати свій сайт, а також виконувати багато інших корисних завдань.
  • Тригер визначає, за яких обставин буде виконуватися або блокуватися тег.
  • Змінні є парами типу ім’я/значення, для яких передаються значення в процесі роботи. Вони використовуються як для кастомних змінних, так і для визначення умови, за якої буде спрацьовувати тег.

Створення і встановлення

Перше, що потрібно зробити – це ввійти під існуючим Google акаунтом в GoogleTagManager, якщо такого немає – створити новий.

Потім Tag Manager пропонує створити акаунт для вашого ресурсу і надає код контейнера, який необхідно встановити на сайт.

В цьому прикладі я буду використовувати контейнерweb-версії.

1

Погоджуємося з ліцензійною угодою.

2.[1]

Далі в інтерфейсі  буде відображено код, який за рекомендаціями Google потрібно поставити на всі сторінки сайту після тегу. В подальшому його можа буде переглянути у вкладці Admin -> InstallGoogleTagManager.

3

На цьому все. Встанвлення GoogleTagManager завершене. Потрібно переходити безпосередньо до налаштування тегів і тригерів.

Структура. Як і для чого налаштовувати. Можливості

Зупинимося детальніше на загальному інтерфейсі програми.

Елементи інтерфейсу

4.png

1 – Елемент пошуку, який допоможе швидко знайти тег, тригер чи змінну за назвою.

2 – Огляд стану акаунта

3 – Виклик списку тегів

4 – Список правил

5 – Список вбудованих змінних і змінних користувачів

5.png

6 – Створення папок для структурування тегів, тригерів і змінних

7 – Швидкий доступ до створення нового тегу

8 – Створення замітки

9 – Стан акаунта, кількість тегів, тригерів і змінних і їхній стан (опублікований чи не опублікований)

10 – Історія зміни вмісту контейнера

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

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

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

В інтерфейсі GoogleTagManager ви побачите, що налаштування тегів, тригерів і змінних має приблизно однаковий порядок:  

Название -> Тип -> Настройка -> Правило

Для змінних правило спрацьовування відсутнє, значення буде прийматися на всіх сторінках сайту. У випадку, якщо значення не буде визначене – ключу буде присвоєно undefined.

Спочатку поглянемо на етапи створення тригера і змінних.

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

6.png

 

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

PageView – тригер, який дає можливість запустити тег під час завантаження певних сторінок, завантаження вікна (на 3х етапах, передбачених в GTM) або за додаткових умов, які можна обрати зі списку.

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Далі потрібно встановити правило цього тригера – тут може бути 2 варіанти - Allpageviews або для більш гнучкого налаштування SomePageViews, де можна вказати певну сторінку чи параметр, який приведе до спрацьовування тригера під час завантаження сторінки.

8.png

Наступний вид тригера - Click. Він використовується для прослуховування кліків 2х типів - AllElements і JustLinks. Як правило, можна використовувати для прослуховування всіх кліків AllElements, але це призведе до необхідності більш конкретного налаштування на етапі Fire On. За аналогією з Page View можна створити умову, за якої буде спрацьовувати тригер. Щоб використовувати ці умови, потрібно включити на вкладці Variables показники, які належать до Clicks (у подальшому для Forms і History).

9.png

Після чого в списку вибору параметрів спрацьовування тригера можна обрати id, class, text та інші параметри, які необхідно врахувати.

10.png

 

Якщо необхідних вбудованих змінних немає, можна скористатися змінними користувача. Вони можуть бути різного виду, можуть мати значення з різних джерел (html, cookie) і можуть бути створені як на сайті, у вигляді масиву dataLayer, так і за допомогою CustomJavaScript безпосередньо в інтерфейсі TagManager.

CustomJavaScript у вигляді змінних користувача має справді фантастичні можливості для аналітиків і маркетологів – необхідність звертатися до програміста практично відпадає.

11.png

 

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

Аналогічним чином створються тригери для  Form і History Change.

Окремої уваги потребують CustomEvent і Timer.

CustomEvent – тип тригера, правило спрацювання якого встановлює розробник, вбудовуючи змінну dataLayer.push({'event': 'event_name'}); в код на певні дії  або просто завантаження сторінки. Тут дуже багато цікавих можливостей і методів реалізації , докладніше про них можна почитати в офіційній документації Google.

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

12.png

Тепер вам доступні базові налаштування тригерів і показників в GTM.

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

Встановлення лічильників і тегів продуктів, список яких доступний в інтерфейсі.

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

 

Подивитися весь список тегів, передбачених компанією Google, можна під час створення тегу.

 

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

 

Цей список постійно розширюється, але у випадку, якщо відсутній необхідний вбудований функціонал, можна скористатися полями CustomHTMLTag і CustomImageTag 

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

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

Створення самого тегу – завдання тривіальне. Етапи ми обговорили вище, а стосовно полів – це найчастіше розпізнавальні елементи встановлюваного скрипту (id, унікальне ім’я чи назва в продукті тощо), які можна взяти з інтерфейсу встановлюваного продукту. Під час налаштування вбудованих тегів найчастіше є можливість заповнення полів  для створення додаткових параметрів. Тут можна використовувати ті показники, які ми розбирали вище, обравши зі списку відповідний. Також тут є можливість змінити показник для продукту, якщо він надсилається з замовчуванням, вказавши нове значення.

16.png

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

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

Для того, щоб перевірити працездатність встановленого тегу, в GTM передбачений функціонал попереднього перегляду і налагодження

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

19.png

 

Натиснувши на цю кнопку і потім перейшовши на сайт, ви побачите додаткову консоль, у якій буде відображатися ряд тегів, які спрацювали чи не спрацювали на цій сторінці. Також доступний перегляд моменту, на якому спрацював тег, причини спрацьовування (чи неспрацьовування) і показники, які використовуються. Після того, як ви переконаєтесь, що все працює, натисніть кнопку Publish.

У маркетолога або аналітика виникає необхідність використовувати Google Tag Manager, коли:

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

  2. На встановлення кодів ретаргетингу уходить багато часу, а керівник уже хоче бачити результати.

  3. Потрібно налаштувати десяток подій, а написання ТЗ для програмістів і втручання в код – в кращому випадку справа декількох днів.
  4. Виникає необхідність створювати змінні користувачів і метрики для розширення аналізованих даних тощо.

 

Для прикладу розберемо встановлення коду Google Analytics

Для початку раджу створити перемінну користувача, яку можна буде використовувати в якості property id для вашого акаунту.

Заходимо на вкладку Variables, натискаємо New і обираємо тип змінної Constant.

Даємо їй назву GAProperty і вносимо наш ідентифікатор з GoogleAnalytics. НатискаємоCreateVariable. В подальшому ці маніпуляції полегшать роботу з тегами.

20.png

 

Далі заходимо на сторінку Tag і натискаємо New.

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Вводимо назву тегу, обираємо потрібний продукт (якщо його немає – можна скористатися Custom HTML), обираємо версію GoogleAnalytics, у полі TrackingID треба ввести ідентифікатор вашого акаунта, але, оскільки на попередньому кроці ми створили змінну з нашим ідентифікатором, ми вказуємо його. TrackType – Pageview за замовчуванням.

В полі More settings можна ввести додаткові параметри, які ви хочете використовувати.

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Найчастіше використовувані: 

  • Поле FieldstoSet слугує для передачі параметрів, які передбачені в GoogleAnalytics. Це може бути page (для створення своєї назви сторінки) чи &uid для представлення зuser id тощо.

  • Customdimentionsі custommetrics слугують для передачі змінних користувача і метрик в GoogleAnalytics.
  • Ecommercefeatures використовується для налаштування Enhancedecommerce. (Для передачі даних Enhancedecommerce використовується тип тегу PageViewдля всіх етапів! Тип тегу Transaction використовується лише для класичного ecommerce.)

 

Далі встановлюємо правило спрацьовування тегу – All Pages. В результаті має вийти щось схоже на

23.png

Натискаємо CreateTagі слідуємо пунктам, описаним до кейсів. (Preview -> Publish)

Для налаштування «События» треба створити додатковий тег типу GoogleAnalytics і в полі tracktype обрати event. Заповнюємо стандартні параметри і в FireOnстворюємо правило надсилання події (не забувайте відмічати галочками необхідні змінні на вкладціVariables).

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Нестандартним, але досить частим завданням є отримання cid чи clientidGoogleAnalytics, як кастомної змінної. Виникає така необхідність у випадку, якщо компанія хоче відстежувати кожного відвідувача окремо чи надсилати певні дані через measurementprotocol.

Особливістю цього показника є те, що він зберігається в файлах cookieGoogleAnalytics.

Нам потрібно:

1. Створити змінну 1st Party Cookie зіменем “_ga”

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

2. Створити Custom JavaScript з таким кодом

 

function() {

try {

var cookie = {{ga cookie}}.split(".");

return cookie[2] + "." + cookie[3];

} catch(e) {

console.log("No Universal Analytics cookie found");

return "n/a";

}

}

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

А тепер про те, як це працює. 1stPartyCookie з іменем “_ga” повертає даним вигляд, схожий на GA1.2.475226310.1380715146 Далі CustomJavaScript парсить цей рядок і повертає сіd, прибираючи з отриманих даних перші 4 символи (GA1.2.) і повертає набір чисел (475226310.1380715146), який показує повний clientID користувача.

Цей показник можна використовувати як кастомну змінну  в гугл аналітикс, достатньо створити його в GoogleAnalytics і додати тег  в поле CustomDimention з параметрами session і налаштувати передачу цього параметра з GTM в GA.

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Де Index – номер змінної з Google Analytics.

 

Энциклопедия интернет-маркетинга: что такое Google Tag Manager и как его использовать

Це чудовий приклад того, як отримати і використати змінні в Google Tag Manager.

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

Стаття опублікована на ресурсі https://www.seonews.ru/

Якщо ви хочете працювати з нами,
давайте почнемо з обговорення завдання

Обговорити задачу

Отримуйте новини інтернет-маркетингу

Тільки корисна інформація від експертів Promodo

Отримуйте новини інтернет-маркетингу