Como integrar Google Analytics en vídeos HTML5 (y adiós al Flash)

Publicado en Configuración Avanzada el 16 de septiembre de 2010 por .

Uno de los principales problemas que aparecen al intentar analizar el uso que hacen los usuarios de nuestros contenidos de video es la integración de Flash con Google Analytics y la dificultad añadida que representa modificar el código escrito en ActionScript o controlar la versión de código que tenemos en producción.

Estos problemas se pueden incrementar aún más si los datos que obtienes en tu Analytics no son los esperados y además no dispones de acceso al código que se encuentra actualmente en producción.

El futuro nos ofrece una gran oportunidad para dejar de lado esas dudas y eliminar a la vez la integración de varias tecnologías. Para ello disponemos de la nueva revisión del estándar de HTML (todavía bajo desarrollo), el ya tan famoso HTML5. Y aún más, nos quitamos de encima el tener que aprender otro lenguaje de programación como ActionScript.

Implementación de Google Analytics con HTML5

Los conocimientos que se requieren de Javascript son bastante básicos y el código de HTML5 es muy simple.

<video controls autoplay id="super-video" width="250">
	<source src="videos/video1.ogg">
		Your browser does not support the video tag
	</source>
</video>

Lo más importante a destacar es la inicialización de los eventos del player de video que queremos capturar una vez se ha cargado la página completa en el navegador y antes de que esta sea renderizada para que la visualice el usuario. En ese momento vamos a añadir el código Javascript que nos permite capturar los eventos que lanza el player durante la reproducción o bajo la interacción del usuario.

	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);
	}

En cada una de las funciones que definimos (videoPlay, videoPause y videoEnd) realizamos la llamada a _trackEvent de Google Analytics y ahora ya podemos ir a nuestro analytics y analizar qué uso han hecho nuestros usuarios de ese contenido concreto.

Tracking de eventos de vídeo

Ejemplo

Para comprobar que todo esto funciona correctamente, he implementado un pequeño ejemplo que lanza un evento cada vez que se pulsa el botón de Reproducir y/o Pausar o el usuario llega al final de la reproducción del video.

Ventajas de usar vídeos con HTML5

  • Eliminamos la integración de HTML con Flash y Google Analytics.
  • No necesitamos aprender ActionScript.
  • Podemos ver fácilmente que estamos analizando en Analytics dando un vistazo al archivo HTML correspondiente.
  • Evitamos problemas de versiones del player de video en nuestros servidores de producción.
  • Nuestra web con contenido de vídeos se verán sin ningún problemas en un iPad o iPhone (recordemos que Apple ha eliminado Flash de sus dispositivos).
  • Nuestra web estará preparada para el futuro y para los amigos del SEO, el código HTML5 se posiciona en Google mucho mejor que el actual.

Inconvenientes de usar HTML5

  • Actualmente no todos los navegadores soportan HTML5.
  • La versión del estándar de HTML5 no está finalizada y está sujeta a cambios.

Podéis probar el código en http://trucosgoogleanalytics.srvwebdev01.havasmedia.com/html5/video.htm

Etiquetas: , , , ,

Sobre Germán Munuera

Informático y ex-fundador de una empresa de Digital Signage. He trabajado en empresas de Mobile Marketing y actualmente desarrollo funciones de analista Web en Elisa Interactive. Apasionado de internet, me gusta la fotografía y los viajes.

Puedes encontrar a Germán en:

Google+ LinkedIn Flickr


8 Comentarios en Como integrar Google Analytics en vídeos HTML5 (y adiós al Flash)

  1. Ferriol Egea

    Excelente artículo Germán….éste es un paso adelante espectacular. Todo el mundo que utiliza contenido audiovisual debería guardar este articulo en sus facoritos…

    Live from Mountain View..

  2. Pamela

    Muchas gracias seguro que nos es de gran ayuda

  3. Tutor

    Me lo llevo! :D

    Gracias por el código, voy tras el conocimiento de HTML5 pinta bien, a ver si no la cagan.

    Un saludo!

  4. Raquel

    Hola, no puedo reproducir el video desde iphone… como es posible hacerlo?? No se supone que es totalmente compatible con html5??

  5. Germán Munuera

    Hola Raquel,

    disculpa que haya tardado tanto en responder a tu pregunta. Ahora ya puedes acceder, el único motivo por el que no podías hacerlo es porque el video solo se había subido en formato ogg que no lo soporta iPhone ni iPad, ahora también se ha subido en formato mp4 y no deberías tener ningún problema.

    En lo que respecta al código en html5, solo hay que añadir un nuevo source bajo el tag de video como se muestra a continuación:


    <video controls autoplay id="super-video" width="250">
    <source src="videos/video1.mp4" type="video/mp4"/>
    <source src="videos/video1.ogg" type="video/ogg">
    Your browser does not support the video tag
    </source>
    </video>

  6. Raquel

    Gracias por tu respuesta.

  7. Luis

    Está muy bien el artículo, bien explicado, la pena que haya que esperar a que todos los navegadores soporten HTML5.

  8. Pablo

    EXCELENTE!!!! Muchas gracias por el ejemplo y la explicación!!

    Saludos.

    Pablo

5 Trackbacks For This Post

  1. Tweets that mention Como integrar Google Analytics en vídeos HTML5 (y adiós al Flash) | Trucos Google Analytics -- Topsy.com Says:

    [...] This post was mentioned on Twitter by Loïc Gerbaud, Christian Oliveira, ghostmou, Esteban de Aymerich, Simón Martín and others. Simón Martín said: RT @crismataix: Como integrar Google Analytics en vídeos HTML5 (y adiós al Flash) http://ow.ly/2F3EB vía @germanmunuera [...]

  2. Como integrar Google Analytics en vídeos HTML5 (y adiós al Flash) | Buzz - Actualidad en español Says:

    [...] Ir a anotación original [...]

  3. Código ético o deontológico para Analistas Web | WebAnalytics.ES Says:

    [...] Como integrar Google Analytics en vídeos HTML5 (y adiós al Flash) en Trucos Google Analytics [...]

  4. Cuanto tiempo tarda Google Analytics en mostrar las visitas? | Trucos Google Analytics Says:

    [...] un seguimiento un poco más al momento cuando hay algun evento más significativo, como por ejemplo el primer post de @germanmunuera en Trucos Google Analytics, que siguió con mucha atención por todos los [...]

  5. Tracking HTML5 Video with Google Analytics (and goodbye to Flash) | Elisa DBI Says:

    [...] A post written by Germán Munuera on http://www.trucosgoogleanalytics.com and translated into English. You can find the original here. [...]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>