Forzar con javascript las campañas capturadas por Google Analytics


Debo reconocer que llevo más de un año buscando la manera de connseguir esto y creo que por fin he dado con una forma cómoda y que funciona. Hablo de la posibilidad de definir nosotros mismos durante la ejecución de la página de la campaña que debe capturarse en Google Analytics sin estar obligados a usar el sistema de variables en la url que usa el sistema. Antes de seguir advertir que este post es para técnicos, no te recomiendo que intentes copiar y pegar sin saber lo que vas a hacer ya que corres el riesgo de que analytics deje de funcionar y pierdas unos cuantos días de visitas en tu Google Analytics…

Para los más despistados, recordarles como funciona el sistema de campañas en Google Analytics. Básicamente Google pone a nuestra disposición 5 dimensiones con las que clasificar nuestras visitas para poder sacar reportes serios sobre como actúan las distintas visitas que provocamos (pagando o con actividad social) hacia nuestra página.

Para ello nos permite incluir en las urls de los links que generamos una variable para cada una de estas 5 dimensiones de campaña: Fuente, Medio, Nombre de campaña, Término y Contenido. Usando bien estas 5 dimensiones es dificil que alguna información escape de nuestros reportes pero… claro… no siempre podemos crear las urls como a Google le da la gana. Ni siempre generamos nosotros los links ni siempre es Google Analytics lo más importante de nuestro negocio… la verdad es que ahí a Google (o a urchin en su momento) se le ha ido la olla limitándonos tanto las acciones. Por lo tanto vamos a arreglar un poco las cosas y vamos a añadir la posibiliad de definir cualquiera de estas variables en el javascript de la página en vez de en la url.

Para ello (y por dar una explicación breve de lo que vamos a hacer) lo que vamos a hacer es. (1) Iniciar analytics antes de capturar la página vista (2) meternos en medio de este proceso y alterar las coockies que crea Google Analytics para capturar las variables de campaña e incluir las nuestras si así lo deseamos (3) Crear funciones cómodas para hacer estos cambios y un sistema para poder llamar a estas funciones cuando queramos en nuestro código javascript y (4) lanzar el tracking de Google Analytics de nuestra página que recogerá las campañas de las coockies que hemos modificado y por tanto «engañar» a analytics.

De todos estos el punto más complejo es el 3, el que nos permitirá jugar de forma cómoda con las campañas. Este código lo he dejado ya preparado y paso a incuirlo en este post. Tu simplemente debes garantizar que lo incluyes antes de la llamada al código de Google Analytics. Lo mejor será que crees un archivo .js con este código y lo incluyas al principio de tu cabecera de todas las páginas. El código a incluir es el siguiente.

var _gaCamp={
get:function (){var re = new RegExp("(?:^| )__utmz=([^;]*)", "i");var matches = document.cookie.match(re);return matches && matches.length == 2 ? matches[1] : null;},
set:function (value,days){var date=new Date;d=document.domain.toString().split("."); d=d[d.length-2]+'.'+d[d.length-1]; date.setTime(date.getTime() + (typeof days != "undefined" ? days : 3) * 24 * 60 * 60 * 1000);var expires = "; expires=" + date.toGMTString();document.cookie = '__utmz' + ("=" + value + expires + "; path=/; domain=." + d);},
setSource:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmcsr/))_gaCamp.set(ac.replace(/utmcsr=[^\|]*/,"utmcsr="+value));else _gaCamp.set("|utmcsr="+value);},
setName:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmccn/))_gaCamp.set( ac.replace(/utmccn=[^\|]*/, "utmccn="+value) );else _gaCamp.set("|utmccn="+value);},
setMedium:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmcmd/))_gaCamp.set( ac.replace(/utmcmd=[^\|]*/, "utmcmd="+value) );else _gaCamp.set("|utmcmd="+value);},
setTerm:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmctr/))_gaCamp.set( ac.replace(/utmctr=[^\|]*/, "utmctr="+value) );else _gaCamp.set("|utmctr="+value);},
setContent:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmcct/))_gaCamp.set( ac.replace(/utmcct=[^\|]*/, "utmcct="+value) );else _gaCamp.set("|utmcct="+value);},
i:[],init:function(f){_gaCamp.i.push(f);},launchInit:function(){for(var i=0;i<_gaCamp.i.length;i++)_gaCamp.i[i]();}
};

Este código va a poner a nuestra disposición 6 funciones que serán las que usemos durante nuestro javascript (siempre después de haber incluido este nuevo código o las funciones aun no existirán) para manipular las campañas de analytcs.

_gaCamp.init()

Esta es la función creada para ir incorporando nuestro código en ella. De esta forma no tenemos que preocuparnos de cuando lanzamos nuestras funciones de manipulación de campañas. En cualquier momento lanzamos init() y este se guardará para ser lanzado en el momento correcto dentro del codigo de analytics.

_gaCamp.init(function () {
  // aqui incluye tu código de manipulación de campañas de analytics
});

_gaCamp.setSource()
_gaCamp.setMedium()
_gaCamp.setName()
_gaCamp.setTerm()
_gaCamp.setContent()

Estas 5 funciones son las creadas para maniular nuestras campañas de Analytics. Así solo tenemos que llamarlas e indicar dentro nuestra nueva variable de campaña. Nota: siempre hay que llamar a estas funciones dentro de init() o si no manipularemos la campaña antes o después de tiempo y no funcionará exactametne como deseamos...

