Отслеживание HTML5 видео и аудио с помощью GTM

Новый способ отслеживания элементов мультимедиа HTML (видео и аудио) с помощью Google Tag Manager и шаблона тега HTML Media Elements Tracker.

Данный материал основан на недавно опубликованной в сети библиотеке Javascript от Дэвида Вальехо (David Vallejo), автора блога thyngster.com и многих полезных инструментов для веб-аналитики, включая расширения для браузера Google Chrome Yandex Metrica Debugger и GTM/GA Debug. Все оригинальные ссылки и комментарии автора сохранены.

• Оригинал статьи (на английском языке);
• Проект на GitHub;
• CDN JSDelivr;
• Шаблон тега HTML Media Elements Tracker (Google Tag Manager).

Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента. Но с развитием интернета поддержка мультимедийных элементов в современных браузерах стала необходима. С выходом HTML5 в 2014 году были разработаны и введены новые синтаксические особенности, в том числе поддержка <video> и <audio>. Один тег добавляет, воспроизводит и управляет настройками видеозаписи на веб-странице, а другой аудио. Оба поддерживаются во всех современных браузерах, однако список поддерживаемых аудио и видеокодеков от браузера к браузеру отличается. Подробнее о поддерживаемых форматах <video> и <audio> читайте в этой статье.

В чем нюанс такого отслеживания в Google Tag Manager? Он заключается в том, что диспетчер тегов Google с помощью встроенных переменных видео и триггера Видео на YouTube умеет отслеживать только свой собственный видеоплеер YouTube. Хоть он и является одним из самых популярных и часто используемых проигрывателей, на сайте могут быть встроены и другие, например от Vimeo, Brightcove, JW Player или обычный проигрыватель HTML5. И тогда воспользоваться стандартными переменными, триггерами и тегами GTM у вас не получится. Нужно будет искать другое решение. Аналогично и с аудио. Об отслеживании последних (проигрывателей HTML5) как раз и пойдет речь в этом материале.

О новой библиотеке

Дэвид Вальехо в середине июня опубликовал проект на GitHub и у себя в блоге документацию по использованию его новой библиотеки HTML5 - Audio/Video Events Tracking Library, которую он начал разрабатывать еще в 2019 году, но которую выложил в открытый доступ только сейчас. Библиотека доступна в форматах AMD, UMD, IIFE и ESM. Автор также предоставляет доступ к CDN через jDelivr (см. ссылки выше).

Несмотря на то, что эта библиотека изначально была создана для Google Tag Manager, она может выводить данные для некоторых других систем управления тегами. В настоящее время поддерживается:

• Google Tag Manager - dataLayer.push()
• Tealium - utag.link()

Модель данных в диспетчере тегов Google основана на том же триггере, что и Видео на YouTube. Такая реализация делает доступным использование текущих встроенных переменных видео в GTM и существенно упрощает настройку отслеживания контента HTML5. А вместе с событием будут отправляться ​​дополнительные данные, включая: название видео, продолжительность, статус видимости, ход просмотра и т.д.

Вы можете убедиться в этом самостоятельно, перейдя на демо-страницу и активировав расширение GTM/GA Debug, в котором после запуска тестового видео в консоли разработчика на соответствующей вкладке будет отображаться итоговый уровень данных:

Библиотека умеет определять не только текущие видео на странице, но и сможет "обнаруживать" и отслеживать недавно загруженные элементы, то есть когда видео динамически добавляется на сайт (например, проигрываемые видео в модальных окнах). Для этого в библиотеке предусмотрена отдельная настройка, которая использует Mutation Observer API.

Но это еще не все. Для упрощения настройки отслеживания HTML-элементов мультимедиа Дэвид Вальехо выпустил настраиваемый шаблон тега для Google Tag Manager. Давайте рассмотрим как он работает.

Определение видеоплеера HTML5

Прежде чем приступить к непосредственному отслеживанию взаимодействий с HTML5 видеоплеером, сначала необходимо убедиться, что на сайте размещен именно такой проигрыватель. Синтаксис для <video> на сайте выглядит так:

, где source src - тег и атрибут, через которые задается путь к вашему файлу с видео.

Примечание: у тега <video> есть большое количество других атрибутов (autoplay, controls, width, height, loop, poster и т.д.), о которых подробнее можно почитать на htmlbook.ru.

Если видео размещено описанным выше способом, то при инспектировании элемента через консоль разработчика (клавиша F12 для Google Chrome) вы увидите соответствующий тег <video>:

Это означает, что на сайте размещен обычный HTML5 проигрыватель, и решение, описываемое в этой статье, подходит для отслеживания видео.

Встраиваемые видеопроигрыватели от других сервисов, как правило, отличаются "брендированной" ссылкой, которая также отображается при инспектировании элемента. Например, встроенное на сайте через проигрыватель Vimeo видео в ссылке содержит https://player.vimeo.com :

