Analítica web
Reflexiones sobre madurez digital, datos y tecnología

Seguimiento de vídeos JavaScript con Adobe SiteCatalyst (post técnico)

Se lee en 5 minutos

Seguimiento de video con SiteCatalystBuenos días, aquí va un post para quienes estáis involucrados en implantaciones avanzadas de Omniture (Adobe SiteCatalyst), buscando aportar trucos sencillos de cara a la medición de vídeos con la versión más extendida en la práctica de este producto: SiteCatalyst 14 (a medida que vayamos contando con una base más extensa de usuarios en la versión 15 iremos facilitando algunas actualizaciones específicas).

Responderemos a preguntas frecuentes como son:

  • ¿Qué debo incluir?
  • ¿Dónde lo debo incluir?
  • ¿Puede hacerse de manera más personalizada?

Empezaremos comentando que tendremos varias formas de realizar el seguimiento de vídeos JavaScript, de manera automática, de manera manual y de la manera personalizada, que más adelante veremos el porqué de este nombre.

Lo primero que debemos hacer es incluir en nuestro código JavaScript de SiteCatalyst  “s_code.js”, el siguiente fragmento de código para activar el seguimiento de vídeos:

s.doPlugins=s_doPlugins
/*
* Module Media Configuration
*/
s.loadModule("Media");
s.Media.autoTrack=false;
s.Media.trackWhilePlaying=true;
s.Media.trackVars="";
s.Media.trackEvents="";
s.Media.trackMilestones="25,50,75,100";
s.Media.monitor = function (s,media) {
}
/************************** PLUGINS SECTION *************************/
/* You may insert any plugins you wish to use here. */
/********************************************************************/
/*
* Module: Media
*/
s.m_Media_c="var m=s.m_i('Media');m.cn=function(n){var m=this;return m.s.rep(m.s.rep(m.s.rep(n,"\n",''),"\r",''),'--**--','')};m.open=function(n,l,p,b){var m=this,i=new Object,tm=new Date,a='',"
+"x;n=m.cn(n);l=parseInt(l);if(!l)l=1;if(n&&p){if(!m.l)m.l=new Object;if(m.l[n])m.close(n);if(b&&b.id)a=b.id;for (x in m.l)if(m.l[x]&&m.l[x].a==a)m.close(m.l[x].n);i.n=n;i.l=l;i.p=m.cn(p);i.a=a;i.t=0"
+";i.ts=0;i.s=Math.floor(tm.getTime()/1000);i.lx=0;i.lt=i.s;i.lo=0;i.e='';i.to=-1;m.l[n]=i}};m.close=function(n){this.e(n,0,-1)};m.play=function(n,o){var m=this,i;i=m.e(n,1,o);i.m=new Function('var m"
+"=s_c_il['+m._in+'],i;if(m.l)...//continua

Estos módulos son proporcionados por Adobe para incluirlos en nuestro s_code.js de manera que para cada una de las formas de seguimiento podemos configurar los parámetros de una u otra forma.

Seguimiento automático

Para este tipo de seguimiento lo único que debemos hacer es ajustar el parámetro de seguimiento automático a cierto (true).

s.Media.autoTrack=true;

Además de esto, podemos configurar los hitos a alcanzar bien en porcentajes o en segundos.

s.Media.trackMilestones="25,50,75,100";//En este caso esta configurado en porcentajes, para hacerlo por segundos deberíamos usar trackSeconds

Seguimiento manual

Para este seguimiento tendremos que tener varias cosas en cuenta, lo primero será incluir en nuestra web un vídeo definido con las siguientes funciones:

//Vídeo JavaScript embebido en nuestra web
function start(){
	s.Media.open("Nombre del vídeo",Time,"Reproductor"); //Time será el tiempo de duración de nuestro video
	s.Media.play("Nombre del vídeo",0);
	}
function pause(){
	s.Media.stop("Nombre del vídeo",offset); //offset debe contener el tiempo de reproducción en segundos del video cuando se hace click.
	}
function play(){
	s.Media.play("Nombre del vídeo",offset); //offset debe contener el tiempo de reproducción en segundos del video cuando se hace click.
	}

function fin(){
	s.Media.stop("Nombre del vídeo",Time); //Time será el tiempo de duración de nuestro video
	s.Media.close("Nombre del vídeo");
	}

Por otro lado tendremos en nuestro archivo Javascript el fragmento de código que teníamos también en el modo automático para activar el seguimiento de vídeos.