_gaCamp.init(function () {
  _gaCamp.setSource("mi-nueva-fuente");
  _gaCamp.setMedium("mi-nuevo-medio");
  _gaCamp.setName("mi-nuevo-nombre-de-campana");
});

Para el resto de los puntos (1), (2) y (4), y con el código anteriormente citado ya incluido, simplemente tenemos que alterar el código del pixel de analytics y añadirle una linea nueva en medio de este que será la que obligue a iniciarse a las variables de analytics y nos permita meternos en medio del proceso...

Este es el código de pixel de analytics normal:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-123456-78']);
_gaq.push(['_trackPageview']);
  
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Y este sería el nuevo pixel con nuestra nueva línea de código:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-123456-78']);
// Nueva línea para poder manipular las campañas
_gaq.push(['_initData'],function(){_gaCamp.launchInit();});
// Fin de la nueva línea
_gaq.push(['_trackPageview']);
  
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Y ya está! Nuestras camapañas empezarán a ser manipuladas desde ese instante. Cabe destacar que debemos tener mucho cuidado a la hora de crear nuestros fragmentos de javascript dentro de la función Init() ya que al estar este código dentro de un try() de javascript si algo fallase no vamos a ver ningún error en nuestra consola de errores. La mejor forma de trabajar con este sistema es instalar algun plugin en nuestro navegador que nos permita monitorizar como capturamos las campañas de analytics. A mi personalmente me gusta mucho el plugin de Chrome "GA Debug" el cual nos indica dentro de la consola de javascript todo lo que va capturando analytics a medida que lo captura.

Para acabar con este post, dejaré un ejemplo de como alterar las campañas de analytics para que toda visita desde facebook, twitter o linkedin cuente como visita desde una nueva fuente llamada "social media". Para poder comprirlo todo en un solo ejemplo meteré todos los pasos dentro de la misma etiquea script. Cabe decir que esta no es la forma correcta y que siempre va a ser mejor que pasemos todo el código que podamos a archivos js separados.

// codigo para añadir las funciones nuevas
var _gaCamp={
get:function (){var re = new RegExp("(?:^| )__utmz=([^;]*)", "i");var matches = document.cookie.match(re);return matches && matches.length == 2 ? matches[1] : null;},
set:function (value,days){var date=new Date;d=document.domain.toString().split("."); d=d[d.length-2]+'.'+d[d.length-1]; date.setTime(date.getTime() + (typeof days != "undefined" ? days : 3) * 24 * 60 * 60 * 1000);var expires = "; expires=" + date.toGMTString();document.cookie = '__utmz' + ("=" + value + expires + "; path=/; domain=." + d);},
setSource:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmcsr/))_gaCamp.set(ac.replace(/utmcsr=[^\|]*/,"utmcsr="+value));else _gaCamp.set("|utmcsr="+value);},
setName:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmccn/))_gaCamp.set( ac.replace(/utmccn=[^\|]*/, "utmccn="+value) );else _gaCamp.set("|utmccn="+value);},
setMedium:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmcmd/))_gaCamp.set( ac.replace(/utmcmd=[^\|]*/, "utmcmd="+value) );else _gaCamp.set("|utmcmd="+value);},
setTerm:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmctr/))_gaCamp.set( ac.replace(/utmctr=[^\|]*/, "utmctr="+value) );else _gaCamp.set("|utmctr="+value);},
setContent:function(value){var ac=_gaCamp.get();if (ac && ac.match(/utmcct/))_gaCamp.set( ac.replace(/utmcct=[^\|]*/, "utmcct="+value) );else _gaCamp.set("|utmcct="+value);},
i:[],init:function(f){_gaCamp.i.push(f);},launchInit:function(){for(var i=0;i<_gaCamp.i.length;i++)_gaCamp.i[i]();}
};

// empezamos con la funcion de cambios
_gaCamp.init(function () {
  // miramos si la visita viene de facebook
  if (document.referrer.match(/^http[s]?:\/\/www\.facebook\.com/)) {
    _gaCamp.setSource("facebook");
    _gaCamp.setMedium("social-media");
    _gaCamp.setName("campana-forzada");
  }
  // ahora miramos si viene de twitter
  if (document.referrer.match(/^http[s]?:\/\/www\.twitter\.com/)) {
    _gaCamp.setSource("twitter");
    _gaCamp.setMedium("social-media");
    _gaCamp.setName("campana-forzada");
  }
  // ahora miramos si viene de twitter
  if (document.referrer.match(/^http[s]?:\/\/www\.linkedin\.com/)) {
    _gaCamp.setSource("linkedin");
    _gaCamp.setMedium("social-media");
    _gaCamp.setName("campana-forzada");
  }
});

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2519041-8']);
  _gaq.push(['_initData'],function(){_gaCamp.launchInit();});
  _gaq.push(['_trackPageview']);
  
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
,

Una respuesta a “Forzar con javascript las campañas capturadas por Google Analytics”

  1. Muy isrntenaete el post! Cual es el estudio que mencionas que dice que el 90% de las instalaciones estaban mal? en mi experiencia es mas bien el 99%

Deja una respuesta

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