Як відстежувати перегляд відеороликів на своєму сайті

Ще кілька років тому було прийнято на веб-ресурсах використовувати в основному текстовий або графічний контент.
Пояснювалося це елементарно – невисока швидкість інтернету не дозволяла задіяти більш потужні ресурси для впливу на аудиторію. Сьогодні швидкість вже не є перешкодою, і відеоконтент використовується на переважній більшості інтернет-ресурсів.

У зв’язку зі зростаючою популярністю відео-контенту, багато власників ресурсів, при просуванні сайтів стикаються з питанням: «Як відстежувати перегляд відеороликів на своєму сайті?» Як правило, цим питанням задаються з метою з’ясувати і оцінити зацікавленість цільової аудиторії в відео-контент. Таким чином, відстеження взаємодії з відео в переважній більшості випадків налаштовується для того, щоб з’ясувати три основних критерії відносини:

1. Відвідувач натиснув «play» і почав перегляд – відео зацікавило, тобто виникло бажання в перегляді.

2. Відвідувач переглянув відео до певного моменту і зупинив ролик – очікування виправдалися чи ні.

3. Відвідувач додивився відео до кінця – ролик сподобався, був цікавий, пізнавальний.

На сьогоднішній день існує кілька нескладних способів, які допоможуть налаштувати відстеження перегляду відео на сайті за допомогою «Google Analytics». Всі способи передбачають використання лічильника в тандемі з додатковим JavaScript-кодом. Така взаємодія допомагає не тільки управляти відтворенням відеоролика, а й посилати інформацію, у вигляді подій (track Event) безпосередньо на лічильник. Слід зазначити, що кожен з наведених нижче способів, має ряд обмежень і на даний момент не існує універсального способу відстеження інформації, що стосується перегляду відео на сайті. Це слід обов’язково враховувати, при виборі варіанта настройки для свого веб-ресурсу.

Варіант 1

Даний спосіб є найбільш простим, але на сторінці з відео повинна бути підключена бібліотека Jquery.

Перш за все, необхідно в коді сторінки з відео прописати посилання на Js-скрипт.

На практиці код вставки виглядає наступним чином:

<script src=”//code.jquery.com/jquery-1.7.2.js”></script>
<script type=”text/javascript” src=”/path/to/lunametrics-youtube.js”></script>

Далі за допомогою стандартного YouTube-коду і використання iframe, необхідно помістити відеоролик на сторінку. Таким чином, можна відстежити, скільки разів відео було включено і скільки разів доглянуто до кінця, що дасть чітке уявлення про зацікавленість відвідувачів в перегляді. Головний недолік даного способу полягає в тому, що тільки один відеоролик можна підключити до лічильника «Google Analytics». Крім цього, даний варіант відстеження не підходить для обліку тих відвідувачів, які використовують мобільні гаджети.

Варіант 2

Цей спосіб трохи складніше попереднього і відрізняється деякими особливостями, які будуть описані нижче. Для реалізації даного способу необхідно прописати файл зі скриптом і додатковий код з ID відео на сторінці, де буде розташований відео-контент.

Виглядає це приблизно так:

<script src=”path/to/youtube.ga.min.js”></script>
<script>
var configYouTubePlayer = {
videoID: ‘Rk6_hdRtJOE’ // The YouTube video ID.
};
</script>

Крім цього, необхідно в тому місці на сторінці, де буде ролик, розмістити DIV c «id = ytplayer». Після чого він буде заміщений скриптом на iframe з відео: <div id =”ytplayer”> </ div>

Особливість даного способу полягає в тому, що можна відстежувати більшу кількість інформації, такої як:

1. Як почати перегляд (запуск) і завершення перегляду – (started \ paused \ completed video).

2. Відсоток завершеності перегляду – (коли перегляд досягає 25%, 50% або 75% всього відеоролика).

NB! – HTML 5 обов’язково повинен підтримуватися браузером!

– Подія відстежується тільки при першому запуску!

– Значення параметра opt_noninteraction встановлюється як true, тому події, що стосуються перегляду відеоконтенту, не впливають на показник відмов!

– Відстежити можна тільки один ролик, як і в першому варіанті, але є можливість вибрати, який саме відстежувати!

– Подивитися відео за допомогою мобільних гаджетів неможливо!

– Відвідувачі, у яких відключений JavaScript, також не зможуть побачити відеоролик!

Варіант 3

Цей варіант найбільш складний і для його реалізації необхідно використовувати API YouTube. На сторінку, де розташований відеоролик, необхідно вставити такий скрипт:

<script>
var tag = document.createElement(‘script’);
tag.src = “http://www.youtube.com/player_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player(‘player’,
{
height: ‘390’,
width: ‘640’,
videoId: ‘Y8B9gMvcfQY’,
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange
}
});
}
function onPlayerReady(event) {
/// event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data ==YT.PlayerState.PLAYING)
{_gaq.push([‘_trackEvent’, ‘Page Name’, ‘Video Name’, ‘Play’,
player.getVideoUrl() ]); }
if (event.data ==YT.PlayerState.ENDED)
{_gaq.push([‘_trackEvent’, ‘Page Name’, ‘Video Name’, ‘Watch to End’,
player.getVideoUrl() ]); } }
</script>

Після чого, необхідно вказати ID ролика в параметрі video ID і в довільній формі встановити Page Name, Video Name в ‘_trackEvent’. Прописати на місці ролика такий DIV

<div id=”player”></div>

В результаті реалізації даного способу можна відстежити запуск відеоролика і його перегляд до самого кінця. Для більшої зручності при аналізі статистики можна вказувати свою назву відеоконтенту.

Всі три варіанти на сьогоднішній день є придатними способами для відстеження переглядів відеороликів на сайті. Без сумніву кожен з них має свої сильні і слабкі сторони, зваживши які можна підібрати той спосіб, який ідеально підійде для збору інформації в конкретно взятих умовах.

Звичайно, існує маса і інших способів, за допомогою яких можна впровадити власне відео на сайт. У таких випадках, спосіб відстеження буде залежати безпосередньо від вибору плеєра, за допомогою якого відеоконтент встановлюється на сторінки веб-ресурсу.

Наприклад:

Flow Player має вихідний код з плагіном для підключення «Google Analytics». З покроковою інструкцією можна ознайомитися тут:http://flash.flowplayer.org/plugins/flash/analytics.html

Інформація для інтеграції «Google Analytics» в відеоплеєр Adobe Flash – https://developers.google.com/analytics/devguides/collection/other/flashTrackingIntro?csw=1

Для відео на HTML5 –

http://www.elisa-dbi.co.uk/blog/how-to-integrate-google-analytics-in-video-html5-and-goodbye-to-flash/

HTML5 Demo: Tracking Video Progress With Google Analytics

Наступний крок – це настройка виконання події, як виконання мети. Для цього необхідно:

1. В «Google Analytics» натиснути вкладку «Адміністратор».

2. Зайти на вкладку «Цілі» і створити мета.

3. Ввести ім’я мети і вибрати тип «Подія».

4. Заповнити поля в цілі таким чином:

• Категорія – ідентична
• Action – ідентична
• Ярлик – ідентичний
• Значення – ідентичне

5. Натиснути «Зберегти».

Підводячи підсумок вищевикладеного, можна зробити висновок, що сучасні інструменти веб-аналітики пропонують кілька ефективних способів для відстеження взаємодії відвідувачів з відеоконтентом на сайті. Виходячи з умов, а також цілей і завдань інтернет-проекту, підібрати найбільш оптимальний варіант, який надасть необхідний обсяг інформації для аналізу і подальшої оптимізації, не складе особливих труднощів.