с использованием Google Tag Manager и шаблона тега (Yandex Metrica от Дэвида Вальехо, автора популярного блога thyngster.com и расширения Yandex Metrica Debugger).
Не так давно в GTM появилось еще одно решение, позволяющее добавить счетчик Яндекс Метрики на все отслеживаемые страницы сайта - официальный шаблон тега от Яндекса.
Примечание: если у вас уже установлен счетчик Яндекс Метрики и на сайте, но вы хотите попробовать новый шаблон тега, выполняйте все настройки без публикаций. Добавление счетчика несколькими способами приведет к задубливанию данных. Либо же в шаблоне тега используйте тестовый счетчик Метрики с другим идентификатором.
Для его использования перейдите в раздел Теги и откройте галерею общедоступных шаблонов:
Галерея общедоступных шаблонов
В строке поиска введите yandex metrica. Из оставшихся результатов выберите официальный шаблон тега Official Yandex Metrica (верифицированный автор - yandex):
Official Yandex Metrica
Добавьте его в свою рабочую область:
Добавление в рабочую область
Шаблоны сторонних поставщиков в этой общедоступной галерее Google Tag Manager не предоставляются компанией Google. Google не дает никаких гарантий и не принимает на себя обязательств в отношении эффективности, качества и содержимого сервисов и приложений, предоставляемых в шаблонах. Но поскольку автор данного решения является верифицированным (подтверждено, что yandex управляет своими доменами), мы можем использовать шаблон тега без каких-либо опасений.
В завершение нажмите кнопку Добавить:
Добавить
После этого в вашем контейнере появится возможность использования шаблона тега. Он имеет английский язык интерфейса (решение ориентировано на международную аудиторию). Это может усложнить первичную настройку для интернет-маркетолога и владельца сайта.
Настройки тега
Давайте подробнее разберем Official Yandex Metrica.
Поле "Counter ID"
Counter ID - идентификатор Яндекс Метрики, который можно найти в интерфейсе вашего счетчика:
Идентификатор счетчика Яндекс Метрики
В отличие от другого способа установки (через Пользовательский HTML тег), в этом шаблоне тега вам нужно всего лишь скопировать идентификатор счетчика, а не весь код Яндекс Метрики. Далее все настройки выполняются через соответствующие переключатели и выбор нужного пункта внутри шаблона.
Опция Action to perform содержит список всех доступных действий для отслеживания с помощью Яндекс Метрики. Каждый из них имеет свой собственный набор параметров:
Action to perform
Install Metrica on site (init - инициализация счетчика);
Add file extension (addFileExtension - метод для отслеживания загрузки файлов с заданными расширениями);
Send information about outbound link click (extLink - метод для отправки информации о переходе по внешней ссылке);
Send info about file downloaded (file - метод для отправки информации о загрузке файла);
First party params (firstPartyParams - метод для отправки информации о посетителях сайта для улучшения работы рекламных алгоритмов и более точного анализа их поведения на сайте);
First party params hashed (firstPartyParamsHashed - метод для отправки контактной информации посетителей сайта с возможностью самостоятельного хеширования данных);
Hit (hit - метод для отправки отправки данных о просмотре. Обычно используется на страницах, реализованных с использованием AJAX или и Flash);
Not bounce (notBounce - метод для передача информации о том, что визит пользователя не является отказом);
Params (params - метод передачи произвольных параметров визита);
Reach goal (reachGoal - метод для передачи информации о достижении цели);
Set user id (setUserID - метод для передачи идентификатора посетителя сайта, заданного владельцем сайта);
User params (userParams - метод передачи произвольных параметров посетителя сайта).
Для каждого из вышеприведенных методов вы можете создать отдельный тег и задать для него триггер отслеживания. Таким образом, вам больше не нужно добавлять отдельные теги типа Пользовательский HTML и на каждое действие вставлять код JavaScript с соответствующим набором параметров, характерных для этого метода. Благодаря официальному шаблону тега от Яндекса все настраивается с помощью параметров. Нет необходимости в шаблонном универсальном коде.
Если вы устанавливаете счетчик Яндекс Метрики с помощью данного шаблона, то первый тег обязательно должен быть с Install Metrica on site (init).
В шаблоне для Install Metrica on site (init) доступно три типа тега:
Tag type
1. Default full build (tag.js) - полная сборка по умолчанию (tag.js)
JavaScript-библиотека, отвечающая за работу счетчика Яндекс Метрики, загружается с URL https://mc.yandex.ru/metrika/tag.js. Библиотека может быть загружена асинхронным (рекомендуется) и синхронным способом, однако, ее функционал при этом остается неизменным. Для создания и управления счетчиком используется метод ym. Он создается в коде загрузки:
Именно этот тип тега является наиболее популярным и распространенным.
2. Basic international build (int.js) - базовая международная сборка (int.js)
JavaScript-библиотека, отвечающая за работу счетчика Яндекс Метрики, загружается с URL https://mc.yandex.com/metrika/int.js
3. Full build from alternative CDN (mc.webvisor.org) - полная сборка из альтернативного CDN (mc.webvisor.org)
JavaScript-библиотека, отвечающая за работу счетчика Яндекс Метрики, загружается с URL https://mc.webvisor.org/metrika/tag_ww.js
Настройка Ecommerce позволяет в шаблоне тега включить или выключить отслеживание электронной коммерции, а также переопределить имя контейнера уровня данных, установленное по умолчанию на dataLayer:
Ecommerce
Эта опция дублирует интерфейсную настройку электронной коммерции в вашем счетчике Яндекс Метрики:
Электронная коммерция в интерфейсе Яндекс Метрики
Чтобы активировать функцию Вебвизора (подробные записи действий посетителей на сайте в рамках сеанса - движения мышью, прокручивание страницы и клики), поставьте галочку напротив Enable Session Replay feature:
Включение Вебвизора
Раскрыв Advanced Metrica Settings, вы увидите дополнительные настройки параметров инициализации счетчика:
Accurate track bounce (accurateTrackBounce) - точный показатель отказов.
Параметр может принимать значения:
true (значение по умолчанию) - включить точный показатель отказов, событие о неотказе засчитывается через 15000 мс (15 с);
false - не включать точный показатель отказов;
Record iframe contents without a tag inside(childIframe) - запись содержимого iframe без счетчика в дочернем окне. Значение по умолчанию - false (выключено).
Collect data for click map (clickmap) - сбор данных для карты кликов. Значение по умолчанию - true (включено).
Disable automatically sending data during tag initialization (defer) - отключение автоматической отправки данных при инициализации счетчика. Значение по умолчанию - false (выключено).
params - параметры визита, передаваемые во время инициализации счетчика.
userParams - параметры посетителей сайта, передаваемые во время инициализации счетчика.
Track hash changes in the address bar (trackHash) - отслеживание изменений хеша в адресной строке браузера. Значение по умолчанию - false (выключено).
Track clicks on outbound links (trackLinks) - отслеживание переходов по внешним ссылкам. Значение по умолчанию - true (включено).
Значения этих параметров при инициализации счетчика вы можете увидеть в интерфейсе Яндекс Метрике в итоговом коде:
Параметры инициализации счетчика в интерфейсе Яндекс Метрики
Trusted domains (trustedDomains) - доверенные домены для записи содержимого дочернего окна iframe. Содержит адрес домена родительского окна.
Whether to check if the tag is ready (triggerEvent) - проверка готовности счетчика. Значение по умолчанию - false (выключено).
Установка Яндекс Метрики
После ознакомления со всеми доступными настройками шаблона тега Official Yandex Metrica вам необходимо задать собственную конфигурацию. Если на вашем сайте используется электронная коммерция (и она настроена!), то активируйте соответствующую опцию в настройках. Если желаете записывать действия посетителей на сайте в рамках сеанса - активируйте Вебвизор. Если необходимо отслеживать изменения хеша в адресной строке браузера - включите Track hash, и так далее.
Примечание: включив определенные настройки в шаблоне тега, не забудьте активировать эти же опции в интерфейсе вашего счетчика Яндекс Метрики!
Первый тег, который должен быть у всех владельцев счетчика Яндекс Метрики - это тег с типом Install Metrica on site (init). Используйте полную сборка по умолчанию (tag.js). В качестве триггера активации используйте триггер типа Инициализация (Initialization). Поскольку на моем сайте настроена электронная торговля, то я включил соответствующую опцию в настройках шаблона тега.
Таким образом, вместо такой настройки с помощью тега типа Пользовательский HTML:
Добавление счетчика Метрики через "Пользовательский HTML" тег
Таким образом, итоговый тег Яндекс Метрики с инициализацией счетчика может выглядеть так:
Тег Яндекс Метрики (Official Yandex Metrica)
Сохраните тег. Перед публикацией контейнера Google Tag Manager вы можете проверить корректность настройки, активировав режим предварительного просмотра. На шкале событий выберите триггер инициализации и посмотрите, чтобы в этот момент тег Official Yandex Metrica был активирован:
Активированный тег Official Yandex Metrica
Нажав на него, вы можете посмотреть детальные сведения о теге (настройки конфигурации):
Детальные сведения о теге
Если через некоторое время вы увидели данные о своем переходе в интерфейсе Яндекс Метрики, значит все настроено корректно. Вы можете опубликовать контейнер Google Tag Manager для всех пользователей.
Отслеживание событий
Мы с вами подробно разобрали все настройки официального шаблона тега Яндекса и добавили счетчик Метрики через тег Official Yandex Metrica. Теперь я хочу показать вам простой пример отслеживания JavaScript-события (методом reachGoal).
Любое действие, которое можно отслеживать на сайте с помощью Google Tag Manager, выполняется по одному и тому же сценарию:
создается триггер отслеживания (на конкретное событие - клик по кнопке, отправку формы, скроллинг, просмотр видео и т.д. и т.п.);
создаются или активируются переменные для уточнения этого события (дополнительное условие триггера) или передачи параметров события в теге Метрики;
создается новая цель типа JavaScript-событие в интерфейсе Яндекс Метрики;
создается тег типа Пользовательский HTML и в него вставляется скопированная из интерфейса Метрики конструкция JavaScript.
С помощью шаблона тега Official Yandex Metrica настройка события несколько упрощается - теперь нет необходимости использовать тег типа Пользовательский HTML и вставлять полную конструкцию JavaScript-события. Достаточно использовать идентификатор цели, полученной в интерфейсе после создания цели. А если необходимо передавать параметры события - используются настройки Advanced Metrica Settings.
В качестве примера давайте настроим отслеживание отправки формы на скачивание моей электронной книги Google Tag Manager на странице learn.osipenkov.ru/gtm-book:
Пример отслеживания отправки формы
При клике на кнопку Получить бесплатно посетителю сайта открывается окно формы, заполнив которую, ему на электронную почту приходит электронная книга о диспетчере тегов Google. Именно это действие я и буду отслеживать. Но не просто сам факт отправки формы, но и в качестве бонуса я еще передам в Яндекс Метрику параметр события (точное время совершения события), чтобы продемонстрировать расширенные возможности шаблона тега Official Yandex Metrica.
Для этого сначала необходимо создать пользовательскую переменную типа Собственный код JavaScript, и вставить туда нижеприведенный код:
1
2
3
4
5
6
7
8
function(){
var Data=new Date();
var Hour=Data.getHours();
var Minutes=Data.getMinutes();
var Seconds=Data.getSeconds();
var Time=Hour+":"+Minutes+":"+Seconds;
return Time;
}
В Google Tag Manager это будет выглядеть так:
Собственный код JavaScript
Задайте название переменной и сохраните ее.
Чуть усовершенствованный код, который решает проблему "0" (если количество минут или секунд меньше 10, перед ними будет добавлен ведущий ноль, и время будет отображаться в корректном формате, например, как 16:01:03, а не 16:1:3):
1
2
3
4
5
6
7
8
function getTime(){
var Data=new Date();
var Hour=Data.getHours().toString().padStart(2,'0');
var Minutes=Data.getMinutes().toString().padStart(2,'0');
var Seconds=Data.getSeconds().toString().padStart(2,'0');
var Time=Hour+":"+Minutes+":"+Seconds;
return Time;
}
В этой публикации я не буду описывать весь процесс создания триггера для отслеживания отправки формы. Предполагается, что вы это делать умеете. Либо же вы можете прочитать мое руководство по отслеживанию отправки форм девятью различными способами (обновление - в электронной книге Google Tag Manager самый актуальный материал).
Триггер отслеживания отправки формы для моего примера будет таким:
Триггер специального события
Теперь необходимо перейти в интерфейс Яндекс Метрики и создать цель типа JavaScript-событие, задав идентификатор цели:
Создание цели в Яндекс Метрике
Ранее, чтобы отслеживать такие события в Google Tag Manager, мы создавали тег типа Пользовательский HTML и в него между тегами </script><script> вставляли код цели, скопированный из интерфейса:
Отслеживания цели (Пользовательский HTML тег)
А если вместе с событием нам нужно было еще передать параметр события, то конструкция приобретала достаточно сложный вид:
Отслеживание JavaScript-события с параметром события
Чем больше событий, тем сложнее конструкция получалась. Теперь мы можем использовать официальный шаблон тега Яндекса и использовать метод reachGoal из списка Action to perform, чтобы отслеживать нужные события.
Для этого создайте новый тег Official Yandex Metrica и в списке Action to perform выберите Reach goal (reachGoal):
Отслеживание события - Reach goal (reachGoal)
В поле Goal ID вам необходимо вставить идентификатор цели, добавленный при создании цели в интерфейсе Метрики. В моем примере - это gtmbook:
Идентификатор цели (Goal ID)
Поскольку я буду передавать не только факт отправки формы, но еще и параметр события с точным временем совершения события, мне необходимо раскрыть раздел Advanced Metrica Settings и добавить этот параметр. В качестве имени параметра (Parameter name) вы можете задать любое произвольное значение, а вот значение параметра (Parameter value) - это та переменная, которую мы создали на предыдущем шаге.
В качестве триггера активации я использую триггер специального события. Итоговый тег события Яндекс Метрики с одним параметром события для моего примера выглядит так:
Тег события Яндекс Метрики с параметром события
Проверить настройку события можно одним из следующих способов:
использовать режим отладки Google Tag Manager;
ИЛИ
в адресной строке браузера добавьте к адресу страницы параметр _ym_debug=2 и загрузите страницу.
Проверка отправки цели с помощью режима отладки GTM
Данные о переданном параметре события вместе с JS-событием доступны в отчете Параметры событий:
Отчет "Параметры событий"
Точно таким же образом вы можете настроить и другие методы, доступные в Яндекс Метрике - addFileExtension, extLink, file, firstPartyParams, firstPartyParamsHashed, getClientID, hit, notBounce, params, setUserID, userParams. Нужно только выбрать соответствующий вариант из списка Action to perform, правильно задать настройки и триггер активации.
