The following is a guest blog in Spanish from Gustavo Cornejo of Multiplica, one of the members of our Consultant Network (YWACN). They are located in Barcelona and specialize in web measurement, testing, and intelligent analysis.  Update 11/2/1: We’ve added an English version of this blog post
here.

Para el seguimiento de webs con entornos seguros es necesario implementar dos códigos diferentes utilizando Yahoo Web Analytics, o simplemente utilizar siempre el código para entornos seguros.

Alguno de los inconvenientes; el seguimiento y la inconsistencia en el código, errores en la implementación. Utilizando sólo el código para entornos seguros estamos penalizando un poco más la carga del código en todas las páginas que no requieren elementos seguros.

Una solución es integrar un discriminador según el protocolo utilizado en la página para cargar para cargar el código necesario. Adicionalmente, tendremos que saber cuándo se carga para poder utilizar las funciones necesarias para el seguimiento y no provocar errores en la ejecución.

La solución se separa en 4 partes:

1. TrackPage. Función para realizar el tracking de la página.
2. Carga dinámica de JavaScript. Carga del JS adecuado de YWA.
3. Ejecución de TrackPage. Una vez cargado el JS anterior, ejecutar  TrackPage.
4. NoScript. Elemento para el seguimiento sin JS.

TrackPage

Código:

function TrackPage(docName, docGroup){
	var _yat;
	if(typeof(docName)=="undefined") docName="";
	if(typeof(docGroup)=="undefined") docGroup="";
	try{
	_yat = YWA.getTracker("1000621731362");
	_yat.setDocumentName(docName);
	_yat.setDocumentGroup(docGroup);
	//_yat.setDomains("*.metriplica.com");
	//_yat.setCookieDomain("www.metriplica.com");
	//_yat.setMemberId("");
	_yat.submit();
	}catch(err){
	 if(typeof(console)=="undefined")
	  console.log("Error tracking Yahoo: %o", err);
	};
 };

Explicación:

Una función que recibe dos parámetros opcionales de entrada: docName y docGroup.

La primera línea declara la variable _yat que utilizaremos para el seguimiento de YWA. Las siguientes dos líneas permite llamar la función sin parámetros, lo cual inicializa las variables docName y docGroup como cadenas vacías, “”.

Las siguientes líneas siguientes intentan ejecutar el tracking de YWA dentro de un try-catch, si no hay errores enviará la información a Yahoo, y si sucede algún error se mostrará en la consola de Firebug, solo si existe.

Carga dinámica de JavaScript

Código:

(function(d, t){
 var s, h;
 s = d.createElement(t);
 s.type = 'text/javascript'; s.async = 1;
 s.src = ('https:' == d.location.protocol ? 'https://s' : 'http://d') + '.yimg.com/mi/ywa.js';
 h = d.getElementsByTagName(t)[0];
 h.parentNode.insertBefore(s, h);
})(document, 'script');

Explicación:

El código es muy similar con el código de carga asíncrona de GA, lo importante del código es la identificación del protocolo para cargar una URL u otra, según el caso. Para el caso seguro utilizar:

‘https://s’ + ‘.yimg.com/mi/ywa.js’

Ya para el caso no seguro, el siguiente:

‘http://d’ + ‘.yimg.com/mi/ywa.js’

Ejecución de TrackPage

Código:

s.onreadystatechange = function () {
  if (js.readyState == 'complete') {
   TrackPage();
  }
 }
 s.onload = function () {
  TrackPage();
 };

Explicación:

Añadimos al código de Carga dinámica las instrucciones anteriores, justo después de definir la fuente (atributo SRC) de la etiqueta SCRIPT.

Para determinar cuando finaliza la carga de un JavaScript añadido dinámicamente es necesario hacerlo a través de dos eventos por un tema de interoperabilidad entre navegadores. Utilizando para IE el evento onreadystatechange, y para los demás el onload. Dentro de cada uno está el llamado a la función TrackPage sin argumentos, pero se pueden establecer con valores personalizados.

NoScript

Código:

<noscript>
<div><img src="https://a.analytics.yahoo.com/p.pl?a=10001502141662&amp;js=no" width="1" height="1" alt="" /></div>
</noscript>

Explicación:
Utilizamos el código de la imagen de entornos seguros. Esto para evitar que en las zonas seguras salten alertas sobre elementos inseguros dentro de la página.

El código completo es:

<script type="text/javascript">
 function TrackPage(docName, docGroup){
	var _yat;
	if(typeof(docName)=="undefined") docName="";
	if(typeof(docGroup)=="undefined") docGroup="";
	try{
	_yat = YWA.getTracker("1000621731362");
	_yat.setDocumentName(docName);
	_yat.setDocumentGroup(docGroup);
	//_yat.setDomains("*.metriplica.com");
	//_yat.setCookieDomain("www.metriplica.com");
	//_yat.setMemberId("");
	_yat.submit();
	}catch(err){
	 if(typeof(console)!="undefined")
	  console.log("Error tracking Yahoo: %o", err);
	};
 };
(function(d, t){
 var s, h;
 s = d.createElement(t);
 s.type = 'text/javascript'; s.async = 1;
 s.src = ('https:' == d.location.protocol ? 'https://s' : 'http://d') + '.yimg.com/mi/ywa.js';
 s.onreadystatechange = function () {
  if (js.readyState == 'complete') {
   TrackPage();
  }
 }
 s.onload = function () {
  TrackPage();
 };
 h = d.getElementsByTagName(t)[0];
 h.parentNode.insertBefore(s, h);
})(document, 'script');
</script>
<noscript>
<div><img src="https://a.analytics.yahoo.com/p.pl?a=10001502141662&amp;js=no" width="1" height="1" alt="" /></div>
</noscript>

Utilizando el código anterior nos permite utilizar el mismo código para todas las páginas, y además obtendremos una función genérica para poder hacer seguimiento de acciones adicionales dentro de la misma página.