Рассмотрим настройку системы веб-аналитики Яндекс Метрика с помощью Google Tag Manager.
Настроить Яндекс Метрику через Google Tag Manager можно тремя способами:
Разберем каждый из вариантов. Первые два варианта по сути одинаковы в плане процесса, но отличаются тем, какой код используется для внесения в пользовательский HTML тег. Третий вариант стал доступен после того, как в Google Tag Manager появилась возможность создавать свои собственные шаблоны тегов и переменных. Я разбирал пример создания собственного шаблона как раз на примере Метрики, но если вы хотите использовать готовый шаблон, то лучше использовать описанный ниже вариант.
Внедрение Яндекс Метрики через пользовательский HTML тег
Этот метод заключается в том, чтобы скопировать предложенный Яндекс Метрикой код в пользовательский HTML тег, настроить триггер и опубликовать изменения. Процесс настройки схож с настройкой Google Analytics, но если для последнего имеется возможность удобной настройки событий и т.п. через веб интерфейс выбирая необходимые параметры, то для Яндекс Метрики нам придется немного пописать код самостоятельно. Но, поверьте, это все достаточно просто и под силу не только техническим специалистам. Последовательность действий следующая.
Перед началом работы, если вы еще этого не сделали, создайте контейнер, в котором мы будем создавать необходимые теги, о том как это сделано описано в материала про настройку Google Tag Manager.
Создадим новый тег для добавления кода отслеживания Яндекс Метрики на страницы сайта. Нажмите на кнопку создания тега:
Укажите тип Пользовательский тег HTML:
Заполните поле Имя тега, Скопируйте и вставьте в поле «HTML» код счетчика Яндекс Метрики:
Получить его можно перейдя на вкладку «Код счетчика» находясь в режиме редактирования счетчика Яндекс Метрики:
После выполнения описанных операций у вас в Google Tag Manager должно получиться следующее:
Теперь добавьте триггер активации тега Все страницы затем нажмите Создать тег:
Опубликуйте или перейдите в режим отладки версии контейнера:
На этом установка кода отслеживания Яндекс Метрики на страницы сайта с помощью Google Tag Manager завершена. Перейдем к настройке фиксации событий на сайте и передачи информации в Яндекс Метрику через Google Tag Manager.
Рассмотрим следующие варианты.
1. Фиксируем клики по элементам на странице
Предположим, что на нашем сайте имеется кнопка подписки на новости и нам нужно фиксировать клики по ней в Яндекс Метрике (обратите внимание, что клик по кнопке отправки формы не всегда приводит к ее фактической отправке. Клик и Отправка формы два разных события, для примера ниже описывается клик по кнопке, а после него отправка формы). Переходим в настройки счетчика Яндекс Метрики и создадим новую цель типа JavaScript событие. В качестве дополнительных полей, описывающих фиксируемое действие можно использовать Параметры визитов Яндекс Метрики.
Обратите внимание на блок Код цели для сайта, в нем Метрика отображает инструкцию, которая должны быть выполнена, чтобы зафиксировать необходимое действие.
1 |
ym(54100117,'reachGoal','form_subscribe_send'); |
Создадим тег для передачи данных в Яндекс Метрику о клике по элементу. Нажмите кнопку создания тега, укажите имя и тип тега Пользовательский тег HTML:
Создайте для него триггер активации. В настройках триггера укажите данные об элементе, по которому пользователь выполнил клик. Для демонстрации я использую элемент с идентификатором равным button_send:
После этого сохраните триггер, вы вернетесь к настройкам тега, в поле HTML введите следующий код:
1 2 3 |
<script> ym(54100117,'reachGoal','form_subscribe_send'); </script> |
Получится примерно следующее:
Сохраните изменения, создайте версию контейнера и опубликуйте ее. Теперь информация о кликах по кнопке будет передаваться в Яндекс Метрику, сведения будут доступны в отчетах по достижениям целей.
2. Фиксируем отправку формы
Отправка формы фиксируется в том случае, если поля формы заполнены корректно и нет никаких ошибок. Создайте еще один тег необходимый для передачи данных в Яндекс Метрику. Выберите для него тип Пользовательский тег HTML, в поле HTML введите код:
1 2 3 |
<script> ym(54100117,'reachGoal','form_subscribe_send_ok'); </script> |
Этот код получен для еще одной цели в Яндекс Метрике, созданной для фиксации успешно отправленных форм (ее идентификатор отличается от того, что мы рассмотрели ранее). Добавьте триггер активации тега:
В настройках триггера укажите следующие настройки:
Обратите внимание, что настройки для триггера выбраны произвольные, для решения вашей задачи используйте значения соответствующие вашей задаче. После этого сохраните триггер, тег и опубликуйте версию контейнера.
Аналогично описанным выше вариантам можно настроить Яндекс Метрику в Google Tag Manager для фиксации прокрутки страниц, просмотров видео роликов и др. действий пользователя. Разберем другие варианты внедрения Яндекс Метрики.
Внедрение Яндекс Метрики согласно рекомендациям Яндекса
Данный метод ничем не отличается от описанного выше за исключением того, что необходимо использовать код, сгенерированный не в панели управления счетчиком, а немного измененный из официальной документации для данного варианта. Официальная справка по данному варианту доступна здесь. Ранее я подробно разбирал этот вариант внедрения, если вам интересно ознакомится с ним, то он доступен по ссылке.
Настройка Яндекс Метрики через шаблон тега в Google Tag Manager
Этот вариант внедрения (или настройки) Яндекс Метрики в Google Tag Manager стал доступен после того, как у нас появилась возможность создавать свои собственные шаблоны тегов и переменных. Заключается он в том, что перед началом настройки Яндекс Метрки необходимо в контейнер Google Tag Manager импортировать соответствующий шаблон, а далее все необходимые действия выполнять уже в нем. Выполним необходимые действия по шагам.
Перед началом работы необходимо импортировать в свой контейнер шаблон тега Яндекс Метрики. В левом меню выберите Шаблоны, затем в разделе Шаблоны тегов нажмите на Поиск в галерее:
Воспользуемся поиском и выберем все шаблоны содержащие Yandex, нам необходимо выбрать шаблон от david-vallejo-com:
Затем ознакомимся со сведениями о шаблоне, какие права ему предоставлены и необходимы для работы:
Если шаблон не вызывает доверия или по внутренним нормам безопасности не может быть использован — откажитесь от его установки или добавления в контейнер Google Tag Manager. Если вопрос не возникает, можете добавить его к себе в рабочую область. Перед тем как шаблон будет перенесен к вам, система еще раз попросит вас подтвердить, что выдаете согласие на использование необходимых разрешений для шаблона. После успешного добавления шаблона, он отображается в списке:
Для его использования переходим к списку уже имеющихся тегов, нажимаем Добавить и в блоке Специальные выбираем только что добавленный шаблон тега:
Далее вся конфигурация выполняется с помощью удобной формы, по аналогии с тегом Google Analytics. Разберем доступные параметры. Первые две опции это Method и Account ID, которые отвечают за тип отслеживания и номер счетчика Яндекс Метрики, соответственно. Информация о доступных методах доступна в документации Яндекс Метрики.
Следующий блок настроек (опций) Tracker Options:
- Disable default Data Sending — признак отключения автоматической отправки данных при инициализации счетчика
- Enable HashTracking — признак отслеживания хеша в адресной строке браузера
- Send Page To Yandex Index — запрет отправки информации о существовании страницы поисковым роботам Яндекса
- Alternative CDN — опция позволяет корректно учитывать посещения из регионов, в которых ограничен доступ к Яндекс.Метрике
За ним идут Опции отслеживания:
Это те опции, которые можно изменять при создании / изменении счетчика в панели управления, такие как: карта кликов, веб-визор и пр. В заключении конфигурации тега Яндекс Метрики в Google Tag Manager можно указать в каком режиме будет работать тег отладки ли нет, а также необходимо ли использовать передачу данных об электронной торговле в Яндекс Метрику. Комбинируя различные опции необходимо выполнить конфигурацию тега под свои задачи.
Мы рассмотрели три варианта внедрения Яндекс Метрики на сайт через Google Tag Manager. Как видите установить ее на сайт можно без внесения изменений в исходный код страниц сайта, достаточно использовать возможности Google Tag Manager