Tipos de variables definidas por el usuario para páginas web

Puede crear variables personalizadas para páginas web en Google Tag Manager si las variables integradas no satisfacen sus necesidades específicas.

Para crear una variable definida por el usuario:

1. En el panel de navegación de la izquierda, haga clic en Variables.
2. En la sección Variables definidas por el usuario, haga clic en Nueva.
3. Haga clic en Configuración de la variable y seleccione el tipo de variable que quiera.
4. Rellene los datos o marque las opciones correspondientes al tipo de variable seleccionado.
5. Póngale un nombre a la variable. Use un nombre esquemático y que describa su función, p. ej.,"Variable de la capa de datos - nombre del producto".
6. Haga clic en Guardar.

Tag Manager admite estos tipos de variables definidas por el usuario para sitios web:

• Navegación
  • HTTP Referrer
  • URL
• Variables de la página
  • Cookie de origen
  • JavaScript personalizada
  • Variable de capa de datos
• Elementos de página
  • Variable de evento automático
  • Elemento DOM
  • Visibilidad del elemento
• Utilidades
  • Constante
  • Evento personalizado
  • Nombre del entorno
  • Configuración de Google Analytics
  • Tabla de consulta
  • Número aleatorio
  • Tabla RegEx
• Datos del contenedor
  • ID de contenedor
  • Número de versión del contenedor
  • Modo de depuración

Navegación

HTTP Referrer

El valor que se asigna es la URL referente HTTP, que es la de la página anterior que ha visitado el usuario. Por ejemplo, si un usuario accede a una de sus páginas de producto desde la página principal, la URL referente es la página principal. Tag Manager crea automáticamente una instancia de este tipo de variable, pero se pueden crear más si se quieren exponer diferentes partes de la URL referente.

URL

Con este tipo de variable se pueden analizar y exponer componentes de URLs. Tag Manager crea automáticamente tres instancias de este tipo de variable: URL completa, Nombre del host y Ruta. Puede crear instancias adicionales para exponer distintas partes de las URL. Los componentes de URLs que puede elegir son: Protocolo, Nombre del host, Puerto, Ruta, Consulta, Fragmento y Extensión de archivo. El valor de entrada de este tipo de variable es la URL de la página en la que se encuentra el usuario, que se extrae de document.location. En Origen de la URL, puede seleccionar o introducir la variable que quiera que Tag Manager use como tal.

Variables de la página

Cookie de origen

A esta variable se le asigna el valor de una cookie de origen con el nombre del dominio en el que se encuentra el usuario en ese momento. Si se implementa más de una cookie con el mismo nombre en el mismo dominio, se elige el primer valor. Sucede lo mismo que si llama a document.cookie desde una página y elige el primer resultado.

JavaScript personalizada

El valor que se asigna es el resultado de una función JavaScript. El código JavaScript debe adoptar el formato de una función anónima que devuelva un valor. Por ejemplo, se puede crear una variable JavaScript personalizada para convertir todas las instancias de la variable {{url}} predefinida a minúsculas:

function () {
  return {{url}}.toLowerCase();
}

Variable de capa de datos

Se le asigna un valor cuando los datos se envían a la capa de datos a través de la llamada dataLayer.push():
dataLayer.push({'Data Layer Name': 'value'}).

En Tag Manager, puede especificar cómo interpretar los puntos (".") en los nombres de las claves:

• Versión 1: se permiten puntos en los nombres de clave. Por ejemplo, en dataLayer.push('a.b.c': 'value'), el nombre de la clave se interpretaría como "a.b.c" (es decir, {'a.b.c': 'value'}).
• Versión 2: los puntos se interpretan como valores anidados. Por ejemplo, dataLayer.push({'a.b.c': 'value'}) se interpretaría como tres niveles anidados: {a: {b: {c: 'value'}}}.

Variable de JavaScript

El valor que se asigna es la variable JavaScript global que especifique. Si el valor requerido no está en la capa de datos (consulte Variable de capa de datos) ni lo encuentra en el DOM (consulte Elemento DOM), probablemente pueda recuperarlo con una variable JavaScript. Úsela si el valor que busca está en el código fuente de la página como una variable JavaScript.

