Seguimiento de eventos en Videos embebidos de Youtube

Si bien youtube posee su propia herramienta para conocer las estadísticas de reproducciones y demás de nuestros videos (Youtube Insights), esta sólo se limita a la actividad dentro de Youtube.com. Ahora bien, qué sucede cuando queremos medir las interacciones en videos embebidos en otros sitios? Dado que se trata de un reproductor externo y no tenemos acceso al código del mismo resulta imposible agregar de manera tradicional la función de Google Analytics “TrackEvent” para realizar el seguimiento de manera tradicional.

Por suerte, alguien pasó por el mismo problema (además de mi) y se tomó la molestia de resolverlo de una manera simple y fácil de implementar. En este artículo les voy a explicar cómo hacerlo.

Google Analytics Youtube Tracker es una librería open source que permite hacer un seguimiento avanzado de eventos de videos embebidos de Youtube utilizando la API de Youtube y algunas líneas de Javascript. Una vez en funcionamiento, podrás visualizar en GA todas las interacciones necesarias para comprender en detalle el comportamiento de los usuarios con tus videos (reproducciones, pausas, tiempo de visualización, etc.)

Nota: sólo funciona con el código asíncrono de Google Analytics

Cómo intalar el script?

1)    Crear una carpeta “/scripts/” en el servidor en dónde se encuentra alojado el sitio
2)    Descargar la librería “ga-youtube-tracker” desde la siguiente url:

http://code.google.com/p/ga-youtube-tracker/downloads/detail?name=ga-youtube-tracker.zip&can=2&q=

3)    Descromprimir el  archico .zip descargado y subir mediante ftp el archivo “ga_dpc_youtube.js” al directorio “/scripts” mencionado anteriormente.

Fácil, cierto?

Cómo utilizar la librería?

La utilización de la librería es muy simple  y sólo requiere el ID del video y algunas llamadas en javascript para su correcto funcionamiento. A continuación se detallan cada uno de los pasos:

1)  Dado que Internet Explorer no admite algunas funciones de la API de Youtube embebiendo los videos en .html ( <objet> y <embed>) se hará uso de la librería “SWobjet” la cual permite embeber contenido Flash de manera muy fácil utilizando Javascript. Para ello, se debe hacer una llamada a la librería de “SWobjet” a fin de permitir la compatibilidad con todos los navegadores (crossbrowsing)  la cual debe estar en cada una de las páginas en dónde se desee hacer un seguimiento de los videos embebidos:

<!--SWF Object Referencia necesaria para compatibilidad con navegadores-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

2) Embeber el video utilizando la sintaxis de SWobjet, para eso es necesario el “ID” del video correspondiente (rojo).

Para este ejemplo se utilizará el siguiente video:

Tony Melendez: http://www.youtube.com/watch?v=RoLoFe3Eze8

<!--Tony Melendez-->
<div id="Video Tony">
<a href="http://www.youtube.com/watch?v=RoLoFe3Eze8&amp;amp;amp;amp;fs=1" target="_blank"></a></div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myplayerid1" };
swfobject.embedSWF("http://www.youtube.com/v/RoLoFe3Eze8&amp;amp;amp;amp;fs=1&amp;amp;amp;amp;enablejsapi=1&amp;amp;amp;amp;playerapiid=myplayerid1", "Video Abtronic X2", "425", "344", "8", null, null, params, atts);
</script>  

Nota: Para el correcto funcionamiento del Script es necesario que el <div> en dónde se encuentra el video posea un ID descriptivo.

3)    Por último, se debe hacer la llamada a la librería “ga-youtube-tracker” a fin de poder realizar el seguimiento de eventos.

<!--Componente tracking Youtube-->
<script src="/scripts/ga_dpc_youtube.js"></script>
<!--Inicializar componente-->
<script>
try{ function yt_callback(category,action,label,value){
_gaq.push(['_trackEvent',category,action,label,value]);
}
var ytTracker = new YoutubeTracker(false, yt_callback, true);}catch(e){}

</script>

Ya está casi listo! Ahora, para corroborrar su funcionamiento debemos ingresar a la pestaña de “Seguimiento de Eventos” en la sección contenido de nuestra cuenta de Google Analytics.

La librería permite hacer un seguimiento de los siguientes eventos en nuestros videos:

1)    Cued (video iniciado)
2)    Play (clicks al botón “play”)
3)    Paused (video pausado)
4)     Ended (video finalizado)
5)    Fast-Forward (video adelantado)
6)    Rewind (video rebobinado)
7)    View-Range (cuánto tiempo el video fue visto?)

Las categorías de cada uno de los eventos están definidas por el ID del video con el siguiente formato: youtube-video:YouTube-Video-ID

Haciendo click en cualquiera de ellos, se podrán ver las acciones (play, pausa, reproducciones, etc) correspondientes al mismo del siguiente modo:

Al hacer click en cualquier de las acciones se podrá visualizar el rango de tiempo en segundos correspondiente a esa acción:

Así de simple! Ahora ya puedes obtener valiosas métricas de tus videos embebidos.

Te pareció util este post?

Via: Direct Performance

Tagged as: Google analytics, Tutoriales, videos