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-код Яндекс Метрики

Cоздание и публикация тега в 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. Наши специалисты быстро вникнут в суть проекта, дадут полезную рекомендацию и помогут в реализации ваших идей 😉