Elementos de página

Variable de evento automático

Captura información sobre elementos que hayan activado eventos (p. ej., clics, envíos de formularios o visibilidad de elementos).

• Elemento: devuelve el objeto del elemento. Se puede usar como un objeto de JavaScript personalizado (p. ej., {{Element}}.title) o en selectores de CSS (p. ej., {{Element}} coincide con el selector de CSS div.foo).
• Tipo de elemento: devuelve el valor de element.tagName (p. ej., "A","BUTTON", "IMG").
• Atributo del elemento: al especificar un nombre de atributo, esta opción devuelve su valor.
• Clases de elemento: devuelve la lista de clases encontradas en el atributo class del elemento.
• ID de elemento: devuelve el valor del atributo id.
• Segmentación de elemento: devuelve el valor del atributo target (p. ej., "_blank").
• Elemento textual: devuelve el valor del contenido de texto del elemento.
• URL de elemento: devuelve la URL del elemento, que recupera de los atributos href o action.
• Nuevo fragmento de URL del historial: devuelve el nuevo fragmento de la URL del historial del navegador (p. ej., "#resumen").
• Fragmento antiguo de URL del historial: Devuelve el fragmento antiguo de la URL del historial del navegador (p. ej., "#intro").
• Estado nuevo del historial: objeto de estado de historial nuevo, controlado por las llamadas del sitio web a pushState.
• Estado antiguo del historial: objeto de estado de historial antiguo, controlado por las llamadas del sitio web a pushState.
• Fuente del cambio de historial: devuelve el evento que ha causado un cambio en el historial (p. ej., "pushState" o "replaceState").

Elemento DOM

El valor que se asigna es el texto del elemento DOM (modelo de objetos del documento) o el valor del atributo de elemento DOM especificado. Si el valor requerido no está en la capa de datos (consulte Variable capa de datos), probablemente pueda recuperarlo del DOM. Si lo encuentra allí, use este tipo de variable.

Si define el nombre de atributo opcional, la variable devolverá el valor especificado en dicho atributo (p. ej., data-food="cupcake"); de lo contrario, el valor de la variable será el texto del elemento DOM.

Visibilidad del elemento

El valor se asigna según el estado de visibilidad del elemento DOM especificado. A diferencia del activador Visibilidad del elemento, esta variable solo puede informar de la visibilidad de un único elemento. Elija si seleccionar un elemento en función de su ID o de un selector de CSS. Si varios elementos coinciden con el patrón del selector de CSS especificado, se utilizará el primer elemento coincidente.

Puede elegir el tipo de salida de esta variable:

• Verdadero/Falso: un valor booleano que indica si el elemento seleccionado se mostrará cuando se haga referencia a la variable. 
• Porcentaje: un valor numérico entre 0 y 100 que indica el porcentaje del elemento seleccionado que se muestra en la pantalla cuando se hace referencia a la variable.

Si selecciona Verdadero/Falso como tipo de salida, también puede especificar el Porcentaje mínimo visible del elemento seleccionado que debe mostrarse en la pantalla para que se devuelva el valor Verdadero.

Utilidades

Constante

El valor que se asigna es la cadena que proporcione. Las variables de cadena constante se suelen usar cuando hay varias etiquetas que tienen el mismo número de cuenta en su configuración. Consulte también Configuración de Google Analytics.

Evento personalizado

El valor que se asigna es el nombre del evento personalizado que se ha enviado a la capa de datos.

Nombre del entorno

Devuelve el nombre del entorno que se visualiza en el modo de vista previa.

Configuración de Google Analytics

Las variables de configuración de Google Analytics se usan en las etiquetas de Universal Analytics, en contenedores web y móviles (Firebase), para cambiar y compartir desde una misma ubicación ajustes habituales de Google Analytics que se apliquen a varias etiquetas. Al crear una etiqueta de Google Analytics con Universal Analytics, Tag Manager le pedirá que seleccione o cree una variable de configuración de Google Analytics. Más información

