Configurar productos de Google y enviar datos de eventos

Después de instalar la etiqueta de Google, puedes llamar a comandos gtag() desde cualquier parte de tu código, después del fragmento de la etiqueta de Google.

En esta página se explica cómo hacer lo siguiente:

  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. Definir los valores que se envían con cada evento mediante el comando set

Antes de empezar

En esta guía se da por hecho que has hecho lo siguiente:

Para configurar el flujo de datos, necesitas lo siguiente:

  • Acceso al código del sitio web en el que has instalado la etiqueta de Google
  • El ID de etiqueta del producto de Google que quieres conectar con la etiqueta de Google

¿Qué es un ID de etiqueta y dónde se encuentra? Un ID de etiqueta identifica una etiqueta de Google. Una etiqueta de Google puede tener varios IDs de etiqueta. Por ejemplo, si usas Google Ads, tu etiqueta tendrá dos IDs: uno antiguo (AW) y un ID de etiqueta de Google (GT).

Pantalla con una etiqueta de Google dentro de Google Ads con dos IDs de etiqueta.

Los IDs de etiqueta son intercambiables. En la tabla siguiente se muestra un resumen de las etiquetas compatibles con la etiqueta de Google.

Prefijo Tipo de ID Descripción
GT-XXXXXX Etiqueta de Google A cada etiqueta de Google se le asigna un prefijo GT y un ID único.
G-XXXXXX Etiqueta de Google (prefijo antiguo) Las etiquetas de Google Analytics 4 son etiquetas de Google con un prefijo G y un ID único.
AW-XXXXXX Etiqueta de Google (prefijo antiguo) Las etiquetas de Google Ads son etiquetas de Google con un prefijo AW y un ID único.
DC-XXXXXX Etiqueta de Google (prefijo antiguo) Las etiquetas de 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).

Localizar el ID de etiqueta:

Paso 1: Conecta los productos de Google con tu etiqueta

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

Para ajustar y ampliar un comando config, especifica parámetros en el objeto opcional {<additional_config_params>}. Por ejemplo, al añadir el parámetro siguiente impedirás que se envíen automáticamente vistas de página de Google Analytics:

gtag('config', 'TAG_ID', {'send_page_view': false});

Configurar la recogida de datos

Para configurar la recogida de datos de un producto de Google, añade el comando config con un ID de etiqueta.

Ejemplo

La etiqueta de Google (GT-XXXXXX) envía datos a los destinos que has definido, como Google Ads y GA4.

En el siguiente ejemplo se muestra el aspecto que tendría tu código si configurases una etiqueta de Google y quisieras añadir Floodlight como destino.

Para enviar datos a Floodlight (ID de etiqueta DC-ZZZZZZ), añade otro comando config después de inicializar la etiqueta de Google:

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

En función del producto que se haya especificado en TAG_ID, el comando config iniciará un comportamiento específico para ese producto. Por ejemplo, en algunos casos, el comando config indica a gtag.js que inicie un evento de vista de una página.

Para obtener más información sobre el comportamiento del comando config en relación con un producto concreto, consulta la documentación del producto correspondiente:

Paso 2: Envía datos con event

Acerca del comando event

El comando event te permite enviar datos de eventos a los productos que has especificado con config. El comando tiene el siguiente formato:

gtag('event', 'event_name', {
  'key': 'value',
});

Acerca de los nombres de evento y los pares clave-valor

Eventos recomendados: los eventos recomendados son aquellos que implementas tú, pero que tienen pares clave-valor predefinidos. Estos eventos permiten usar funciones de registro de información, tanto disponibles actualmente como en el futuro.

Eventos personalizados: si quieres definir tus propios eventos y estructuras de datos, puedes introducir valores personalizados para enviar un evento personalizado.

Configurar eventos

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

  1. Define un evento. Si utilizas un evento recomendado, usa los nombres de evento estandarizados y los pares clave-valor predefinidos.

  2. Define cuándo se activará el evento; por ejemplo, si se envía al cargar la página o cuando un usuario hace clic en un botón.

Ejemplo

En el siguiente ejemplo se muestra una posible forma de medir las suscripciones a una newsletter cuando un usuario hace clic en un botón. El ejemplo usa un evento personalizado y lo envía a una propiedad de 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: Enviar datos con cada evento mediante el comando set

El comando set te permite definir los parámetros que se asociarán a eventos concretos cada vez que se activen en la página.

El comando tiene el siguiente formato:

gtag('set', {'key': 'value'});

Ejemplo

Si se usa la misma moneda en todas las transacciones de tu sitio, puedes utilizar el comando set para especificar el campo currency:

gtag('set', {'currency': 'USD'});

Puedes definir varios atributos con un único comando set:

gtag('set', {
  'country': 'US',
  'currency': 'USD'
});

Pasos siguientes

Una vez que hayas configurado tus productos y eventos de Google, habrás completado la configuración básica de la etiqueta de Google.

Si gestionas varios productos y quieres gestionar sus flujos de datos con más detalle, consulta la sección sobre cómo agrupar y enrutar datos.