Tracking de vídeos de YouTube con Google Analytics

YouTube ya tiene por defecto un potente sistema de estadísticas llamado Youtube Insight para tener información sobre las reproducciones del vídeo y más información de interés (datos demográficos, horas de reproducción…). Y para las marcas que están pagando por su canal en YouToube además pueden integrar Google Analytics dentro del canal.

Pero, ¿qué hacen entonces lo que quieren saber qué pasa con los vídeos de YouTube que están insertados en su propia web? Pues bien, este tutorial va dedicado a aquellas personas que quieran hacer un tracking del vídeo de YouTube que tienen embebido dentro del propio sitio web mediante Google Analytics. De esta manera se podrá obtener una información muy valiosa y no estaremos publicando vídeos a ciegas, sin saber como se están consumiendo dentro de nuestro sitio, cuantos de nuestros usuarios que aterrizaron en el post lo vieron hasta el final, etc. Empecemos…

Paso 1: Inserta el vídeo mediante el objeto SWFObject

Por desgracia, la API de javascript no soporta los vídeos insertados con <iframe> que es el actual método que YouTube nos da cuando queremos compartir el vídeo en nuestro sitio. Esto tiene solución, el único problema es que nos tocará trabajar un poco más, pero por lo menos de esta manera conseguiremos evitar el mensaje maldito de Internet Explorer de “Haga clic para activar este control”…

El código a insertar para el vídeo es el siguiente:

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    Necesitas Flash player 8+ y el JavaScript habilitado para ver este vídeo.
  </div>

<script type="text/javascript">

 var params = { allowScriptAccess: "always" };
 var atts = { id: "myytplayer" };
 swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?
enablejsapi=1&playerapiid=ytplayer",
                    "ytapiplayer", "425", "356", "8", null, null, params, atts);
 //Espacio reservado para introducir el código de Tracking de Eventos del paso 2
</script>

El VIDEO_ID es el identificador, por ejemplo el ID de este vídeo http://www.youtube.com/watch?v=pqjlYJXTakA será pqjlYJXTakA. En rojo os he puesto algo muy importante que tenéis que añadir ya que sin eso el tracking no funcionará. El primer parámetro “enablejsapi=1″  lo que hace es habilitar la API javascript dentro del SWF con un objeto de tipo YouTuble Player “ytplayer” que es el segundo parámetro. Por último el 425 y el 356 es el ancho y el alto respectivamente, parámetros que podéis cambiar sin ningún problema. Si queréis profundizar sobre este código os dejo la documentación de la API del reproductor JavaScript de YouTube.

Paso 2: Introduce el tracking de eventos de Google Analytics

Este paso es un poco personal y podemos recoger los eventos que queramos. En este caso voy a hacer que recoja los eventos de vídeo finalizado, en reproducción y vídeo pausado. Pero todavía podéis recoger un evento en buffer y en cola de vídeos, tal y como nos explica en la documentación de la API que os he adjuntado anteriormente dentro de la sección de eventos. Sería cuestión de añadirlos al switch case con el número adecuado.

Éste es el código que sigue los eventos y que hay que introducir dentro del script anterior donde está la frase verde (esa frase se puede borrar):

function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("videoPlayer");
        ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    } 

function onytplayerStateChange(newState) {
   var currentState = ytplayer.getPlayerState()
   switch(currentState){
      case 0: // Video finalizado
        _gaq.push(['_trackEvent','Titulo de la pagina', 'Nombre del video', 'Visto']);
        break;
      case 1: // Video visualizandose
        _gaq.push(['_trackEvent','Titulo de la pagina', 'Nombre del video', 'Viendose']);
        break;
      case 2: //Vídeo pausado
        _gaq.push(['_trackEvent','Titulo de la pagina', 'Nombre del video', 'Pausado']);
        break;
      default:
        break;
   }
}

La primera función onYouTubePlayerReady lo que hace es ejecutarse cuando el reproductor está preparado y la API que hemos llamado antes esté lista para recibir llamadas. Dentro de esta función ponemos el modo escucha para poder capturar los eventos que hemos decidido recoger dentro de la segunda función onytplayerStateChange.

Paso 3: Comprobar que el script y el vídeo funcionan

Una vez que hayamos introducido todo este script donde queramos poner el vídeo,  comprobamos que esté todo correcto cargando el vídeo y viendo que funcionan los botones. Este paso lo podemos hacer dentro del Code Playground de Google.

Paso 4: Ver los resultados en Google Analytics

Pasadas las 24 horas de rigor, podremos empezar a ver los resultados dentro de la sección de eventos de Google Analytics. A partir de aquí ya tenendremos la información necesaria para ver qué hacen los usuarios con nuestros vídeos, en qué parte lo pausan, cuantos lo miran enteros…

Como paso opcional podemos configurar los eventos como objetivos y con todo esto podremos medir cualquier cosa que queramos segmentando para sacar los valiosos insights que necesitamos.

Nota: Este tutorial está hecho para funcionar con la versión asíncrona de Google Analytics.