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…
Tabla de contenidos
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.
Hola Marta,
Sí que es posible, para ello necesitarás utilizar la api de Vimeo:
http://developer.vimeo.com/player/js-api
Saludos!
Hola¡¡¡¡ Tu artículo me ha parecido muy útil de cara a los videos de Youtube, en mi caso estoy buscando cómo medir con Google Analytics los videos embebidos de vimeo. Veo que estás muuucho más puesto en estos temas que yo ejeje y agradecería que me dijeras si es posible y si conoces la manera de hacerlo. Muchas gracias de antemano¡¡¡¡
Saludos, me ha parecido muy útil tu artículo, pero tengo una duda/problema. Los vídeos los he incluido como iframe pues necesitamos que los vídeos se vean en tablet y móviles de apple. ¿sabes si hay alguna forma de hacer tracking a estos vídeos aunque sea complicado.?
Gracias
Hola Luis,
Tienes que habilitar el tracking entre dominios (para pasar las cookies) si cargas el contenido desde otro sitio y configurar lo siguiente:
https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSite#trackingIFrames
EPIC WIN #Analytics
Hola, quisiera saber como podria incluir el analytics para controlar la duraccion de streaming de una emision en directo, me refiero a controlar el tiempo que la gente esta oyendo la emision.
El codigo que tengo para reproducir es:
var so = new SWFObject(“nativeradio2small.swf”, “nativeradio2small”, “200″, “50″, “10″, “#cccccc”);
so.addParam(“scale”, “noscale”);
so.addVariable(“swfcolor”, “B89E7A”);
so.addVariable(“swfwidth”, “200″);
so.addVariable(“swfradiochannel”, “Nombre Programa”);
so.addVariable(“swfstreamurl”, “url del fichero”);
so.addVariable(“swfpause”, “0″);
so.write(“flashcontent1″);
Esto es audio, pero no tengo claro si funciona diferente, te agradecere una ayudita..
Gracias.
Hola Natzir,
Muy bueno el post, me gustaría saber si me es posible trackear videos que no son subidos por mí, simplemente son enlazados desde mi sitio web con la api js activada. Saludos.
Hola Francisco!
¿Es lo que he puesto en el post no? quizás no he entendido tu pregunta.
Gracias, me has respondido, tenía la duda si esto es posible para cualquier vídeo o sólo para vídeos de los cuales tú eres el propietario en youtube (están en tu canal).
En la api de youtube analytics no he encontrado ninguna información al respecto.
Gracias de nuevo.
Hola Natzir, tengo algunas dudas con el ID de la cuenta de Google Analytics en mi canal de Youtube, puedo insertar lo mismo de mi página web ?
Lo que paso fue que inserte el mismo ID, solo me di cuenta porque mis visitas directas aumentaron muchísimo y ya realizando una búsqueda avanzada descobri que cuando agrego una dimension secundaria de Hostname veo que son de Youtube, al principio imaginé que pudieran ser visitas referidas de Youtube a mi sitio (que podria ser un error de los channel group), pero hablando con un experto allá me dijeron que son las visitas al canal de Youtube en el cual me recomendaron a implementar un ID distinto, vendo tu articulo ahora me quedo con dudas de cual ID implementar.
Buen artículo, enhorabuena.
Tengo una duda ¿Se contabilizan las visitas en el contador del vídeo en Youtube?
¡Gracias!