Koje se interakcije s videom vrše na vašim stranicama?

Što pratiti kod interakcije s videom?

Klijenti nas često pitaju mogu li se pratiti YouTube ili Vimeo interakcije s videom koje korisnici čine na njihovoj stranici. Mogu, ali se u takvoj situaciji zahtijeva knowhow našeg developerskog tima da ugradi Javascript kod koji pokrene Google Analytics evente i „zahvati“ interakcije kao što su Play i Pause. Moguće je ići i dublje u analizu, te pratiti kada neki korisnik pogleda određeni postotak videa, npr. 25%, 50%, 75% ili 100%.

Od naših se klijenata najprije traži informacija što točno žele znati o videu na njihovoj stranici. Za početak, krenimo od toga gledaju li uopće korisnici taj video. Moguće da korisnici dođu na stranicu gdje je video, ali ga ne gledaju, jer njihovu pažnju odvrati neki drugi sadržaj. Ili, pak, video ne izgleda zanimljivo i oni ga jednostavno ignoriraju. Znači, jedna od stvari od kojih krećemo je postotak pregleda stranica na kojima je korisnik pokrenuo video.

Nakon toga, klijentu bi trebalo biti važno koliko često korisnici pogledaju taj video do kraja. Korisnik možda i pokrene video, ali ako im se video ne sviđa, vjerojatno će ga prestati gledati i nastaviti svoje pregledavanje po stranici ili još gore, napustiti stranicu. Možemo zaključiti da je sljedeća važna stvar (nakon postotka pregleda na kojima je korisnik pokrenuo video) postotak “pokretača videa” koji taj video i pogledaju.

Kao što smo naveli u prvom paragrafu, mogu se pratiti i pauze ili postotci do kojih je korisnik pogledao video.

Kako se embedani video isječci prate?

Iako postoje razne varijante postavljanja videa na stranicu, najčešća je ona s embedanjem iframe-a. Npr. evo kak izgleda kod za embedanje prvog youtube videa kojeg je snimio Jawed Karim, jedan od osnivača YouTube-a:

Problem kod iframea je taj da nemamo kontrolu nad kodom koji se događa unutar iframea, tj. ne možemo editirati kod i direktno dodati Google Analytics. Zbog toga koristimo YouTube API. Koristeći API možemo pratiti sve promjene koje se događaju unutar videa (Play, Pause, Finish…).

YouTube API

Prvo što moramo napraviti na stranicama na kojima želimo pratiti video je postaviti YouTube API. To znači dodati JavaScript kod, a kod nas se to gotovo uvijek radi preko Google Tag Managera.

Postoji više varijanti koda, a jedan od njih izgleda ovako:
 
// OPTIONAL: Enable JSAPI if it’s not already on the URL
// note: this will cause the Youtube player to “flash” on the page when reloading to enable the JS API
for (var e = document.getElementsByTagName(“iframe”), x = e.length; x–;)
if (/youtube.com\/embed/.test(e[x].src))
if(e[x].src.indexOf(‘enablejsapi=’) === -1)
e[x].src += (e[x].src.indexOf(‘?’) ===-1 ? ‘?’:’&’) + ‘enablejsapi=1’;

// This code loads the IFrame Player API code asynchronously
var tag = document.createElement(‘script’);
tag.src = “http://www.youtube.com/iframe_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This code is called by the YouTube API to create the player object
function onYouTubeIframeAPIReady(event) {
player = new YT.Player(‘youTubePlayer’, {
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange
}
});
}
 
Ovaj kod dodaje YouTube API na vaše stranice i prepoznaje YouTube player objekt koji se nalazi unutar iframea. Taj kod također uključuje JSAPI ako ga nema u URL-u.

Na kraju moramo još dodati “callback” funkcije koje će API pozvati kada se event izvrši unutar iframea. Kao što se vidi u kodu iznad, imamo dvije “callback” funkcije, onReady event i onStateChange event. Prvi event se događa kad je player spreman i – pošto to nije korisnička interakcija – ne trebamo dodavati Google Analytics. Drugi event se „okida“ kada korisnik pokrene, pauzira ili pogleda video do kraja i taj event želimo pratiti preko Google Analyticsa.
 
var pauseFlag = false;
function onPlayerReady(event) {
// do nothing, no tracking needed
}
function onPlayerStateChange(event) {
// track when user clicks to Play
if (event.data == YT.PlayerState.PLAYING) {
_gaq.push([‘_trackEvent’, ‘Videos’, ‘Play’, ‘Test Video’]);
pauseFlag = true;
}
// track when user clicks to Pause
if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
_gaq.push([‘_trackEvent’, ‘Videos’, ‘Pause’, ‘Test Video’]);
pauseFlag = false;
}
// track when video ends
if (event.data == YT.PlayerState.ENDED) {
_gaq.push([‘_trackEvent’, ‘Videos’, ‘Finished’, ‘Test Video’]);
}
}
 
Kao što vidite, akcijske dimenzije koje će se pokazati u Analyticsu su Play, Pause i Finished. Jednom kada je cijeli Javascript postavljen, potrebno je poslati informacije iz Google Tag Managera u Google Analytics. Preko debuggera možemo provjeriti kako se eventi „okidaju“. Na koncu, rezultati koje ćemo vidjeti u Google Analyticsu izgledaju ovako:

Zaključak

Prikazano je samo dio onoga što možemo saznati praćenjem video interakcija. Kao što smo spomenuli na početku teksta, može se ići i u detalje i saznati do kojeg je točno postotka korisnik pogledao video. Vjerujemo da nas sve zanima što korisnici rade na našim stranicama, a video isječci su sveprisutni na njima, pa zašto onda ne bi saznali služe li oni nečemu korisnom ili su zapravo distrakcija?!

Ukoliko imate bilo kakvih pitanja ili nejasnoća – ne oklijevajte kontaktirati nas!