Configurar productos de Google y enviar datos de eventos

Esta página está destinada a los desarrolladores que necesitan configurar la etiqueta de Google usando gtag.js. La etiqueta de Google también permite cambiar algunos ajustes de la interfaz de usuario. Consulta el artículo Configurar los ajustes de su etiqueta de Google.

Después de instalar la etiqueta de Google, puedes llamar a comandos gtag() desde cualquier parte de tu código, detrá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, si añades 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 ejemplo de abajo se muestra cómo actualizar tu código para cargar una segunda etiqueta de Google que esté vinculada a un destino de Floodlight.

Para enviar datos a Floodlight (ID de etiqueta DC-ZZZZZZ), añade otro comando config después de inicializar la 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 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 parámetros que se asociarán con cada evento posterior en la página.

Por ejemplo, puedes asociar parámetros de campaña para que distintas etiquetas de la misma página puedan acceder a ellos.

El comando tiene el siguiente formato:

gtag('set', 'parameterName');

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.