Sep 28 2010

HelpSemaforoQuesto semaforo indica il livello difficoltà del post
semaforo verde - articolo per tutti semaforo giallo - articolo avanzato semaforo rosso - articolo per esperti

Tracciare i video HTML5

autore: Marco Cilia categoria: javascript

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!