Sep 28 2010
Tracciare i video HTML5
Dicono che il futuro dei video online sarà HTML5, e che Flash morirà. Sia come sia è evidente che pressoché tutti i browser moderni supportano il nuovo standard di riproduzione dei video, il tag video appunto, e che quindi alcuni webmaster potrebbero voler migrare a quella tecnologia senza perdere d’occhio le interazioni degli utenti sui video tracciate con Google Analytics.
Rob su elisa|DBI ha scritto un post su quanto questa operazione sia facile rispetto al vecchio ActionScript. In sostanza nel suo esempio il video è racchiuso tutto in questo codice
<video controls autoplay id=”super-video” width=”250″>
<source src="videos/video1.ogg">
Your browser does not support the video tag
</source>
</video>
piuttosto facile, no? dopodiché bisogna “iniettare” via javascript le funzioni necessarie al tracciamento, dopo che la pagina si è caricata interamente ma prima che il video parta. Questo viene risolto con le chiamate
document.addEventListener("DOMContentLoaded", init, false);
function init(){
var video = document.getElementById("super-video");
video.addEventListener("play", videoPlay, false);
video.addEventListener("pause", videoPause, false);
video.addEventListener("ended", videoEnd, false);
}
dopodiché servono le funzioni che associano ad ogni azione la chiamata al tracciamento dell’azione tramite gli eventi, e cioè
function videoPlay() {
trackEvent('Play', 'My Video');
}
function videoPause() {
trackEvent('Pause', 'My Video');
}
function videoEnd() {
trackEvent('Ended', 'My Video');
}
e in ultimo la chiamata vera e propria a _trackEvent, che riconosceremo subito
function trackEvent(action, title) {
_gaq.push(['_trackEvent', 'Videos', action, title]);
}
Con poche righe di codice, semplicemente, vengono tracciati i tre eventi principali, play, pausa e completamento della visione del video. Certo, non sarà raffinato e completo come il mio sistema per tracciare video flash e youtube, ma è un metodo più o meno alla portata di tutti!