Si apenas sabes de programación pero, como a mí, te encanta experimentar :), superarte, adquirir nuevas habilidades y apañártelas sol@ en ciertas tareas avanzadas… aquí te comparto mis apuntes sobre funciones de JavaScript útiles para analistas web que queremos perfeccionar nuestro uso de GTM.

Las acabo de entender con algo de esfuerzo y te recomiendo usarlas en variables de JavaScript personalizadas. Me parecen indispensables a la hora de optimizar / limpiar los datos que envías desde Google Tag Manager, pues se trata de funciones para depurar la información con operaciones sencillas.

Ojo, no se trata de aprender JavaScript a fondo… sino más bien de poder subsistir sin tener que pedir sopitas para mejoras simples, repetitivas y rutinarias, pero a la vez muy prácticas.

Primero lo primero, una mínima explicación sobre dónde podemos incluir estas funciones de Javascript que vamos a explicar.

Cómo funciona la variable de JavaScript personalizada en Tag Manager

Vamos al menú Variables y creamos una nueva, del tipo JavaScript personalizada:

Como indica la ayuda, se debe incluir una función (function) que devuelva un valor, un resultado (return).

Sobre la función de ejemplo que da Google, vamos por partes:

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

• La línea 2 define una variable JavaScript (var), la llama ‘now’ y calcula la fecha new Date()
• La línea 3 aplica y añade otra operación getTime() al resultado de la variable anterior (now) y lo concatena todo con un punto en medio: now.getTime()
• Finalmente, fijémonos que también en la línea 3, para hacer que la variable de GTM devuelva  el valor calculado (return),  se forma la instrucción así: return now.getTime()
• Ya hemos aprendido algunas cosas  :)  

1. function() { } es la forma de definir la función JavaScript
2. var la de crear variables
3. podemos concatenar operaciones (con un punto) de forma que se ejecuten de manera consecutiva  sobre un valor inicial
4. y cada línea se termina con un punto y coma ;

  function() {
    var miVar = operacionesQueLaModifican();
    return miVar;
  }

Normalmente bastará con esta sencilla estructura de JavaScript que acabamos de resumir arriba. Así se puede calcular o transformar casi cualquier dato que se necesite.

Algo muy común es operar sobre el resultado de otras variables de GTM para mejorar la info enviada a las herramientas, como veremos en los ejemplos más abajo :)

Ya os habréis dado cuenta de que Tag Manager no pudo elegir un nombre más confuso para las variables (antes llamadas macros en GTMv1). Aunque por otro lado es muy correcto el nombre por la utilidad que tienen, tan similar a las variables de programación. Pero el hecho que se se llamen igual no ayuda mucho… Por tanto, aclaremos que por un lado tenemos las variables de JavaScript (o de cualquier lenguaje de progamación) y por otro las variables de GTM, ok?

Y bueno, ahora así, ahí van las funciones indispensables para empezar:

Buscar y reemplazar en JavaScript

Válido para texto y para expresiones regulares.

Reemplazo de texto sencillo

Con una variable de JavaScript personalizada de Tag Manager

Vamos a ver dos casos:

1. Reemplazar una única vez (replace). Un ejemplo típico sería el de suprimir trozos de texto de una variable de GTM.
2. Reemplazar en múltiples ocasiones  (split, join). El caso más claro: si queremos sustituir guiones por espacios, o viceversa.

Buscar y reemplazar texto (una vez)

//REEMPLAZAR TEXTO UNA SOLA VEZ EN UNA CADENA

 function() {
  var replaceText = {{Variable}}.replace('texto a reemplazar','texto que sustituye');
  return replaceText;
}

La función de JavaScript para ello se llama replace() y tiene dos argumentos. Ponemos en ‘texto a reemplazar’ aquello que queremos cambiar y en ‘texto que sustituye’ lo que queremos en su lugar.

Por tanto, un replace(‘Bilbao’, ‘Granada’) provocará que en una frase donde por defecto ponga Bilbao, aparezca Granada en su lugar. Por ejemplo, yo soy de Bilbao Granada :)