Для роликов с rutube.ru ссылка содержит //rutube.ru/, для dailymotion.com - dailymotion.com/embed/video и т.д. Чаще всего такие видео размещаются в теге <iframe> и для их отслеживания необходимо применять другие методики. Если вы не можете найти название видеохостинга, скорее всего, это проигрыватель HTML5.

Как только вы удостоверитесь, что на вашем сайте используется именно HTML5 видеоплеер, переходите к настройке отслеживания с помощью Google Tag Manager.

Настройка в Google Tag Manager

Первое, что необходимо сделать - активировать все встроенные переменные из раздела Видео, поскольку текущее решение позволяет использовать их для отслеживания HTML5.

На следующем шаге перейдите в Шаблоны - Поиск в галерее, найдите шаблон HTML Media Elements Tracker и добавьте его в рабочую область:

После этого перейдите в раздел Теги и создайте новый тег HTML Media Elements Tracker, который находится в разделе Специальные.

Обзор настроек шаблона тега

Настройте конфигурацию тега исходя из своих потребностей:

Вы можете отслеживать следующие медиа события (HTML Audio/Video Events), просто установив рядом с ним галочку:

• Start (пользователь начинает просмотр видео);
• Play (пользователь запустил видео);
• Complete (пользователь посмотрел видео до конца, 100%);
• Pause (пользователь останавливает видео);
• Errors (есть ли ошибки при воспроизведении видео);
• Seek (пользователь перематывает видео);
• Mute (включен ли звук в видео);
• Unmute (отключен ли звук в видео);
• Progress (пользователь проходит процентный порог, заданный в настройках)

В теге присутствуют дополнительные настройки (Advance Settings):

• Use Data Element for Title (использование data-атрибута в качестве заголовка видео);

При использовании HTML Media Element у нас нет возможности передавать какие-либо сведения о видео. Эта настройка позволит вам настроить текущий заголовок видео. Добавьте к элементу атрибут data-html-media-element-title="название_видео", и он будет использовать это значение в videoTitle для заголовка видео вместо названия видеофайла. Если нет атрибута data, библиотека будет использовать текущее имя видеофайла.

Например, если задать data-html-media-element-title="NewVideo" и активировать настройку Use Data Element for Title, то в уровне данных переменной gtm.videoTitle присвоится значение NewVideo, а без включенной опции - название видеоролика:

• Enable New Videos Discovery (использование Mutation Observer API)

Если у вас видео проигрываются в модальном окне или динамически добавляются на сайт, включите эту настройку и поставьте в поле YES.

В качестве триггера активации используйте Модель DOM готова (DOM Ready). Сохраните тег.

Используйте режим предварительного просмотра Google Tag Manager для проверки отслеживаемых данных. Совершите несколько событий (включите воспроизведение видео, остановите его, перемотайте и т.д.). Если вы эти события указали в теге в качестве отслеживаемых, то на шкале событий вы будете видеть их под названием YouTube Video (не пугайтесь этого).

На уровень данных передается:

• event - событие;
• gtm.elementClasses - класс элемента;
• gtm.elementId - идентификатор элемента;
• gtm.elementTarget - значение атрибута target у элемента, на котором произошло событие;
• gtm.element - исходный элемент, на котором произошло событие;
• gtm.elementUrl - URL-адрес элемента;
• gtm.videoProvider - поставщик видео (в GTM только youtube, а в этом отслеживании html5);
• gtm.videoStatus - состояние видео в момент регистрации пользовательского события;
• gtm.videoUrl - ссылка на отслеживаемое видео;
• gtm.videoTitle - текущее значение data-media-element-title, по умолчанию - название видеофайла;
• gtm.videoDuration - общая продолжительность видео в секундах;
• gtm.videoCurrentTime - текущее время видео в секундах, в которое произошло пользовательское событие;
• gtm.videoElapsedTime - время, прошедшее с момента последней паузы / воспроизведения;
• gtm.videoPercent - значение воспроизведенного видео (в %);
• gtm.videoVisible - значение видимости видео в окне браузера. Если видео отображается в области просмотра, результатом будет значение true, если же в другой области (в нижней части страницы, на фоновой вкладке) – false;
• gtm.videoIsMuted - отключен ли звук? Если в момент совершения события видео воспроизводится без звука, то значение true, если со звуком - false;
• gtm.videoPlaybackRate - скорость воспроизведения мультимедиа (по умолчанию - 1);
• gtm.videoLoop - видео с зацикливанием? Если да, то true, если нет, то false;
• gtm.videoVolume - текущая громкость видео (1 - 100%);
• gtm.videoNetworkState - текущее состояние выборки мультимедиа по сети (0,1,2,3);
• gtm.videoData -  в этой переменной с помощью атрибутов данных (начинается с data-html-media-element-param- ) вы можете передать (в виде объекта) все необходимые пользовательские данные о видео, чтобы вернуть его в события отслеживания. Подробнее читайте в официальной документации библиотеки;
• elementNodeName - имя текущего узла (video/audio).

