Esta página está dirigida a los desarrolladores que necesitan configurar la etiqueta de Google con gtag.js. La etiqueta de Google también te permite ajustar algunos parámetros de configuración en la interfaz de usuario. Consulta Establece los parámetros de configuración de la etiqueta de Google.
Después de instalar la etiqueta de Google, puedes llamar a los comandos gtag()
en cualquier parte del código después del fragmento de la etiqueta de Google.
En esta página, se muestra cómo realizar las siguientes acciones:
- Establece un flujo de datos entre tu sitio web y los productos de Google con el comando
config
- Envía eventos a tus productos de Google con el comando
event
. - Configura los valores que se envían con cada evento mediante el comando
set
.
Antes de comenzar
En esta guía, se da por sentado que realizaste lo siguiente:
- Familiarízate con el funcionamiento de la etiqueta de Google.
- Se instaló la etiqueta de Google.
Para configurar el flujo de datos, necesitas lo siguiente:
- Acceso al código del sitio web donde instalaste la etiqueta de Google
- El ID de etiqueta del producto de Google que deseas conectar a la etiqueta de Google
¿Qué es un ID de etiqueta y dónde encontrarlo?
Un ID de etiqueta identifica una etiqueta de Google. Una misma etiqueta de Google puede tener varios IDs. Por ejemplo, si utilizas Google Ads, tu etiqueta ahora tiene dos IDs: un ID heredado (AW) y un ID de etiqueta de Google (GT).Los IDs de etiqueta son intercambiables. La siguiente tabla contiene una descripción general de las etiquetas compatibles con la etiqueta de Google.
Prefijo | Tipo de ID | Descripción |
---|---|---|
GT-XXXXXX | Etiqueta de Google | Cada etiqueta de Google nueva recibe un prefijo GT y un ID único. |
G-XXXXXX | Etiqueta de Google (prefijo heredado) | Las etiquetas de Google Analytics 4 son etiquetas de Google con un ID único y un prefijo G. |
AW-XXXXXX | Etiqueta de Google (prefijo heredado) | Las etiquetas de Google Ads son etiquetas de Google con un ID único y un prefijo AW. |
DC-XXXXXX | Etiqueta de Google (prefijo heredado) | Las etiquetas de Google Floodlight son etiquetas de Google con un ID único y un prefijo DC. |
Las etiquetas de Universal Analytics (UA) no son compatibles con la etiqueta de Google (GT).
Cómo encontrar el ID de tu etiqueta:
Paso 1: Conecta los productos de Google a tu etiqueta
Acerca del comando config
El comando config
especifica los productos de Google a los que deseas enviar datos de eventos.
El comando tiene el siguiente formato:
gtag('config', 'TAG_ID', {<additional_config_params>});
Parámetros de configuración adicionales
Puedes ajustar y extender un comando config
si especificas parámetros en el objeto {<additional_config_params>}
opcional. Por ejemplo, agregar el siguiente
parámetro evitará que se envíe automáticamente una vista de página de
Google Analytics:
gtag('config', 'TAG_ID', {'send_page_view': false});
Configura la recopilación de datos
Para configurar la recopilación de datos para un producto de Google, agrega el comando config
con un ID de etiqueta.
Ejemplo
La etiqueta de Google (GT-XXXXXX
) envía datos a los destinos que definiste para ella, por ejemplo, Google Ads y GA4.
En el siguiente ejemplo, se muestra cómo actualizar tu código para cargar una segunda etiqueta de Google que esté conectada a un destino de Floodlight.
Para enviar datos a Floodlight (ID de etiqueta DC-ZZZZZZ
), agrega otro comando config
después de inicializar la primera etiqueta de Google (ID de etiqueta GT-XXXXXX
):
<head>
...
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'GT-XXXXXX');
gtag('config', 'DC-ZZZZZZ');
</script>
</head>
Comportamiento de config
específico del producto
Según el producto especificado en TAG_ID
, el comando config
también puede iniciar cierto comportamiento para ese producto.
Por ejemplo, en algunos casos, el comando config
le indica a gtag.js que inicie un evento de vista de página.
Para obtener más información sobre cómo se comporta el comando config
en relación con productos individuales, lee la documentación específica de cada producto:
- Conversiones de Google Ads y remarketing
- Campaign Manager y Display & Video 360
- Search Ads 360
- Google Analytics
Paso 2: Envía datos con event
Acerca del comando event
El comando event
te permite enviar datos de eventos a los productos que especificaste con config
.
El comando tiene el siguiente formato:
gtag('event', 'event_name', {
'key': 'value',
});
Acerca de los nombres de eventos y los pares clave-valor
Eventos recomendados: Los eventos recomendados son aquellos que implementas tú, pero que tienen pares clave-valor predefinidos. Estos eventos desbloquean funciones de informes existentes y futuras.
Eventos personalizados: Para definir tus propios eventos y estructuras de datos, puedes ingresar valores personalizados a fin de enviar un evento personalizado.
Configura eventos
Puedes llamar al método event
en cualquier parte de tu código después de inicializar la etiqueta de Google.
Define un evento. Si usas un evento recomendado, asegúrate de utilizar los nombres de evento estandarizados y los pares clave-valor predefinidos.
Define cuándo se activará el evento, por ejemplo, si se envía con una carga de página o cuando alguien hace clic en un botón.
Ejemplo
En el siguiente ejemplo, se ilustra una posible forma de medir los registros al boletín informativo cuando un usuario hace clic en un botón. En el ejemplo, se usa un evento personalizado y se lo envía a una propiedad Google Analytics 4.
<head>
...
/* 1. Initialize the Google tag and gtag.js library */
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<script>
let date = Date.now();
/* 2. Define your event. */
function newsletterSignup() {
gtag('event', 'newsletter_signup', {
'time': date,
});
}
</script>
...
/* 3. Trigger your event */
<button type="submit" onlick="newsletterSignup()">Sign me up!</button>
...
</body>
Opcional: Envía datos con cada evento mediante set
El comando set
te permite definir parámetros que se asociarán con cada evento posterior en la página.
Por ejemplo, puedes compartir los parámetros de una campaña para que varias etiquetas de la misma página puedan acceder a ellos.
El comando tiene el siguiente formato:
gtag('set', 'parameterName');
Próximos pasos
Después de configurar tus productos y eventos de Google, habrás terminado con la configuración básica de la etiqueta de Google.
Si administras varios productos y deseas administrar su flujo de datos con más detalle, consulta Agrupa y enruta datos.