s.doPlugins=s_doPlugins
/*
* Module Media Configuration
*/
s.loadModule("Media");
s.Media.autoTrack=false;
s.Media.trackWhilePlaying=true;
s.Media.trackVars="";
s.Media.trackEvents="";
s.Media.trackMilestones="25,50,75,100";
s.Media.monitor = function (s,media) {
}
/************************** PLUGINS SECTION *************************/
/* You may insert any plugins you wish to use here. */
/********************************************************************/
/*
* Module: Media
*/
s.m_Media_c="var m=s.m_i('Media');m.cn=function(n){var m=this;return m.s.rep(m.s.rep(m.s.rep(n,"\n",''),"\r",''),'--**--','')};m.open=function(n,l,p,b){var m=this,i=new Object,tm=new Date,a='',"
+"x;n=m.cn(n);l=parseInt(l);if(!l)l=1;if(n&&p){if(!m.l)m.l=new Object;if(m.l[n])m.close(n);if(b&&b.id)a=b.id;for (x in m.l)if(m.l[x]&&m.l[x].a==a)m.close(m.l[x].n);i.n=n;i.l=l;i.p=m.cn(p);i.a=a;i.t=0"
+";i.ts=0;i.s=Math.floor(tm.getTime()/1000);i.lx=0;i.lt=i.s;i.lo=0;i.e='';i.to=-1;m.l[n]=i}};m.close=function(n){this.e(n,0,-1)};m.play=function(n,o){var m=this,i;i=m.e(n,1,o);i.m=new Function('var m"
+"=s_c_il['+m._in+'],i;if(m.l)...//continua

En este caso, la función de seguimiento automático deberá tomar valor falso (false).

s.Media.autoTrack=false;

Personalización del módulo

Ahora vamos a ir un paso más allá y personalizaremos el seguimiento de nuestro vídeo, para ello debemos fijarnos en la función monitor(), que aparece vacía en los ejemplos anteriores.

s.Media.monitor = function (s,media) {
}

Dentro de esta función es donde se nos permite hacer un seguimiento personalizado, ¿Qué variables de conversión (eVars) o tráfico (props) quiero rellenar? ¿Qué eventos quiero lanzar?. Vamos a poner un pequeño ejemplo de como personalizaríamos esta función.

//Lo primero iniciaremos las variables para hacer el seguimiento del vídeo
 var tracked25=false

s.Media.monitor = function (s,media) {

	if (media.event == "OPEN") {  //Se ejecuta cuando se inicia el video.
	    s.Media.trackVars = "eVar1,events";
            s.Media.trackEvents = "event1";
            s.events="event1";
            s.eVar1 = media.name;
            s.Media.track(media.name);
	}
        if ((!tracked25) && (media.percent >= 25) { //Se ejecuta al 25% completado
            s.Media.trackVars = "eVar1,events";
            s.Media.trackEvents = "event2";
            s.events="event2"
            s.eVar1 = media.name;
            s.Media.track(media.name);
            tracked25 = true;
        }

        if (media.event == "CLOSE") { //Se ejecuta cuando se complete el video.
            s.Media.trackVars = "eVar1,events";
            s.Media.trackEvents = "event3";
            s.events="event3"
            s.eVar1 = media.name;
            s.Media.track(media.name);
            tracked25=false; //Reiniciamos la variable de control de 25% completado
	}

}
/*
 * Module: Media
 */
s.m_Media_c="var m=s.m_i('Media');m.cn=function(n){var m=this;return m.s.rep(m.s.rep(m.s.rep(n,"\n",''),"\r",''),'--**--','')};m.open=function(n,l,p,b){var m=this,i=new Object,tm=new Date,a='',"
+"x;n=m.cn(n);...//continua

Ahora podéis comprender el porqué de llamar a esta manera “personalizada”, como vemos en el ejemplo se rellenan y envían unas cuantas eVars, Props y Events en base al porcentaje de reproducción del vídeo. En este caso solo hemos puesto para el 25%, pero de manera similar podríamos hacer lo mismo para otros porcentajes, por ejemplo cuando se consuma al 50%, 75% o 100% de reproducción. Y recordad que no solo en base al porcentaje podemos hacerlo, si no que también indicando los segundos de reproducción (sustituyendo la función trackMilestones por trackSeconds).

Espero que os haya quedado algo más claro donde va incluido el código para el seguimiento de los vídeos JavaScript con SiteCatalyst 14.

Escribe tu comentario

4 × uno =

Navegar