Отслеживание видео YouTube для Яндекс.Метрики
В предыдущих материалах мы с вами познакомились со способами отслеживания видео YouTube, размещенных на вашем сайте, с помощью стандартного триггера Google Tag Manager и соответствующих тегов для Google Analytics. В этой статье я расскажу, как можно настроить отслеживание видео YouTube, используя те же переменные и триггеры, но для Яндекс.Метрики.
Если вам интересно, как настраивается отслеживание видео YouTube для Google Analytics, рекомендую прочитать эти материалы:
- Отслеживание видео YouTube для Universal Analytics с помощью Google Tag Manager
- Отслеживание видео YouTube для Google Analytics 4 с помощью Google Tag Manager
Перед тем, как непосредственно перейти к настройке отслеживания, давайте определим саму логику работы - что мы хотим отслеживать и каким образом эти данные передавать в Яндекс.Метрику? Я предлагаю использовать самый простой вариант - создать на каждое действие отдельное событие в Яндекс.Метрике, и для каждого из них передавать дополнительные параметры.
Как вы уже знаете, стандартный триггер Видео на YouTube регистрирует следующие типы событий:
- Начало (Start) – пользователь начинает просмотр видео;
- Завершение (Complete) – пользователь достигает конца видео;
- Приостановка (пауза), перемотка, буферизация (Pause, Seeking, Buffering) – пользователь останавливает, перематывает видео или когда происходит буферизация;
- Ход просмотра (Progress) – пользователь проходит процентный (заданный в поле) или временный порог (время измеряется в секундах). Целые положительные числа указываются через запятую, как на скриншоте выше.
Если вы планируете отслеживать все эти события, то я рекомендую на каждое из них создать свою собственную цель в Яндекс.Метрике.
Предварительные настройки
Но перед тем, как вы это сделаете, произведите предварительные настройки в своем контейнере Google Tag Manager. Если вы никогда не настраивали отслеживание видео на YouTube, то порядок действий следующий:
- активируйте встроенные переменные;
- настройте триггер;
- создайте тег для Яндекс.Метрики.
Активация встроенных переменных
Для активации встроенных переменных необходимо перейти в раздел Переменные и активировать встроенные переменные типа Видео:
Переменные:
- Video Provider — название платформы видео (YouTube);
- Video Status — статус видео в момент регистрации события. Может быть: Start, Complete, Pause, Seek, Buffering, Progress;
- Video URL — URL-адрес, ссылку на видео YouTube (https://www.youtube.com/watch?v=...);
- Video Title — название видео;
- Video Duration — общая продолжительность видео (в секундах);
- Video Current Time — текущее время видео (в секундах), в которое произошло событие;
- Video Percent — значение воспроизведенного видео (в процентах) на момент, когда сработало событие;
- Video Visible — значение видимости видео в окне браузера. Если видео отображается в области просмотра, результатом будет значение true, если же в другой области (например, в нижней части страницы, на фоновой вкладке) – false.
Настройка триггера
После активации переменных перейдите на вкладку Триггеры и создайте триггер типа Видео на YouTube:
Задайте в нем нужные настройки регистрации событий, а также установите флажок рядом с Включить поддержку JavaScript API для всех видео YouTube, чтобы активировать YouTube iFrame Player API. В результате ко всем URL видеопроигрывателя YouTube будет добавлен параметр enablejsapi = 1 для управления проигрывателем через iframe или JavaScript.
Можно выбрать один из 3 способов активации триггера по событию - Container Load (gtm.js) - после загрузки страницы, DOM Ready (gtm.dom) - после обработки модели DOM и Window Load (gtm.load) - после загрузки контента страницы. Если не уверены в настройке, оставьте вариант по умолчанию.
Ход просмотра относится ко всей длине видео. Поэтому когда вы настроите триггер на процентные пороги (например, на 25%, 50%, 75%), или на временные пороги (например, на 15, 30, 60, 120 секунд), он сработает и в случае перемотки пользователем на соответствующую метку. Другими словами, условия непрерывного просмотра видео здесь нет.
Примечание: не на всех сайтах стандартный триггер Google Tag Manager работает "из коробки". Все зависит от вашего сайта и способа установки видео внутри проигрывателя. Бывают ситуации, когда видео YouTube запускается автоматически на странице, из всплывающего окна, при нажатии на кнопку или какого-то специального плагина. Из-за этого GTM не всегда может отслеживать такие реализации. В этом материале я целенаправленно опускаю наличие таких проблем (и способы их решения) и сосредотачиваюсь на настройке отслеживания для Яндекс.Метрики, предполагая, что у вас срабатывает триггер Видео на YouTube как надо.
Создание целей в Яндекс.Метрике
Чтобы создать цель на каждое событие, перейдите в интерфейс Яндекс.Метрики в раздел Цели и создайте цель:
Выберите цель типа JavaScript-событие. В поле Идентификатор цели добавьте значение, соответствующее одному из событий. Например, если вы отслеживаете событие начала просмотра видео, то таким идентификатором может быть start:
Для завершения просмотра видео идентификатор цели можно задать complete, для паузы - pause, для перемотка - seek, для буферизации - buffering, для хода прогресса - progress:
Переменная таблицы поиска
Передавать в Яндекс.Метрику дополнительные данные по событиям мы будем с помощью параметров визитов. А для того, чтобы они отображались в отчетах в понятном для нас виде, необходимо в Google Tag Manager создать пользовательскую переменную типа Таблица поиска. Принцип работы переменной схож с конструкциями if..else и switch-case. Ее конфигурация будет выглядеть так:
Как работает таблица поиска?
- задается входная переменная. В этом примере - {{Video Status}};
- далее идет проверка по таблице поиска и входным данным;
- если переменная {{Video Status}} принимает одно из значений из таблицы (start, pause, progress и т.д.), то входная переменная {{Video Status}} примет значение из поля Результат. В этих полях мы прописываем названия по своему усмотрению;
- если значение переменной {{Video Status}} не найдено среди таблицы поиска, то будет использовано значение по умолчанию (если указано в настройках). В этом примере - {{Video Status}}.
Сохраните переменную, задав ей название (например: Video Actions). В дальнейшем она понадобится вам для параметров визита.
Тег Яндекс.Метрики
Перейдите в раздел Теги и создайте тег типа Пользовательский HTML. Вставьте нижеприведенный код между тегами <script></script>
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var visitParams = {'youtube': {'{{Video Actions}}': { 'Название видео': '{{Video Title}}', 'URL видео': '{{Video URL}}', 'Текущее время видео в секундах': '{{Video Current Time}}', 'Общая продолжительность видео': '{{Video Duration}}', 'Сколько % просмотрел видео': '{{Video Percent}}', 'Видимость видео': '{{Video Visible}}' }}}; //записываем в переменную visitParams объект со значениями нужных нам событий ym(XXXXXXXX, 'reachGoal', '{{Video Status}}', visitParams); </script> |
, где вместо XXXXXXXX укажите идентификатор вашего счетчика Яндекс.Метрики.
Данный код работает следующим образом - в переменной visitParams мы объявляем иерархическую структуру параметров визитов вида youtube -> название зарегистрированного события в удобочитаемом виде (используется переменная таблица поиска) -> параметры события (Название видео, URL видео, Текущее время видео в секундах, Общая продолжительность видео, Сколько % просмотрел видео пользователь и Видимость видео), значения которых извлекаются с помощью встроенных переменных Видео.
Затем прописывается стандартная строка с JavaScript-событием ym(XXXXXXXX, 'reachGoal', '{{Video Status}}', visitParams), где в качестве четвертого аргумента как раз и идет наш объект visitParams с параметрами визита. А с помощью встроенной переменной {{Video Status}} мы создаем универсальную конструкцию для отслеживания конверсий в Яндекс.Метрике, поскольку вместо нее будет подставляться одно из объявленных ранее значений события - начало просмотра видео (start), завершение просмотра видео (complete), пауза (pause), перемотка (seek), буферизация (buffering) и ход прогресса (progress). Как только пользователь совершит какое-либо событие из вашего списка, сработает триггер, который активирует тег и передаст JavaScript-событие (цель) в Яндекс.Метрику со всеми перечисленными параметрами события.
Таким образом, у нас получается универсальная конструкция отслеживания всех событий, связанных с видео на YouTube, настроенная для Яндекс.Метрики с помощью всего одного триггера и одного тега!
В Google Tag Manager это будет выглядеть так:
В качестве триггера активации используйте триггер Видео на YouTube, созданный на предыдущем шаге. Сохраните тег.
Проверить корректность передачи данных и срабатывания целей Яндекс.Метрики с помощью режима предварительного просмотра и специального расширения для Google Chrome, которое называется Яндекс.Метрика Инспектор. Перейдите на любую страницу вашего сайта, где установлен проигрыватель YouTube. Начните взаимодействовать с видео. Вы увидите, как на шкале событий GTM появятся события YouTube Video и на них будет срабатывать ваш тег Яндекс.Метрики.
Параллельно режиму отладки откройте консоль вашего браузера с расширением Яндекс.Метрика Инспектор. Оно должно зафиксировать достижение целей с параметром визита. Раскрыв одну из них, вы увидите условие срабатывания и сам параметр визита:
В нем фиксируются все параметры, которые вы объявили в пользовательском HTML теге в виде иерархической структуры, где первым уровнем вложенности является youtube, вторым - название события на русском языке (в зависимости от его срабатывания), а третьим - сами параметры видео (переменные YouTube). Все эти значения будут отображаться в отчете Содержание - Параметры визитов:
Открыв отчет, вы увидите параметр визита со значением youtube:
Нажав на плюсик, вы провалитесь на уровень ниже, до конкретного события - Начало, Перемотка, Пауза, Завершено и т.д.:
Внутри каждого события будут отображаться все параметры события, перечисленные в теге Яндекс.Метрики - что это за видео, как называется, какова его длительность и т.д.:
В дальнейшем вы можете использовать параметры визита при создании собственных сегментов Яндекс.Метрики.
Помимо параметров визита, которые доступны в отчете Параметры визитов, вы еще настроили отслеживание стандартных конверсий. Через некоторое время данные по ним отобразятся в Яндекс.Метрике в отчете Конверсии:
Резюме
Отслеживание видео на YouTube для Яндекс.Метрики с помощью Google Tag Manager не так сильно отличается от настройки Universal Analytics и Google Analytics 4. И там, и там используются встроенные переменные и стандартный триггер. Отличие только в итоговом теге для систем аналитики - для GA3/GA4 используются готовые шаблоны, а для Яндекс.Метрики, как правило, Пользовательский HTML тег, и параметры визита. Сложность заключается только в правильном составлении окончательной конструкции объекта с учетом четвертого аргумента visitParams. Но она достаточно простая, универсальная для всех проектов и не должна вас пугать. За счет этого значительно упрощается отслеживание не только параметров визита, но и всех целей, которые вы создали в Яндекс.Метрике. Для этого достаточно одного триггера и одного тега GTM!