Trackear visitas de vídeos HTML5 con Google Analytics

¿Hay una solución sencilla para realizar el seguimiento del número de espectadores del vídeo HTML 5 que has publicado en tu web? La respuesta es sí. Puedes utilizar una combinación de Google Analytics y unas pocas líneas de código para obtener un análisis detallado del engagement del vídeo.

Puede realizar un seguimiento del número total de espectadores del vídeo, el número de espectadores que ha visto un porcentaje mínimo del vídeo que hayas definido, el número de espectadores que ha terminado de ver el video y muchas más estadísitcas a través de Google Analytics. Vamos a ver hasta qué punto puedes utilizar Google Analytics para un gran análisis del contenido publicado en tu web. ¿Quieres saber cómo realizar esto? Estate atento...

Código HTML y Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
......
......
......
});
</script>
//HTML Code
<video id="video"  width="100%"  controls>
<source src="video.mp4" type="video/mp4">
</video>

Google Analytics

Crea una cuenta gratuita de Google Analytics y añade una propiedad para tu sitio web. En el código solo tienes que modificar el valor UA-YOUR-GA-ID por el ID de tu código de Analytics.

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-YOUR-GA-ID', 'auto');
ga('send', 'pageview');
</script>

jQuery Bind Timeupdate

Vamos a analizar un poco el código jQuery. $("#video").bind("timeupdate", function(){}, donde vídeo es el identificador del tag de vídeo, que se unirá con el timeline del vídeo. Esto llamará la función de Google Analytics una vez se haya pasado el 66%. Puedes modificar este valor en el código sin problema alguno.

var i=0;
$("#video").bind("timeupdate", function()
{
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration))
{
if(i<1)
{
/* Watched 66% */
ga('send', 'event', 'Videos', 'Watched','Video Title');
}
i=i+1; //Reset for duplicates 
}
});

Jquery Bind Ended

Esto funciona como la función anterior. Usando esto sabrás cuántas personas han terminado de ver el vídeo en cuestión.

var j=0;
$("#video").bind("ended", function()
{
if(j<1)
{
/* Finished */
ga('send', 'event', 'Videos', 'Finished','Video Title');
}
j=j+1; //Reset for duplicates
});

Widget de filtro de Google Analytics

Resultado

Código final

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i=0;
var j=0;

/* Video Watched */
$("#video").bind("timeupdate", function()
{
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration))
{
if(i<1)
{
/* Watched 66% */
ga('send', 'event', 'Videos', 'Watched','Video Title');
}
i=i+1; //Reset for duplicates 
}
});

/* Video Finished, Thanks */
$("#video").bind("ended", function()
{
if(j<1)
{
/* Finished */
ga('send', 'event', 'Videos', 'Finished','Video Title');
}
j=j+1; //Reset for duplicates
});

});
</script>
//HTML Code
<video id="video"  width="100%"  controls>
<source src="video.mp4" type="video/mp4">
</video>
//Google Analytics Code
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-YOUR-GA-ID', 'auto');
ga('send', 'pageview');
</script>

Fuente: 9lessons.info