Ставрополь,
ул. Социалистическая 1а
Карта проезда
+7(8652) 44-07-27
Обратный звонок

07.06.20182018-06-07
4874

Настройка Яндекс Метрики с помощью Google Tag Manager

Рассмотрим, как правильно установить и настроить счетчик веб-аналитики Яндекс Метрики используя Google Tag Manager.

Процесс достаточно простой на первый взгляд и описан в документации Яндекса. Но там есть ошибка, если у пользователя отключен JavaScript данные при такой установке не передадутся. Необходимо понять специфику HTML-5 и тот факт, что пиксель картинка в теге noscript не загрузится в куда и должен размещается сам код метрики. Для того чтобы отследить подобных пользователей нам необходимо вынести пиксель, после открытия тега body.

Данная документация предоставлена в самом диспетчере тегов, в нем присутствует второй код отслеживания через пиксель, который должен размещается в body.

Установка Google Tag Manager

Установка основной части кода Яндекс Метрики

Ставим сначала код аналитики срабатываем через JS. Заходим в наш GTM, создаем новый тег, выбираем пользовательский HTML и копируем туда наш код. Затем вырезаем фрагмент, находящийся внутри noscript. В качестве триггера активации ставим All Pages и сохраняем.

Установка кода Метрики

Создаем триггер активации

Вначале создаем переменную «Собственный код JavaScript» которая будет проверять наличие JS в браузере. Прописываем следующий код:

 
function () {
	return 'enable';
}
 

Установка пикселя Яндекс Метрики

Создаем новый тег «Пользовательское изображение». Ставим галочку включить блокировку кэша, так как все браузеры пытаются картинку сохранить у себя в кэш. Добавляем параметр блокировки кэша, называете как вам удобно. Это необходимо, чтобы картинка постоянно загружалась и только в этом случае данные будут поступать в аналитику. Прописываем URL картинки, https://mc.yandex.ru/watch/0000000 (не забывает подставить свой номер счетчика вместо нулей). Для активации выбираем ранее созданный триггер в моем случаи «нет JS».

Создаем для него триггер активации, просмотр некоторых страниц, выбираем созданную ранее переменную, устанавливаем «не равно» enable.

Теперь вы будите получать аналитические данные в даже если пользователь отключил JS.

Проверяем

Отключаем в браузере поддержку JS, открываем консоль и видим, что теперь картинка загружает.

Установка целей Яндекс Метрика через GTM

Установив основной код счетчика Метрики можно приступить к настройке отправки события. Для создания цели по JavaScript событию переходим в настройки, выбираем «Цели», «Добавить цель».

Настройка целей

Выбираем тип JavaScript событие, прописываем название и указываем идентификатор цели.

Создание цели в метрике

Затем в Google tag manager создаем тег пользовательский html и указываем следующий код предварительно заменив идентификатор цели и номер счетчика Яндекс Метрики на ваш:

 

  yaCounterХХХХХХХХ.reachGoal('идентификатор цели')

 
Создаем тег цели в google tag manager

Далее необходимо создать триггер активации по которому будет срабатывать событие. В качестве триггера выбираем «Клик», «Все элементы». В открывшемся окне выбираем некоторые клики. В данном случаи будет делать активацию по «Сlick Classes» равно.

Триггер активации

Необходимо определить class по которому будет срабатывать триггер, в нашем случаи — это кнопка добавления в корзину. Открываем консоль браузера выделив кнопку и находим class, копируем его возвращаемся в GTM и вставляем в поле.

Сохраняем наш триггер и тег и переходим в режим предпросмотра. Если все работает опубликовываем внесенные изменения.

Сделайте репост: