Configurar productos de Google y enviar datos de eventos

Esta página está destinada 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 Cómo configurar los parámetros 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:

  1. Establecer el flujo de datos entre tu sitio web y los productos de Google con el comando config
  2. Enviar eventos a tus productos de Google con el comando event
  3. Establecer valores que se envían con cada evento con el comando set

Antes de comenzar

En esta guía, se da por sentado que ya hiciste lo siguiente:

Para configurar el flujo de datos, necesitas lo siguiente:

  • Acceso al código del sitio web en el que instalaste la etiqueta de Google
  • El ID de etiqueta del producto de Google que quieres 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 usas Google Ads, tu etiqueta ahora tiene dos IDs: un ID heredado (AW) y un ID de etiqueta de Google (GT). Pantalla que muestra una etiqueta de Google en Google Ads con dos IDs de etiqueta. Los IDs de etiqueta son intercambiables. En la siguiente tabla, se incluye una descripción general de las etiquetas que son compatibles con la etiqueta de Google.
Prefijo Tipo de ID Descripción
GT-XXXXXX Etiqueta de Google Cada etiqueta de Google recién creada obtiene un prefijo GT y un ID único.
G-XXXXXX Etiqueta de Google (prefijo heredado) Las etiquetas de Google Analytics son etiquetas de Google con un prefijo G y un ID único.
AW-XXXXXX Etiqueta de Google (prefijo heredado) Las etiquetas de Google Ads son etiquetas de Google con un prefijo AW y un ID único.
DC-XXXXXX Etiqueta de Google (prefijo heredado) Las etiquetas de Google Floodlight son etiquetas de Google con un prefijo DC y un ID único.
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

Usa el comando config para establecer el flujo de datos a los productos de Google.

Acerca del comando config

El comando config especifica los productos de Google a los que quieres 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 config comando si especificas parámetros en el objeto {<additional_config_params>} opcional. Por ejemplo, si agregas el siguiente parámetro, se 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 de 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 Google Analytics.

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 config específico del producto

Según el producto especificado en TAG_ID, el comando config también puede iniciar un comportamiento determinado para ese producto. Por ejemplo, en algunos casos, el comando config le indica a gtag.js que inicie un evento de página vista.

Para obtener más información sobre el comportamiento del comando config en relación con productos individuales, lee la documentación específica del producto:

Paso 2: Envía datos con event

Después de configurar las conexiones a los productos de Google, debes usar el comando event para enviar datos.

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 tú implementas, 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 para enviar un evento personalizado.

Configura eventos

Puedes llamar al método event en cualquier parte del código después de inicializar la etiqueta de Google.

  1. Define un evento. Si usas un evento recomendado, asegúrate de usar los nombres de eventos estandarizados y los pares clave-valor predefinidos.

  2. 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 forma posible 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 envía a una propiedad de Google Analytics.

<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" onclick="newsletterSignup()">Sign me up!</button>
   ...
</body>

Opcional: Envía datos con cada evento usando 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 parámetros de campaña para que varias etiquetas puedan acceder a ellos en la misma página.

El comando tiene el siguiente formato:

gtag('set', 'parameterName');

Paso 3: Valida tu configuración

Para asegurarte de que los datos de eventos se envíen correctamente, haz lo siguiente:

  1. Abre el producto de Google en el que esperas ver los datos.
  2. Verifica si están llegando datos. Cada producto tiene un lugar diferente en el que puedes verificar si se están recibiendo datos:
    • Google Analytics: Consulta el informe en tiempo real.
    • Google Ads: Consulta la tabla Acciones de conversión y observa la columna Estado (puede tardar hasta 24 horas en actualizarse).
    • Floodlight: Usa Tag Assistant para verificar que las etiquetas de Floodlight se activen.

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 quieres administrar su flujo de datos con más detalle, consulta Agrupa y enruta datos.