Tabla de consulta

El valor se asigna según las instrucciones de la tabla de búsqueda. Esta tabla contiene dos columnas (la tabla está vacía para ilustrar cómo se usan los datos más adelante):

Cuando [seleccionar variable] es igual a	A [esta variable] se le asigna

La tabla de búsqueda permite crear variables cuyos valores cambian en función de los de otras variables. Esto es útil si su sitio web está configurado de tal manera que se pueda asignar el valor adecuado a la URL, al elemento DOM o a cualquier otra parte de la página (por ejemplo, un ID de conversión). En este ejemplo, se crea una variable denominada "ID de conversión". Si la URL es "/gracias/compra1.html", el valor que se asigna es "12345"; si la URL contiene "gracias/compra2.html", se le asigna "34567".

Cuando {{url}} contiene	A {{ID de conversión}} se le asigna
/gracias/compra1.html	12345
/gracias/compra2.html	34567
/gracias/compra3.html	56789

Número aleatorio

El valor que se asigna es un número aleatorio comprendido entre 0 y 2147483647.

Tabla RegEx

Es similar a la variable de tabla de consulta, con el añadido de que permite ejecutar patrones de expresiones regulares que coincidan con los elementos que quiera.

Si la configuración de la tabla RegEx es esta:

Patrón	Salida
.*/página[1-3]\.html.*	foo
.*/página[4-6]\.html.*	bar
.*/página[7-9]\.html.*	baz

El valor de salida de la variable será:

Resultado coincidente	Valor
http://example.com/página1.html	foo
http://www.example.com/página1.html	foo
http://example.com/página2.html#detail	foo
http://example.com/página5.html	bar
http://example.com/página5.html?status=new	bar
http://example.com/página6.html	bar
https://example.com/página9.html	baz

Las consultas de la tabla RegEx se ejecutan en toda la lista, de arriba hacia abajo. Cuando en una consulta se encuentra una coincidencia, se devuelve el valor de salida correspondiente.

Seleccione Definir valor predeterminado para especificar qué valor de salida se debe devolver si no se encuentran coincidencias.

De forma predeterminada, los patrones deben coincidir con toda la cadena de entrada y no distinguen entre mayúsculas y minúsculas. Este comportamiento se puede cambiar en Configuración avanzada:

• No distinguir entre mayúsculas y minúsculas: los patrones no diferenciarán mayúsculas de minúsculas a la hora de buscar coincidencias, sin tener que definirlo explícitamente en la expresión regular.

• Solo coincidencias totales: si se habilita esta opción, los patrones buscarán coincidencias con toda la entrada. Esto equivale a tener anclajes de inicio (^) y fin ($) de forma implícita alrededor del patrón. Si la inhabilita, los patrones buscarán coincidencias con cualquier parte de la entrada.

• Habilitar grupos de captura y sustituir funciones: si habilita esta opción, podrá utilizar la sintaxis de sustitución por el símbolo del dólar para incluir partes de la entrada en la salida (p. ej., grupos de captura en el patrón coincidente). En la expresión regular /(noticias)/página(2)\.html, por ejemplo, podría utilizar $1 para hacer referencia al primer grupo de captura ("noticias") y $2 para hacer referencia al segundo grupo de captura ("2").

Usar "Habilitar grupos de captura y sustituir funciones" con la opción "Solo coincidencias totales" inhabilitada puede provocar un comportamiento inesperado, como devolver todo el valor de entrada con la parte coincidente reemplazada.

Datos del contenedor

ID de contenedor

Devuelve el ID del contenedor de Tag Manager (p. ej., "GTM-101010").

Número de versión del contenedor

Si el contenedor está en modo de vista previa, esta variable devuelve el número de versión de la vista previa de dicho contenedor. Si no, devuelve el número de la versión publicada.

Modo de depuración

El valor que se asigna es "true" si el contenedor está en modo de vista previa y depuración, y "false" si no.