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. Introduzca las opciones de configuración del 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 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
  • URL referente HTTP
  • URL
• Variables de página
  • Cookie propia
  • JavaScript personalizado
  • 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
  • Etiqueta de Google: ajustes de configuración
  • Etiqueta de Google: configuración de eventos
  • Tabla de consulta
  • Número aleatorio
  • Tabla RegEx
• Datos proporcionados por los usuarios
• Datos del contenedor
  • ID de contenedor
  • Número de versión del contenedor
  • Modo de depuración

Navegación

URL referente HTTP

El valor que se asigna es el HTTP referente, que es la URL 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 la URL. Puede crear más instancias para exponer distintas partes de la URL. Los componentes de la URL entre los que puede elegir son URL completa, protocolo, nombre de host, puerto, ruta, extensión de nombre de archivo, consulta y fragmento. El valor de entrada de este tipo de variables 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 indicar la variable que quiera que Tag Manager use como fuente del valor de la URL.

Variables de la página

Cookie propia

A esta variable se le asigna el valor de una cookie propia 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();
}

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, se interpretaría dataLayer.push({"a.b.c": "value"}) como tres valores anidados: {a: {b: {c: "value"}}}.

Variable 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 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 (por ejemplo, {{Element}}.title) o en selectores de CSS (por ejemplo, {{Element}} coincide con el selector de CSS div.foo).
• Tipo de elemento: devuelve el valor de element.tagName (por ejemplo, "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 (por ejemplo, "_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 (por ejemplo, "#summary").
• Fragmento antiguo de URL del historial: devuelve el fragmento antiguo de la URL del historial del navegador (por ejemplo, "#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 del historial anterior, 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 (por ejemplo, "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 deseado no está configurado en la capa de datos (consulte Capa de datos), es posible que el valor se pueda recuperar del DOM. Use este tipo de variable si el valor que busca está en el DOM.

Si define el nombre de atributo opcional, la variable devolverá el valor especificado en dicho atributo (por ejemplo, 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. 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 utilizan en las etiquetas de Universal Analytics, en contenedores web y móviles (Firebase), para ajustar y compartir desde una misma ubicación ajustes habituales de Google Analytics que se utilizan en 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

Etiqueta de Google: ajustes de configuración

Esta variable le permite definir parámetros a nivel de configuración cuando se carga la etiqueta de Google.

Por ejemplo, supongamos que publica su sitio web en varios idiomas y quiere segmentar la audiencia por su idioma. Puede crear una variable de configuración con un parámetro language y usarla en sus etiquetas de Google, en lugar de actualizar manualmente cada etiqueta.

Más información sobre cómo reutilizar los ajustes de configuración

Etiqueta de Google: configuración de eventos

Esta variable le permite definir parámetros a nivel de evento para enviar datos adicionales con un evento de GA4.

Por ejemplo, imagine que tiene una tienda online que está de rebajas. Ahora, quiere hacer un seguimiento del número de personas que utilizan su código de descuento. En lugar de añadir un parámetro discount a cada una de las etiquetas manualmente, puede reutilizar el parámetro con una variable del tipo Etiqueta de Google: configuración de eventos.

Más información sobre cómo reutilizar los ajustes de configuració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
.*/page[1-3]\.html.*	foo
.*/page[4-6]\.html.*	bar
.*/page[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 función de grupos de captura y reemplazos: si habilita esta opción, podrá utilizar la sintaxis de sustitución con el símbolo del dólar para incluir partes de la entrada en la salida (por ejemplo, grupos de captura en el patrón coincidente). Por ejemplo, en la expresión regular /(noticias)/página(2)\.html podría utilizar $1 para hacer referencia al primer grupo de captura ("noticias") y $2 para hacer referencia al segundo ("2").

Usar "Habilitar función de grupos de captura y reemplazos" 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 proporcionados por los usuarios

Recoge información del formulario de contacto, como el correo electrónico, el teléfono, el nombre y la dirección. Especifique la información que quiera recoger con uno de los siguientes métodos:

• Configuración automática: detecta automáticamente los campos de formulario de su sitio web y las entradas nuevas.
• Configuración manual: le permite asignar variables de Tag Manager a los correspondientes campos de datos proporcionados por los usuarios, como el correo electrónico, el número de teléfono, el nombre y la dirección.
• Código: le permite especificar una variable de capa de datos o una variable de JavaScript personalizada que devuelva el objeto de datos estructurados proporcionados por el usuario.

Datos del contenedor

ID de contenedor

Devuelve el ID del contenedor de Tag Manager, (por ejemplo, "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; de lo contrario, será "false".