5 Jun 2014
Lectura: 15 mins.
|
Dificultad:

Guía de Macros de Google Tag Manager

En Google Tag Manager, las macros son “cajas” o contenedores de datos que pueden almacenar diversos tipos de valores a los que se accede en tiempo real cada vez que se hace referencia a ellos. Son comunes a un contenedor de GTM y se crean desde su panel de administración. Su papel es similar al de las variables o funciones “get” en la mayoría de lenguajes de programación.
Las Macros se suelen representar en GTM como bloques de construcción. La verdad es que siempre he sido más de Tente que de Lego...
El dato que contienen puede ser tan sencillo como un atajo a un valor constante o tan complicado como el resultado de un cálculo complejo; en cualquier caso, la macro se ejecutará -recalculando el valor que contiene, si fuera necesario- cada vez que se acceda a ella.

Se identifican por un nombre descriptivo (ej. “element id”) y se puede hacer referencia a ellas -y con ello, al valor que contienen- citando su nombre entre dobles llaves, ej:

{{element id}}

Podremos hacer esto desde casi cualquier parte de Google Tag Manager donde podamos introducir un campo de texto: etiquetas, reglas de activación, e incluso dentro de otras macros o de código HTML o Javascript personalizado, siempre que lo hayamos introducido desde dentro de Tag Manager.

Su uso será especialmente importante en el caso de las reglas de activación, ya que en ellas es obligatorio el uso de macros como datos a evaluar en las condiciones.

En general, cada vez que tengamos un dato que queramos reutilizar, compartir entre etiquetas, calcular en tiempo real o utilizar en una regla de activación, utilizaremos una macro.

Gracias a los diversos tipos de macro y macros predefinidas ya creadas de que disponemos, tendremos la posibilidad de generar, almacenar y acceder a prácticamente cualquier tipo de dato en nuestras etiquetas. Veremos en detalle en qué consiste cada tipo de macro y qué podremos hacer con él.

Tipos de macro

Los tipos de macro disponibles son diferentes dependiendo de si estamos utilizando Google Tag Manager en una aplicación o sitio web o bien en una aplicación móvil. Nos centraremos únicamente en los primeros.

  1. Cadena constante
  2. URL
  3. URL de referencia HTTP
  4. Número aleatorio
  5. Cookie de origen
  6. Capa de datos
  7. Variable JavaScript
  8. Elemento DOM
  9. Evento personalizado
  10. Variable de evento automático
  11. Número de versión del contenedor
  12. Modo de depuración
  13. JavaScript personalizada
  14. Tabla de consulta

1. Cadena constante

Un valor fijo especificado previamente. Útil para valores globales que no cambian pero se repiten.

Ejemplo: Una buena práctica es crear una macro de cadena constante para guardar el código de seguimiento de Google Analytics. Así no es necesario recordarlo cada vez que se use, evita posibles errores y facilita que en un momento dado pueda cambiarse fácilmente.

macro-constante

2. URL

El URL actual o partes de él. En el parámetro Tipo de componente podemos especificar qué parte del URL queremos capturar:

  • URL completa: Valor por defecto. Todo el URL excepto el fragmento.
  • Protocolo: Protocolo de conexión (http o https)
  • Nombre del host: Nombre completo del servidor del URL (podemos especificar con o sin “www.” al principio, si lo tuviera)
  • Puerto: Puerto de conexión (normalmente 80 o 443 para http o https respectivamente)
  • Ruta: El URI, o la parte del URL que va detrás del nombre de host. Como parámetro adicional permite especificar Páginas predeterminadas cuyo valor será omitido automáticamente – esto se puede utilizar, por ejemplo, para que www.ejemplo.com/ y www.ejemplo.com/index.html se consideren como un mismo URL.
  • Consulta: Los parámetros del URL (la parte opcional que va tras un signo de interrogación “?“). Pueden ser todos -la cadena completa- o bien el valor de uno concreto. Así, de la URL http://ejemplo.com/buscar.php?q=hola&pag=1, el valor de la consulta q sería hola, y el de la consulta completa, q=hola&pag=1
  • Fragmento: Parte final opcional del URL, la que va detrás del carácter # (hash o ancla).

Adicionalmente, también disponemos de un parámetro adicional Origen de URL en el cual podremos especificar si, en lugar del URL actual, queremos procesar otro URL distinto que nosotros le proporcionemos a través de otra macro.

Ejemplos:

Esta combinación macro/regla nos permitirá una etiqueta que solo se active cuando se esté navegando de forma segura (https://):

macro-url-protocol

regla-url-https

Otra solución, utilizando macros predefinidas, podría haber sido directamente:

{{url}} empieza por "https://"

Otro ejemplo: Podemos aprovechar los parámetros standard de identificación de campañas personalizadas para Google Analytics (utm_campaign, utm_source, utm_medium…) para identificar y segmentar tráfico. La siguiente regla+macro identificaría visitas que hayan llegado a través de una campaña vía email:

macro-url-medium

regla-url-medium

3. URL de referencia HTTP

Como URL, pero en lugar del URL actual utiliza el referrer o URL de origen – la página visitada inmediatamente antes de la actual.

Ejemplo: La siguiente regla utiliza el referrer para detectar únicamente visitas que hayan llegado a través de la web Menéame:

regla-referrer

4. Número aleatorio

Un número aleatorio entre 0 y 2147483647. Puede servir para operaciones que requieran de un valor que sea diferente en cada ejecución (un identificador único, un URL modificado para evitar cacheado)…

Y sobre todo, también nos puede resultar útil para obtener muestreos parciales, realizar Tests A/B y, en general, casos en los que se quiera aplicar algo sólo en un determinado % de casos escogidos al azar.

Ejemplo: Una vez creada la macro correspondiente…

macro-aleatorio

La siguiente regla de activación hará que la etiqueta asociada se aplique sólo en el 50% de casos – por ejemplo para separar a los visitantes en dos grupos para un testeo A/B:

regla-aleatorio

Otro ejemplo, este para una muestra del 10% de visitas:

regla-aleatorio2

5. Cookie de origen

Devuelve el valor completo de la cookie con el nombre especificado. Sólo acepta cookies de origen local o first party – esto es, propias del dominio actual, no de dominios externos.

Ejemplo: Supongamos que tenemos un sitio web en el que se puede, opcionalmente, iniciar sesión con una cuenta de usuario; Si se ha hecho login, la aplicación web lo recuerda guardando una cookie de nombre user_id con un identificador.

Si creamos una macro para que capture su valor…

macro-cookie

…Podremos crear una regla de activación que compruebe la existencia de esa cookie y con ello, comprobar que el visitante actual está navegando sin iniciar sesión.

regla-cookie

Para comprobar si el valor de una macro está sin definir, podemos utilizar la comparación con el valor undefined – el valor utilizado por defecto en Javascript para variables inexistentes o no definidas.

6. Capa de datos

Devuelve el valor de una variable de la capa de datos o Data Layer. Este valor se habrá guardado previamente en la página actual mediante el código Javascript:

dataLayer.push({'nombre': 'valor'});

Además del nombre de la variable, podemos especificar opcionalmente un valor por defecto que nos permitirá que las variables sin definir tengan un valor concreto -puede ser una cadena vacía- con el que comparar en lugar de undefined.

La propiedad Versión de la capa de datos conviene dejarla en su valor por defecto Versión 2: esto permite guardar variables con valores anidados -con otras variables o propiedades en su interior- y acceder a ellos mediante un punto ‘.’ (ej. variable.propiedad). A cambio, eso sí, debemos tener cuidado de evitar usar puntos en los nombres de variables para evitar problemas.

Ejemplo: Tenemos un sitio web de comercio electrónico y queremos hacer seguimiento de los artículos añadidos al carro de la compra. Para ello, ya hemos añadido el siguiente código ligado a la operación de añadir al carro:

<script>
dataLayer.push({
  'producto': {'ref': xxx, 'precio': yyy}
});
</script>

En este caso, la macro para hacer referencia al precio podría ser así:

macro-precio

7. Variable JavaScript

Devuelve el valor de una variable Javascript definida globalmente dentro de la página actual. Esto nos proporciona una alternativa a la capa de datos en caso de que no podamos utilizarla – por ejemplo, por no tener acceso al código fuente.

Ejemplo: Nótese que las variables a las que podemos acceder incluyen globales definidas para todas las páginas (como document y window), así como sus propiedades -separadas por un punto ‘.’, como en las variables de capa de datos-. Así, la siguiente macro nos devuelve la anchura de la ventana del navegador actual:

macro-width

8. Elemento DOM

Nos permite acceder a cualquier elemento del DOM (la estructura completa de elementos de la página). La restricción es que debemos especificarlo a través de su ID de elemento, con lo que sólo podremos acceder a elementos para los que hayamos especificado un ID.

Lo que sí nos permitirá es acceder a cualquiera de sus atributos (valor, clases CSS…) especificando el nombre del mismo en el campo Nombre de atributo. Si lo dejamos en blanco, lo que obtendremos en su lugar será el texto completo del interior del elemento.

Ejemplo: Queremos capturar el contenido del campo “provincia” de un formulario de nuestra web. Si ya lo hemos identificado con id=”provincia”, bastará con crear:

macro-value

9. Evento personalizado

Devuelve el último evento personalizado (event en la capa de datos) enviado a través del código:

dataLayer.push({'event': 'nombreEvento'});

Ejemplo: La macro predefinida {{event}} viene ya creada por defecto; su uso resultará esencial para numerosas reglas de activación.

10. Variable de evento automático

Las etiquetas de Procesador de eventos nos permiten hacer seguimiento de forma automática de ciertos eventos: clics, envíos de formulario, seguimiento de enlaces…

Cuando utilizamos una o más etiquetas de este tipo, las variables de evento automático son las que nos proporcionarán información sobre los elementos afectados por estos eventos. Dependiendo de lo que especifiquemos como Tipo de variable podremos acceder a:

  • Elemento: Objeto con la representación del elemento completo, para poder acceder a propiedades más complejas o no definidas por los otros tipos de variable (por ejemplo, elementos hijos o atributos personalizados). Como con otras estructuras anidadas, se podrá acceder a propiedades concretas separadas por puntos. Ej: {{element}}.tagName
  • ID de elemento: ID del elemento (atributo id)
  • Clases de elemento: Clase o clases del elemento (atributo class)
  • Segmentación de elemento: Destino de carga de enlace (atributo target)
  • Elemento textual: Texto del interior del elemento
  • URL de elemento: URL destino del elemento (atributos href o action)
  • Fragmento de URL nuevo del historial, Fragmento de URL antiguo del historial, Estado nuevo del historial, Estado antiguo del historial, Fuente del cambio de historial: Datos asociados a procesadores de eventos de historial de navegación

Como en el caso de url y event, Tag Manager nos proporciona de salida macros ya definidas que podremos utilizar para cada tipo de variable: {{element}}, {{element id}}, {{element text}}, etc.

Ejemplos:

Utilizando la macro predefinida {{element target}}, esta regla nos servirá para una etiqueta que detecte clicks en enlaces que se abren en ventana nueva (target=”_blank”):

regla-blank

Además de la regla y etiqueta correspondientes, será necesaria tener creada una etiqueta adicional de Procesado de eventos que monitorice los clicks en enlaces.

Otro ejemplo, éste nos servirá para hacer seguimiento de clicks en determinados elementos concretos de nuestra página. Paso por paso:

  1. Crear, si no existe ya, una etiqueta de tipo Procesador de eventos > Procesador de clics.
  2. Identificamos los elementos que queremos monitorizar, por ejemplo, añadiéndoles una clase común que llamaremos clickable:
    <input type="button" class="btn clickable">
    <a href="#menu" class="clickable">...</a>
    <h1 class="clickable">Titular</h1>
    ...
  3. Creamos la etiqueta. Esta en concreto, generará eventos personalizados de Google Analytics para cada click monitorizado, devolviendo el ID del mismo como dato adicional:
    tag-clickable
  4. Y finalmente, creamos y añadimos a la etiqueta la regla de activación:
    regla-clickable

11. Número de versión del contenedor

Devuelve la versión actual del contenedor de Tag Manager – tanto si se está en un contenedor publicado como en modo de vista previa. Útil para depuración y pruebas.

12. Modo de depuración

Indica si se está actualmente en modo de depuración. Igualmente, útil para pruebas.

13. JavaScript personalizada

Y dejamos las más interesantes para el final… ¿Seguís ahí? ¿Despiertos? ¡Bien! 😛

Las macros de tipo JavaScript personalizada nos permiten insertar cualquier código JavaScript, delimitado por una estructura function() { … } sin parámetros y finalizado con la instrucción return seguida del valor a devolver. Cada vez que se acceda a la macro, se ejecutará el código y se devolverá el valor de retorno.

Ejemplos: El siguiente código, insertado dentro de una macro, devolverá la zona horaria del visitante actual, expresada en minutos de diferencia con respecto a la hora central universal (UTC/GMT):

function() {
  var now = new Date();
  return now.getTimezoneOffset();
}

Otro ejemplo similar, este nos devuelve el día de la semana actual, en forma de texto:

function () {
  var now = new Date();
  var diaSem = now.getDay();
  switch(diaSem)
  {
    case 0: return 'Domingo';
    case 1: return 'Lunes';
    case 2: return 'Martes';
    case 3: return 'Miércoles';
    case 4: return 'Jueves';
    case 5: return 'Viernes';
    case 6: return 'Sábado';
  }
}

Es importante destacar que dentro del código se puede hacer referencia a otras macros. Por ejemplo, una macro {{element tag}} con el siguiente código -asociado a un procesador de clicks u otros eventos- nos devolverá la etiqueta HTML (a, input, div…) del elemento afectado:

function() {
  return {{element}}.tagName.toLowerCase();
}

14. Tabla de consulta

Finalmente, este tipo de macro nos permite definir valores condicionales en base al de otra macro, siguiendo este formato:

Si {{esta otra macro}} es igual a "XXX", {{esta macro}} devuelve "YYY"

Podemos definir tantas condiciones como queramos, pero siempre relativas a la misma macro, y siempre con la comparación “igual que” – no admite comparaciones parciales tipo “mayor que”, “contiene”, “empieza por”, etc.

También podemos añadir un Valor predeterminado que se aplicará cuando no se cumpla ninguna de las condiciones – este valor puede, a su vez, ser otra macro!

Ejemplo: La siguiente macro, si sustituimos con ella al {{tracking id}} fijo que habíamos definido anteriormente, hará que se utilice un código de seguimiento de Analytics distinto si estamos en modo de depuración. Con ello conseguimos dirigir el tráfico de pruebas a otra propiedad o cuenta sin afectar a la principal:

macro-tabla-debug

Por supuesto, tendremos que haber creado previamente {{debug}}:

macro-debug

Finalmente, en este otro ejemplo, crearemos una macro que nos indica si la visita actual se ha realizado en fin de semana. Para ello utilizaremos la macro {{dia semana}} que ya hemos definido como macro de Javascript personalizada en un ejemplo anterior, y la siguiente tabla, que devolverá true o false según sea o no sábado o domingo:

macro-finde

Macros predefinidas

Al crear un contenedor de Tag Manager, automáticamente se crean también varias macros correspondientes a propiedades y variables de uso frecuente – principalmente referentes a variables de evento, elementos y URLs. Esto hará que, en muchos casos, no tengamos que crear macros nuevas de determinados tipos sino que nos servirá con las predefinidas.

Un listado actual -que puede cambiar con facilidad, Google Tag Manager añade actualizaciones y funcionalidad nueva con frecuencia- es el siguiente:

  • element (Variable de evento automático / Elemento)
  • element classes (Variable de evento automático / Clases de elemento)
  • element id (Variable de evento automático / ID de elemento)
  • element target (Variable de evento automático / Segmentación de elemento)
  • element text (Variable de evento automático / Elemento textual)
  • element url (Variable de evento automático / URL de elemento)
  • event (Evento personalizado)
  • history change source (Variable de evento automático / Fuente del cambio de historial)
  • history new state (Variable de evento automático / Estado nuevo del historial)
  • history new url fragment (Variable de evento automático / Fragmento de URL nuevo del historial)
  • history old state (Variable de evento automático / Estado antiguo del historial)
  • history old url fragment (Variable de evento automático / Fragmento de URL antiguo del historial)
  • referrer (URL de referencia HTTP / URL completa)
  • url (URL / URL completa)
  • url hostname (URL / Nombre del host)
  • url path (URL / Ruta)

Conclusiones

Esta guía pretende ser un punto de partida y referencia general; en futuros posts intentaremos profundizar en los tipos de macros más complejos y versátiles -al igual que en etiquetas y reglas-, con ejemplos avanzados y casos de uso reales y completos. ¡Y no dudéis en usar los comentarios para dejar dudas o sugerencias de tutoriales!

Google Tag Manager está en continua y rápida evolución, lo que hace que la información y ejemplos aquí recopilados puedan resultar parcialmente inexactos o incompletos con facilidad (como muestra un botón, según terminaba de redactar el post ya se ha publicado una nueva actualización). Cuando esto ocurra, intentaré actualizar la guía con los cambios o funcionalidades nuevas más relevantes.

Happy tagging! 😛

Referencias y enlaces de interés: