Пропонуємо до вашої уваги покрокову інструкцію щодо встановлення та налаштування Google Tag Manager (GTM). Тут ми розповімо, як за допомогою GTM підключити Google Analytics і Яндекс Метрику.
Google Tag Manager (GTM) – багатофункціональний інструмент, який дозволяє додавати на сайт або мобільний додаток теги для аналізу трафіку, конверсії та поведінки користувачів без втручання у вихідний код сайту.
У статті ми докладно опишемо, як створити та налаштувати GTM на сайті та як без втручання у вихідний код сайту підключити Google Analytics та Яндекс Метрику.
Переваги GTM
- Можна додавати та оновлювати теги без втручання у вихідний код сайту. Потрібно лише один раз додати на сайт код Диспетчера тегів, а решту вже можна впроваджувати в особистому кабінеті GTM;
- Зменшення коду на сторінках веб-сайту;
- Зручний та простий у використанні інтерфейс;
- Простота тестування. Режим попереднього перегляду дозволяє маркетологам легко перевіряти коректність роботи тегів;
- Сервіс безкоштовний.
Перш ніж перейти до встановлення, розберемося у визначеннях:
- Контейнер– це фрагмент JS-коду, що розміщується на всіх сторінках сайту. Усередині контейнера міститься інформація про теги, які запускаються внаслідок виконання певних правил, заданих у тригерах та змінних;
- Тег– фрагмент коду сайту, який дозволяє відстежувати трафік та аналізувати поведінку користувачів, конверсію тощо (наприклад, код Яндекс Метрики);
- визначають, коли потрібно активувати тег у веб-контейнері;
- Змінні– це пара «ім'я-значення», яка використовується в тригері як умова, за якої спрацьовуватиме тег.
Як встановити Google Tag Manager на сайт
1. Зареєструйте обліковий запис у Google
Якщо ваш обліковий запис Google вже зареєстровано і ви авторизовані, пропустіть цей крок. Якщо ні – авторизуйтесь або створіть обліковий запис.
2. Створіть обліковий запис у GTM
Після авторизації в Google можна переходити до створення облікового запису в GTM. Перейдіть на сторінку Google Tag Manager і натисніть кнопку «Створити обліковий запис», потім вкажіть вигадану назву облікового запису та натисніть кнопку «Далі».
Малюнок 1
У вікні вкажіть придуману назву контейнера і виберіть, де він буде використовуватися. У нашому випадку, це кнопка «Веб-сайт». Після цього натисніть кнопку «Створити».
Малюнок 2
Малюнок 3
3. Додайте на сайт отриманий код Диспетчера тегів
Після того, як ви приймете угоду про використання, з'явиться вікно з кодом.
Малюнок 4
Виділіть та скопіюйте код у файл txt. Після цього натисніть на кнопку «ОК» у самому низу вікна.
Далі у файлі шаблону сайту, в якому у вас знаходиться блок, вставте код із верхнього блоку якомога ближче до початку.
Малюнок 5
Код із нижнього блоку вставте безпосередньо після тега, що відкриває.
Малюнок 6
Після того, як ви виконаєте ці дії, натисніть на панелі GTM на кнопку «Опублікувати».
Малюнок 7
4. Протестуйте коректність роботи GTM
Далі важливо перевірити, чи все ви зробили правильно. Для цього можна скористатись плагіном Google Tag Assistant Recordings для браузера Chrome. Встановіть це розширення, перейшовши за посиланням .
Після встановлення на панелі розширень браузера Chrome з'явиться піктограма Google Tag Assistant. Щоб перевірити коректність роботи встановленого на сайт GTM, потрібно перейти на свій сайт і натиснути на цей значок.
Малюнок 8
Зі скріншота бачимо, що значок зеленого кольору, це означає, що установка Диспетчера тегів пройшла успішно. Якщо значок жовтого або червоного кольору – тег розміщено помилково.
Рекомендації Google
Малюнок 9
Підключення Google Analytics через GTM
Тепер почнемо безпосередньо підключення Google Analytics через GTM.
1. Зареєструйте Google Analytics
Якщо на сайті вже встановлена аналітика, цей пункт можна пропустити. Якщо ні, ознайомтеся з тим, як зареєструвати Google.Analytics і пройдіть реєстрацію.
Зверніть увагу! Після реєстрації Google Analytics код на сайті розміщувати не потрібно. Нам трохи пізніше знадобиться лише ідентифікатор відстеження Google Analytics. Якщо Google.Analytics зареєстрований раніше і на сайті вже розміщено код, після підключення Google.Analytics через GTM раніше розміщений код аналітики можна прибирати.
2. Увійдіть у зареєстрований раніше обліковий запис у GTM і клацніть на посилання «Додати новий тег»
Малюнок 10
3. Виберіть тип тега
У цьому випадку нам потрібний Universal Analytics.
Малюнок 11
4. Вкажіть ідентифікатор відстеження сайту в Google Analytics та тип відстеження – «Перегляд сторінки»
Малюнок 12
Ідентифікатор відстеження ресурсу можна переглянути в налаштуваннях Google Analytics.
Малюнок 13
5. Вкажіть тригер All Pages
Щоб тег спрацьовував на всіх сторінках, вкажіть тригер All Pages.
Малюнок 14
6. Збережіть внесені дані
Малюнок 15
7. Вкажіть ім'я тега та натисніть кнопку «Зберегти»
Малюнок 16
8. Перевірте коректність роботи тега
Для цього натисніть на стрілочку поруч із кнопкою «Опублікувати» та виберіть «Попередній перегляд».
Малюнок 17
У «Попередньому перегляді» контейнер зі змінами буде доступний лише у вашому браузері.
Якщо контейнер відображається під рядком "Tags Not Fired On This Page", тег на сторінці не спрацював. Необхідно перевірити всі налаштування та при необхідності виправити допущені помилки.
Якщо контейнер з'явився під рядком "Tags Fired On This Page", Universal Analytics встановлено без помилок.
Малюнок 18
9. Опублікуйте Universal Analytics
Малюнок 19
Таким чином, ми підключили на сайт Google Analytics через GTM без втручання у вихідний код сторінок.
Підключення Яндекс Метрики через GTM
Для підключення Яндекс Метрики виконайте ті ж дії, що і для Google Analytics, але так як за замовчуванням Яндекс Метрики в GTM немає, при виборі продукту вкажіть «HTML користувача».
Малюнок 20
Внаслідок цього з'явиться вікно з порожнім полем.
Малюнок 21
У цю HTML форму необхідно вставити код лічильника вашої Метрики.
Якщо на сайті вже встановлена Яндекс Метрика, скопіюйте код лічильника з вихідного коду сторінки. Якщо ні, ознайомтеся з тим, як створити та налаштувати лічильник Яндекс Метрики .
Зверніть увагу! Як і у випадку з Google Analytics, код на сайті розміщувати не потрібно. Отриманий код при налаштуванні Яндекс Метрики потрібно скопіювати і додати до вікна «Користувачський HTML», що з'явилося на попередньому етапі.
Малюнок 22
Перед публікацією перевірте коректність роботи тега, натиснувши кнопку «Попередній перегляд».
Малюнок 23
Якщо в режимі попереднього перегляду контейнер розміщено під рядком "Tags Fired On This Page", значить, все налаштовано правильно. Якщо контейнер показується під рядком "Tags Not Fired On This Page", тег не спрацював, швидше за все, при підключенні була допущена помилка.
Малюнок 24
Після того як ми переконалися, що тег у попередньому режимі спрацював, натискаємо «Опублікувати».
Таким чином ми підключили на сайті Яндекс Метрику без втручання у вихідний код сторінок.
Якщо на вашому сайті ще не встановлено GTM, ви зможете встановити та налаштувати його, дотримуючись наших інструкцій. А ми, у свою чергу, продовжимо писати про те, як за допомогою GTM аналізувати трафік, конверсії та поведінку користувачів.
Google Менеджер тегів дозволяє налаштовувати та розгортати теги, у тому числі для Google Реклами , Google Аналітикиі Floodlight, а також сторонні. Щоб скористатися Менеджером тегів, виконайте такі дії:
Обліковий запис- Вищий рівень ієрархії в Менеджері тегів. Як правило, для компанії достатньо одного облікового запису. В обліковому записі Менеджера тегів є один або кілька контейнерів. Існують типи контейнерів для сайтів, AMP-сторінок, додатків Android та iOS.
Як створити аккаунт та контейнер
При першому завантаженні контейнера ви побачите запрошення додати фрагмент коду на сайт або розпочати роботу з Менеджером тегів у рамках SDK для вибраної платформи. Ви можете фрагмент коду відразу або натиснути ОКзробити це після налаштування контейнера.
Як додати контейнер до існуючого облікового запису
Встановлення контейнера
- Розмістіть верхній фрагмент коду (що починається з