¿Sobre qué texto o frase hacemos el reemplazo? claro que no es sobre toda la web, pero ¿cómo le decimos a Tag Manager en qué parte del código aplicamos la función?

Ahí entra en juego lo que va justo antes de la función: se separa por un punto la función de aquello a lo que se lo vamos a aplicar: {{variable}}.funcion().

Lo más común es que ahí establezcamos una variable de GTM de partida que nos gustaría optimizar. Para ello la incluimos entre {{dobles llaves}}. Puede ser una variable predefinida o una creada por nosotros.

Veamos un ejemplo algo más complejillo…

Imaginaos que queremos mandar un evento a Google Analytics, y rellenar el Label con información única de la página en la que se produce. Esta información la tenemos disponible en la variable {{Page Path}}, que recopila la URI o ruta actual cada vez que se recarga el navegador.
El problema: preferimos no mandar la {{Page Path}} completa, es demasiado larga y ensucia los informes. Supongamos esta estructura de paths:

/checkout/comprar-ahora/articulo-A/
/checkout/comprar-ahora/articulo-B/
/checkout/comprar-ahora/articulo-C/

La solución: podríamos simplemente olvidarnos de la primera parte, cargarnos esa parte de la URI con la función replace de JavaScript, dejando el 2º argumento vacío (reemplazando por nada), como vemos aquí:

//ejemplo limpiar URI
 function() {
  var replaceText = {{Page Path}}.replace('/checkout/comprar-ahora/','');
  return replaceText;
}

El resultado: articulo-A/, articulo-B/, articulo-C/. Algo hemos mejorado ¿eh? :) Luego veremos cómo depurar más este ejemplo.

Buscar y reemplazar texto (en varias ocasiones)

Esta función me ha encantado, llevaba tiempo queriendo saber hacer esto :) Tiene dos partes, split y join. Muy bueno para aquellos casos donde queremos mandar un URI como texto legible.

//REEMPLAZAR TEXTO MÚLTIPLES VECES EN UNA CADENA

 function() {
  var replaceRepeatedText = {{Variable}}.split('texto a reemplazar').join('texto que sustituye');
  return replaceRepeatedText;
}

Este código parece más intuitivo ya tras haber entendido el primero de Google y el ejemplo anterior, ¿verdad? Fijémonos cómo se vuelven a concatenar dos instrucciones: split y join. Primero indicamos el texto que queremos reemplazar y luego decimos qué va en su lugar.

El ejemplo mencionado arriba es ideal para sustituir guiones por espacios con JavaScript por ej. y en general para suprimir o corregir un carácter o grupo de caracteres (como ocurre con ciertos errores de codificación).

//ejemplo idea: sustituir espacios por guiones o viceversa
function() {
  var replaceRepeatedText = {{Variable}}.split('-').join(' ');
  return replaceRepeatedText;
}

Buscar y reemplazar texto (todo combinado)

Completemos el ejemplo anterior con una secuencia de operaciones más complicada, para afinar más lo que mandamos:

 function() {
  var replaceText = {{Page Path}}.replace('/checkout/comprar-ahora/','').split('-').join(' ').replace('/','');
  return replaceText;
}

Si quieres hacer este ejemplo en tu sitio web o en tu propio GTM,  puedes:

• Cambiar en el código donde pone {{Page Path}} por alguna de las URIs completas del ejercicio, así comprobarás el JS y solo el JS. Ej. /checkout/comprar-ahora/articulo-B/
• Modificar el código para que donde pone /checkout/comprar-ahora/ aparezca algo que sobre en tus propias rutas de página y aplicar a la variable {{Page Path}}

Buena suerte y ojalá te sea tan útil como a mí ;)

Próximamente la segunda parte, donde veremos formas más eficientes de hacer reemplazos con expresiones regulares y extracción de partes clave de una URL o texto, también con expresiones regulares. Si te suscribes a mi blog recibirás un email cuando esté la segunda parte.

Y si te ha gustado compártelo! A ver si así me animo a escribir más a menudo :)