Отслеживание просмотра видео (Youtube, Vimeo, …) с помощью Google Analytics

Эту статью я разделю на 2 части: сначала вкратце расскажу теорию (как можно отследить взаимодействие с видео на сайте), а потом приведу пару практических примеров (код отслеживания для популярных плееров youtube и vimeo).

Что отслеживаем?

В большинстве случаев отслеживание взаимодействия с виде настраивается для того, чтобы оценить заинтересованность посетителей в видеоконтенте. Условно можно выделить 3 самые важные чек-пойнта:

1. возникло желание посмотреть ролик (посетитель начал просмотр — нажал кнопку «play»)
2. оправдались ожидания (посетитель досмотрел видео до какого-то важного момента)
3. видеоролик был интересен/понравился (посетитель досмотрел его до конца).

Это общий случай. Не всегда досмотренный до конца ролик можно назвать интересным. Есть погрешность, есть специфические ролики, которые интригуют и обламывают.

О погрешности нужно помнить и смириться с ней. Для обломов нужна своя схема.

Как отслеживаем?

Первый вариант: настраиваем события по важным для нас чек-пойнтам и сравниваем цифры в отчёте по событиям (сколько начали смотреть, сколько досмотрели до важного момента, сколько досмотрели до конца).

Вариант второй: настраиваем цель с помощью события или виртуального просмотра (например, просмотр видео до ключевого момента) и получаем много интересных отчётов и возможность настроить нужные сегменты.

Этот вариант можно усложнить, сделав составную цель, которая будет включать в себя последовательность переходов по страницам сайта и просмотр видео.

Например: посещение посадочной страницы -> просмотр видео -> переход на страницу заказа/регистрации и т.д.

Настройка отслеживания взаимодействия с видео

Переходим к практике. Я дам готовый код, который позволит настроить в Google Analytics отслеживание видео на плеерах Youtube и Vimeo.

Сразу уточню, скрипты не мои, ссылка на сайт автора есть ниже. Скрипт для yuotube я проверял — работает, для vimeo не проверял. Я написал краткие мануалы по использованию, но в архивах есть немного более подробные (хоть и на английском).

Скрипты умеют создавать события на основе взаимодействия посетителя с видео. Т.е. используется метод _trackEvent, где:

• Category — название плеера
• Action — старт просмотра, пауза, окончание просмотра (100%), длительность просмотра (25%, 50% и 75%)
• Label — URL страницы с роликом на видеохостинге
• opt_noninteraction = true (т.е. просмотр видео не влияет на показатель отказов)

Помимо этого скрипт для youtube умеет отслеживать, в каком качестве смотрят видео, а скрипт для vimeo — когда видео перематывается вперёд/назад.

Настройка отслеживания в Google Analytics для Youtube

Автор кода: Sander Heilbron.

Ссылка на скачивание скрипта.

Использование:

1. Копируем из архива на сервер файл youtube.ga.js (удобная для редактирования читаемая версия) или youtube.ga.min.js (сжатая версия для более быстрой загрузки при открытии страницы).
2. Подключаем скрипт на странице с видео.

   <script src="путь к файлу youtube.ga.min.js"></script>

3. Настраиваем.
   Минимальный вариант:

   <script>
       var configYouTubePlayer = {
           videoID: 'Rk6_hdRtJOE' // ID видеоролика - можно взять из адресной строки на странице ролика на youtube.
       };  
   </script>

   Расширенный вариант:

   <script>
       var configYouTubePlayer = {
            // ID видеоролика - можно взять из адресной строки на странице ролика на youtube.
           videoID: 'Rk6_hdRtJOE',
   
           // Высота плеера. По умолчанию 390.
           height: 390,
   
           // Ширина плеера. По умолчанию 640.
           width: 640,
   
           // Разрешить отслеживание длительности просмотра.
           trackProgress: true,
   
           // Разрешить отслеживание качества видео.
           trackPlaybackQuality: true,
   
           // Настройка API Youtube
           // @see https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters
           playerVars: {
               'autohide': 1,
               'autoplay': 1,
               'rel': 0,
               'theme': 'light'
           }
       };
   </script>

4. Размещаем этот код в то место, где должен выводиться видеоролик.

   <div id="ytplayer"></div>

   При загрузке страницы скрипт, который мы подключили и настроили, заменит этот div на iframe с видео.

Готово. Теперь в отчётах по событиям будут появляться данные о просмотрах видео с youtube.

При желании можете поковыряться в скрипте автора (он достаточно простой) и адаптировать его под себя: добавить виртуальный просмотр страницы где нужно (например, для составной цели), настроить свои цифры при отслеживании длительности просмотра, изменить параметр opt_noninteraction (у _trackEvent) на false, чтобы просмотр ролика влиял на показатель отказов и т.д.

Настройка отслеживания в Google Analytics для Vimeo

Автор кода: Sander Heilbron.

Ссылка на скачивание скрипта.

Использование:

1. Копируем из архива на сервер файл vimeo.ga.js (удобная для редактирования читаемая версия) или vimeo.ga.min.js (сжатая версия для более быстрой загрузки при открытии страницы).
2. Подключаем библиотеку jquery (если она не подключена) и скрипт на странице с видео:

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
   <script src="путь к файлу vimeo.ga.min.js"></script>

3. Размещаем этот код в то место, где должен выводиться видеоролик.

   <iframe src="http://player.vimeo.com/video/22439234?api=1" width="640" height="390" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

   Можно добавить атрибуты data-progress и data-seek. Они позволят отслеживать длительность и перемотку видео. В этом случае код будет выглядеть так:

   <iframe src="http://player.vimeo.com/video/22439234?api=1" width="640" height="390" frameborder="0" data-progress="true" data-seek="true" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Как и в случае с кодом для youtube тут можно поковыряться в скрипте автора и адаптировать его под себя.

 

Настройка отслеживания в Google Analytics для Flowplayer

В качестве бонуса даю ссылку на официальную инструкцию по настройке аналитики для Flowplayer.