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

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

отслеживание взаимодействия с видео в Google Analytics

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

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

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

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

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

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

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

ga-video-tracking

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

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

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

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

Переходим к практике. Я дам готовый код, который позволит настроить в 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.

19 комментариев
  1. Tritlex:

    А подскажите как настроить цели на это все, ибо сделал так my.jetscreenshot.com/demo/20130628-ni4w-38kb оно не хочет считать хотя при этом в отчете по событиям все есть. Зарание спс.

    • Если в отчете по событиям все есть, значит что-то неправильно заполняете в настройках цели. У Вас везде стоит «равно». Это значит, что значение поля должно чётко соответствовать значениям события.

  2. Сергей Лыткин:

    Евгений, спасибо за статью,
    подскажите, пожалуйста, возможно ли использовать этот код в контейнере тэгов?

  3. Свят:

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

    Проверил в Опере не работает скрипт, т.е. не видео.

    • Evdd:

      У меня все работает.

      Интересно как сделать на несколько видео, если они на одной странице?

      • вроде проблем быть не должно — просто размножить, там есть id видео — он уникальный

        • Evdd:

          Главное не сказал, я скрипт с id видео и размерами убрал в скрипт youtube.ga.js, переименовал его под название видео.
          А сделал это для того чтобы в YT_GA.url вместо юрл передать короткое название видео. Так явно удобнее, когда много видео на странице.
          Выходит мне нужно скрипт.ga.js делать для каждого файла?
          Не переборщил я?

          • youtube.ga.js достаточно добавить 1 раз. Не зависимо от количества роликов. Это просто набор функций.

            • Evdd:

              div id=»ytplayer» вставляется только один раз

              • Татьяна:

                добрый день! а подскажите как настроить цели на скачивание файлов если их (файлов, закачку которых надо отслеживать) довольно много. около 100 к примеру.
                То есть сначала создается событие на отслеживание закачки каждого файла а потом цель на каждое событие? но ведь число целей ограничено, как быть в таком случае? Спасибо.

                • 100 целей создавать незачем. Имеет смысл объединить все загрузки в одну цель.

                  А информацию по событиям можно смотреть в отчёте по событиям.

  4. Tony:

    Доброго времени суток! Подскажите, прописывать gaq_push с сылкой на свое видео (yuotube) нужно в youtube.ga.js?

Добавить комментарий для Evdd Отменить ответ

Ваш адрес email не будет опубликован.