Все переменные, перечисленные в списке до gtm.videoIsMuted, являются встроенными в Google Tag Manager. Поэтому если вы захотите передать какую-либо информацию по ним в счетчики аналитики, можете использовать уже существующие. А вот для того, чтобы передать значение всех оставшихся (videoLoop, videoPlaybackRate, videoIsMuted и т.д.), их необходимо создать через пользовательские переменные типа Переменная уровня данных. Например, для громкости видео переменная будет выглядеть так:

И тогда для события в конкретный момент времени она примет определенное значение:

Аналогично можно создать переменные уровня данных и для других свойств мультимедиа. Чтобы передать информацию о совершаемых событиях в Google Analytics, необходимо создать триггер и тег. Рекомендую для этих целей использовать триггер типа Специальное событие с названием gtm.video, а не Видео на YouTube, чтобы не запутаться:

Отслеживание видео (UA)

После этого вы можете создать теги для Universal Analytics и Google Analytics 4. Например, чтобы выполнить похожие настройки отслеживани видео YouTube с помощью Google Tag Manager из этой статьи, создадим точно такой же тег с типом отслеживание Событие:

В качестве категории события можно добавить произвольное значение (например: Видео), в действии события - встроенную переменную Video Status, которая будет передавать состояние видео в момент регистрации каждого события, а в ярлыке - встроенные переменные Video Title и Video URL через тире. В них будут храниться данные по названию и ссылке отслеживаемого видеоролика. В качестве триггера активации добавьте специальное событие gtm.video, созданное на предыдущем шаге. Сохраните тег.

При правильной настройке в отчетах Universal Analytics В режиме реального времени будут отображаться наши отслеживаемые события:

Посмотреть на все события можно в разделе Поведение – События – Лучшие события. Выбрав Ярлык события в качестве основного или дополнительного параметра, вы увидите название видео и URL-адрес:

Отслеживание видео (GA4)

Настройка тега для Google Analytics 4 немного хитрее, чем может показаться на первый взгляд. С одной стороны в GA4 уже предусмотрено отслеживание взаимодействий с видео благодаря опции Улучшеная статистика. Но с другой стороны такие события регистрируются для видео YouTube, когда пользователи смотрят их на вашем сайте.

Как быть с отслеживанием HTML5 проигрывателей в GA4? Точно также, как и с Universal Analytics. Необходимо создать тег типа Google Аналитика: событие GA 4 со схожей конфигурацией:

В качестве названия события выступает фиксированная часть, начинающаяся с video_ , а далее идет встроенная переменная Video Status. Такая конструкция позволяет нам с помощью одного тега получать множество событий, как это было в теге Universal Analytics (Действия по событию - Video Status). В параметрах события вы просто прописываете пары ключ:значение для всех отслеживаемых метрик. В качестве триггера активации используйте все тот же триггер специального события gtm.video.

Примечание: в примере выше включенные мной параметры события в тег являются необязательными. Если вы считаете, что некоторые из них не представляют для вас никакой ценности, удалите их.

Не забудьте сохранить и опубликовать тег. Проверить корректность передачи данных в Google Analytics 4 можно с помощью инструмента DebugView. Если вы сделали все правильно, то на шкале будут отображаться передавываемые события и их параметры:

Если вы в дальнейшем хотите видеть статистику по параметрам событий в стандартных отчетах GA4, то вам необходимо создать их как пользовательские определения. Подробнее об этом читайте в этом материале.

Отслеживание аудио

Все это время я описывал процесс отслеживания видео в HTML5 видеоплеере. А как настроить аудио с помощью данного шаблона тега и Google Tag Manager? Очень просто - все, о чем говорилось в этой статье до этого момента, применимо и к HTML5 аудио, за исключением названий переменных уровня данных и триггера.

Синтаксис для <audio> на сайте выглядит так:

, где source src - тег и атрибут, через которые задается путь к вашему файлу с аудио.

Примечание: у тега <audio> есть и другие атрибуты (autoplay, controls, loop, preload), о которых подробнее можно почитать на htmlbook.ru.

Если аудио размещено описанным выше способом, то при инспектировании элемента через консоль разработчика (клавиша F12 для Google Chrome) вы увидите соответствующий тег <audio>:

Вы можете также воспользоваться шаблоном тега Дэвида Вальехо HTML Media Elements Tracker, отметив в настройках конфигурации необходимые для отслеживаемые события. Различия начинаются в модели данных, которую вы увидите в режиме отладки GTM:

Если в отслеживании HTML5 видео триггер назывался gtm.video (YouTube Video), то для аудио он отображается как gtm.audio. Аналогично и со всеми переменными, входящими в уровень данных. Было - video, стало - audio (gtm.audioStatus, gtm.audioVisible, gtm.audioPercent и т.д.). Не забудьте учесть эти изменения при создании триггера (специальное событие с названием gtm.audio) и настройке тегов для отслежвания HTML5 аудио в Universal Analytics и Google Analytics 4.