Отслеживание событий видео YouTube — события play, pause, end и ошибки с помощью GA и GTM

Видео — это один из стандартов представления информации для посетителей сайтов. Я бы сказал — это лучший вариант подачи информации. И компании, которые потратили серьезные деньги на создание видео, я уверен, хотели бы получить данные о том, интересно ли это видео их аудитории, как оно себя показывает в сравнении с другим, и другие подобного рода аналитические данные.

В данном посте я опишу процесс получения таких данных для видео поставляемых видеохостингом YouTube (отслеживание событий видео YouTube) в Google Universal Analytics (стандартным подключением и через Tag Manager). В целом, технически ничего сложного, так как мы будем отслеживать только событие по старту видео, паузам и возобновлениям, и событие по окончанию видео. Но этих данных вам хватит для понимания того, как видео нравится вашим пользователям. Если необходимо отслеживать больше, нужно обратиться к соответствующему API и дополнить код отслеживания нужными событиями.

Пример видео и запуска событий через Tag manager тут, стандартный Universal Analytics — тут

Итак, приступим.

Данный материал рассматривает варианты подключения видео посредством 2 способов — iFrame и javascript. Iframe — тот вариант, который YouTube предлагает на странице видео, если выбирать опцию «Поделиться» — «вставка» и получить код для вставки видео на сайте.

Основой для отслеживания послужили API данного плеера:

• API для подключения YouTube видео через iframe
• API для подключения YouTube через javascript

Стандартная имплементация кода Universal Analytics

Начнем со вставки пустого контейнера <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())
};

Отслеживание ошибок (при неверном ID видео или других)

Ошибки отправляются аналогичным способом:

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 — он отлично показывает успешные отправки событий.

Подключение и отслеживание через Google Tag Manager

Тут вам необходимо будет, аналогично стандартному варианту, добавить на странице блок <div id='player'></div>, а остальные манипуляции провести в самом Tag Manager-е.

Создаем 3 макроса, на примере макроса для eventCategory:

Первый тег — custom HTML code

//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())
};

Второй тег типа Universal Analytics

На этом все, вы готовы отслеживать события по старту/паузе/окончанию видео.

Варианты дебаггинга вы можете подсмотреть в конце раздела о стандартной имплементации аналитики. Рабочий пример с отслеживанием через Google Tag manager вы можете найти по ссылке.

Для полного понимания, обозначу, что данные действия вам дадут в итоге:

• Общее кол-во запуска видео
• Общее кол-во полных просмотров видео
• Общее кол-во ошибок, отсортированных по типам
• Отношение запуска видео к полным просмотрам (ивенты по окончанию / ивенты по запуску)*
• Наиболее частое время пауз*

Примечание: последние 2 типа данных не получаются в виде отчетов в GA, их можно получить путем ручного подсчета (к примеру, в Excel-е).

Мне кажется, данных типов событий хватает для понимания общей картины. Если у вас есть идеи, что еще может быть полезным в аналитике просмотров видео с YouTube, пожалуйста, пишите в комментариях, возможно, я дополню данный пост необходимыми вам элементами. И как всегда, прошу задавайте вопрсы, делитесь ссылкой на данный пост и успешных вам маркетинговых достижений!

• <Проверка работы видео в гугл аналитикс
• 301 редиректы на все случаи жизни>