Variable Javascript personalizada Tag Manager

GTM & JavaScript personalizado: Kit de autosubsistencia (II)

Posted by Lucía Marín on Oct 26, 2015

En el post anterior vimos el reemplazo con JavaScript de texto plano. En nuestro caso es para utilizarlo en variables JS personalizadas de Tag Manager, pero son funciones genéricas de JavaScript y se pueden utilizar en muchos más casos.
En este post vamos a empezar con una parte un poco más compleja pero también bastante más útil: el reemplazo en JavaScript con expresiones regulares. 

Reemplazo de expresiones regulares

Con una variable de JavaScript personalizada de Tag Manager

En resumen, es super similar al reemplazo de texto, la función es la misma, solo cambia la forma de escribir los argumentos y, lo más importante, es necesario tener idea de cómo usar las regEx de antemano.

Buscar y reemplazar regEx (una vez)

 

function() {
   var replaceRegEx = {{variable}}.replace(/expresión regular entre barras/,'lo que sustituye');
  return replaceRegEx;
}

Instrucciones básicas:

  • El primer argumento es aquello que queremos reemplazar
  • La regEx se incluye entre / barras /
  • Y en el segundo argumento ponemos aquello que queremos que lo reemplace

En este link tenéis un listado de las expresiones regulares más comunmente utilizadas.

Veamos un ejemplo:

 function() {
   var replaceRegEx = {{Page Path}}.replace(/\/tag\/[aA-zZ0-9-]+/,'aa');
  return replaceRegEx;
}

En el ejemplo de arriba reemplazamos todo lo que cumple el patrón de la expresión regular, es decir: ‘/tag/’ + cualquier cadena alfanumérica (incluyendo también el guión medio), que aparezca al menos una vez, lo que se representa así: /[aA-zZ0-9-]+/ por ‘aa‘.

Buscar y reemplazar regEx (en varias ocasiones)

En el post anterior utilizamos un truco que vale puntualmente (split, join) para un reemplazo global, pero no es su razón de ser, se trata de dos funciones creadas para otros fines […] cuyo uso combinado da el resultado esperado, pero no hay que abusar de ello, pues hay formas mejores de hacerlo! Gracias una vez más a mi compi en Aukera,  Aitor García, por la explicación!!! un crack, es un lujo tenerle al lado y poder absorber cosas nuevas como una esponja día a día :)

Hay una forma mucho más eficaz de hacerlo: mediante expresiones regulares precisamente. Para ello, utilizaremos los modificadores de la función replace de JavaScript. En concreto /g, para indicar que se trata de un reemplazo global (y no solo en 1 ocasión).

Modificadores reemplazo JS regex

Pantallazo y Fuente: W3Schools.

Los modificadores van tras la barra de cierre / que hay detrás de la regEx:  replace(/lo que queremos sustituir/modificador, ‘lo que sustituye’). Por tanto, para un reemplazo múltiple haremos así:

function() {
   var replaceRegEx = {{variable}}.replace(/regEx/g,'lo que sustituye');
  return replaceRegEx;
}

Una expresión regular puede ser solo texto plano, con lo que para crear un reemplazo múltiple de una palabra o texto, solo pondremos esa /palabra o texto/ entre barras más el modificador:

replace(/texto a reemplazar/g,'lo que sustituye'

Si queremos reemplazar guiones por espacios en JavaScript bastará con:

function() {
   var replaceRegEx = {{variable}}.replace(/\-/g,' ');
  return replaceRegEx;
}

La barra invertida \ se pone delante del guión medio porque es conveniente “escapar” ciertos caracteres especiales en las expresiones regulares (porque tienen significado en el patrón de búsqueda). Estos son los caracteres que hay que escapar (y su utilidad) según la ayuda de Google.

Y en rubular.com puedes probar tus expresiones regulares frente a diferentes líneas de texto, URLs, etc. para comprobar que estén bien definidas y que engloben todo lo que tengan que englobar (y no otras cosas).

Vale, ahora ya sabéis cómo hacer algunas operaciones básicas con JavaScript en GTM. Pero recordad que si queréis aprender a utilizar a fondo dicha herramienta, nuestro curso online de Tag Manager & Universal Analytics lo tenéis siempre disponible, y recién actualizado! Ya llevamos más de un año con el proyecto y la inscripción es libre, cada uno lo puede comenzar cuando prefiera (eso sí, con un plazo de soporte de 5 semanas desde entonces). Si tenéis alguna duda contactad conmigo ;)

Próximamente… extracción con JavaScript!!

About the author

Comparte tu opinión