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

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

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

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

1. было желание посмотреть видео (посетитель начал смотреть – нажал кнопку “воспроизвести”)
2. оправдал ожидания (посетитель досмотрел видео до важного момента)
3. видео было интересным/ Мне понравилось (посетитель досмотрел до конца).

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

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

Как мы следуем?

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

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

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

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

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

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

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

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

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

Кроме того, скрипт для ютуба может отслеживать качество просмотра видео, а скрипт для вимео – при перемотке/перемотке видео.

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

Автор кода: Зандер Хейлброн.

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

Использовать:

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 
           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

Автор кода: Зандер Хейлброн.

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

Использовать:

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

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

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

   <iframe src=" width="640" height="390" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

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

   <iframe src=" width="640" height="390" frameborder="0" data-progress="true" data-seek="true" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

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

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

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