fbpx

Налаштування Яндекс Метрики за допомогою Google Tag Manager

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

У цій статті ми розповімо, як за 3 хвилини встановити Яндекс Метрику на сайт за допомогою Google Tag Manager.

Порядок дій:

    • створення та налаштування лічильника Яндекс Метрики;
    • створення тега в Google Tag Manager;
    • публікація тега на вашому сайті;
    • перевірка працездатності.

Підготовка до налаштування Яндекс Метрики

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

ищем кнопку "просмотр кода страницы"

Далі комбінацією клавіш Command+F (Contrl+F) у вас відкриється віконце, де легко можна буде знайти потрібний нам елемент. Вбиваємо у вікно “Google Tag Manager” і нам має показати цей код GTM.

код GTM <head>
код GTM <body>

Якщо ви його не знайшли, тоді потрібно буде дати ТЗ програмісту, щоб він поставив код GTM на сайт. Ось так це виглядатиме у вашому кабінеті Google Tag Manager.

Натискаєте на ваш ідентифікатор і виринає вікно, його можна просто скопіювати і віддати розробнику як готове ТЗ.

идентификатор Google Tag Manager
код в кабинете Google Tag Manager

Також, є альтернативний метод зрозуміти, які метрики встановлені на сайті. Можна скористатися розширенням від Google – Tag Assistant Legacy. Виглядати це буде так.

расширение Tag Assistant Legacy

Коли ми переконалися, що GTM встановлений у нас на сайті і коректно працює, ми приступаємо до нашого завдання.

Створення та налаштування лічильника Яндекс Метрики

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

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

регистрация в яндекс метрике.

Після нескладних маніпуляцій із реєстрацією, ви потрапите в обліковий запис Яндекс Метрики.

Для того, щоб повісити веб-візор на сайт, вам потрібно створити лічильник. Покроково це виглядатиме ось так. Прописуєте ім’я лічильника, адресу сайту, часовий пояс. Обов’язково потрібно поставити ВКЛ у розділі “Вебвізор, карта скролінгу, аналітика форм” та натиснути СТВОРИТИ.

создание счетчика Яндекс Метрики

Після створення у вас з’явиться унікальний код веб-візора, який потрібно скопіювати і пізніше вставити в тег Google Tag Manager.

HTML-код Яндекс Метрики

Створення та публікація тега в Google Tag Manager

Створюємо новий тег. Натискаємо на кнопку “Створити”

создаем тег в Google Tag Manager

Прописуємо зрозумілу вам назву тега.

прописываем название тега

У типі тега вибираємо користувальницький HTML.

тип тега - пользовательский HTML

Вставляємо ваш код Яндекс Метрики у HTML полі.

вставляем код вебвизора в HTML поле

Далі створюємо тригер. Вибираємо “Перегляд сторінки” (All Pages) і зберігаємо тег.

создаем триггер
сохраняем тег

ВАЖЛИВО! Не забудьте опублікувати всі ваші новостворені теги, тригери та будь-які інші зміни. Це робитиметься так.

нажимаем на кнопку "отправить"
нажимаем на кнопку "опубликовать"

Оптимізація HTML коду

Також, ми поділимося невеликим лайфхаком в оптимізації того самого HTML коду Яндекс Метрики.

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

Ось така була продуктивність сайту наших клієнтів, коли ми встановили код Яндекс Метрики.

уровень производительности как только поставили код Метрики

А ось що стало колись трохи оптимізували код, всього-то поміняли один рядок.

производительность после оптимизации кода

Відразу по суті, якщо ви бачите, що у вашого сайту впала продуктивність від установки Яндекс Метрики, не поспішайте її видаляти. Досить поміняти один рядок, зараз наочно покажемо як.

Потрібно замінити виділений рядок в HTML полі GTM, на один із можливих варіантів:

    • https://d31j93rd8oukbv.cloudfront.net/metrika/watch_ua.js
    • https://d31j93rd8oukbv.cloudfront.net/metrika/watch_ua.js
оптимиация HTML кода Яндекс Метрики

Після цього, через пару хвилин, потрібно буде заміряти продуктивність на будь-якому зручному для вас сервісі, ми використовували https://pagespeed.web.dev/ . Можете протестувати обидва варіанти, щоб визначити найкращий вам.

Перевірка працездатності

Обов’язково через 10 хвилин зайдіть на вашу Яндекс Метрику і протестуйте роботу Вебвізора. Потрібно просто зайти в обліковий запис Метрики і вибрати вкладку Вебвізор.

выбираем вкладку вебвизор
можем смотреть как посетители "ходят" по сайту

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

Якщо у вас виникли питання у побудові аналітики бизнесу завжди можна звернутися до Маркетингової агенції Muraha. Наші фахівці швидко вникнуть у суть проекту, дадуть корисну рекомендацію та допоможуть у реалізації ваших ідей 😉