Видео — это один из стандартов представления информации для посетителей сайтов. Я бы сказал — это лучший вариант подачи информации. И компании, которые потратили серьезные деньги на создание видео, я уверен, хотели бы получить данные о том, интересно ли это видео их аудитории, как оно себя показывает в сравнении с другим, и другие подобного рода аналитические данные.
В данном посте я опишу процесс получения таких данных для видео поставляемых видеохостингом YouTube (отслеживание событий видео YouTube) в Google Universal Analytics (стандартным подключением и через Tag Manager). В целом, технически ничего сложного, так как мы будем отслеживать только событие по старту видео, паузам и возобновлениям, и событие по окончанию видео. Но этих данных вам хватит для понимания того, как видео нравится вашим пользователям. Если необходимо отслеживать больше, нужно обратиться к соответствующему API и дополнить код отслеживания нужными событиями.
Пример видео и запуска событий через Tag manager тут, стандартный Universal Analytics — тут
Итак, приступим.
Данный материал рассматривает варианты подключения видео посредством 2 способов — iFrame и javascript. Iframe — тот вариант, который YouTube предлагает на странице видео, если выбирать опцию «Поделиться» — «вставка» и получить код для вставки видео на сайте.
Основой для отслеживания послужили API данного плеера:
Начнем со вставки пустого контейнера <div id='player'></div>
, который будет заменен на плеер YouTube при работе скрипта API.
Далее, в коде страницы мы должны добавить код javascript для подключения API iframe-плеера и задания дополнительных параметров, а также отправки ивентов.
Тут мы объявляем и подключаем асинхронно АПИ:
var tag = document.createElement('script'); tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Далее, создаем объект плеера, указываем ему параметры (высота, ширина, ID вашего видео — замените YOUR_VIDEO_ID на свой) и объявляем ивенты, которые мы собираемся использовать.
var player; var video = 'YOUR_VIDEO_ID' video.h = '390' //video iframe height video.w = '640' //video iframe width function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: video.h, width: video.w, videoId: video, events: { 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); };
Вся магия и происходит в этих 2 действиях скрипта — ‘onStateChange’ и ‘onError’. По ним мы и будем отправлять события в Google Analytics.
function onPlayerStateChange(event) { switch (event.data) { case YT.PlayerState.PLAYING: if (cleanTime() == 0) { //console.log('started ' + cleanTime()); ga('send', 'event', 'video', 'started', video); } else { //console.log('playing ' + cleanTime()) ga('send', 'event', 'video', 'played', 'v: ' + video + ' | t: ' + cleanTime()); }; break; case YT.PlayerState.PAUSED: if (player.getDuration() - player.getCurrentTime() != 0) { //console.log('paused' + ' @ ' + cleanTime()); ga('send', 'event', 'video', 'paused', 'v: ' + video + ' | t: ' + cleanTime()); }; break; case YT.PlayerState.ENDED: //console.log('ended '); ga('send', 'event', 'video', 'ended', video); break; }; }; //utility function cleanTime(){ return Math.round(player.getCurrentTime()) };
Ошибки отправляются аналогичным способом:
function onPlayerError (event) { switch(event.data) { case 2: //console.log('' + video.id) ga('send', 'event', 'video', 'invalid id',video); break; case 100: ga('send', 'event', 'video', 'not found',video); break; case 101 || 150: ga('send', 'event', 'video', 'not allowed',video); break; }; };
Все, вы можете проверять, падают ли события в вашу аналитику (смотрите непосредственно в «В режиме реального времени» — «События»). Также, рекомендую пользоваться плагином Google Analytics Debugger — он отлично показывает успешные отправки событий.
Тут вам необходимо будет, аналогично стандартному варианту, добавить на странице блок <div id='player'></div>
, а остальные манипуляции провести в самом Tag Manager-е.
Создаем 3 макроса, на примере макроса для eventCategory:
Аналогично создайте для eventAction и eventLabel.
Код ниже добавьте в сам тег (заметьте — в нем также необходимо заменить YOUR_VIDEO_ID_HERE на ваш идентификатор видео):
//set video values var video = 'YOUR_VIDEO_ID_HERE' video.h = '390' video.w = '640' var player; var tag = document.createElement('script'); tag.src = 'http://www.youtube.com/player_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: video.h, width: video.w, videoId: video, events: { 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerStateChange(event) { switch (event.data) { case YT.PlayerState.PLAYING: if (cleanTime() == 0) { dataLayer.push({ 'event': 'youtubeChange', 'eventCategory': 'video', 'eventAction': 'started', 'eventLabel': video }); } else { dataLayer.push({ 'event': 'youtubeChange', 'eventCategory': 'video', 'eventAction': 'played', 'eventLabel': 'v: ' + video + ' | t: ' + cleanTime() }); }; break; case YT.PlayerState.PAUSED: if (player.getDuration() - player.getCurrentTime() != 0) { dataLayer.push({ 'event': 'youtubeChange', 'eventCategory': 'video', 'eventAction': 'paused', 'eventLabel': 'v: ' + video + ' | t: ' + cleanTime() }); }; break; case YT.PlayerState.ENDED: dataLayer.push({ 'event': 'youtubeChange', 'eventCategory': 'video', 'eventAction': 'ended', 'eventLabel': video }); break; }; }; function onPlayerError(event) { switch (event.data) { case 2: dataLayer.push({ 'event': 'youtubeChange', 'eventCategory': 'video', 'eventAction': 'invalid id', 'eventLabel': video }) break; case 100: dataLayer.push({ 'event': 'youtubeChange', 'eventCategory': 'video', 'eventAction': 'not found', 'eventLabel': video }) break; case 101 || 150: dataLayer.push({ 'event': 'youtubeChange', 'eventCategory': 'video', 'eventAction': 'not allowed', 'eventLabel': video }) break; }; }; function cleanTime() { return Math.round(player.getCurrentTime()) };
На этом все, вы готовы отслеживать события по старту/паузе/окончанию видео.
Варианты дебаггинга вы можете подсмотреть в конце раздела о стандартной имплементации аналитики. Рабочий пример с отслеживанием через Google Tag manager вы можете найти по ссылке.
Для полного понимания, обозначу, что данные действия вам дадут в итоге:
Примечание: последние 2 типа данных не получаются в виде отчетов в GA, их можно получить путем ручного подсчета (к примеру, в Excel-е).
Мне кажется, данных типов событий хватает для понимания общей картины. Если у вас есть идеи, что еще может быть полезным в аналитике просмотров видео с YouTube, пожалуйста, пишите в комментариях, возможно, я дополню данный пост необходимыми вам элементами. И как всегда, прошу задавайте вопрсы, делитесь ссылкой на данный пост и успешных вам маркетинговых достижений!