Guía para desarrolladores de gtag.js

La etiqueta global de sitio web (gtag.js) es un marco de etiquetado y una API que permite enviar datos de eventos a AdWords, Analytics y DoubleClick. Si quieres evitar tener que gestionar varias etiquetas de productos diferentes, puedes usar gtag.js y aprovechar las últimas funciones e integraciones de seguimiento a medida que estén disponibles.

Con gtag.js podrás enviar fácilmente datos a varios productos de Google añadiendo código a tu sitio web. No es necesario crear cuentas adicionales ni modificar la configuración en ninguna interfaz independiente.

Google Tag Manager es un sistema de gestión de etiquetas eficaz y completo que admite todas las etiquetas de Google y de terceros. Puedes añadir y modificar etiquetas desde la interfaz de Tag Manager sin tener que adaptar el código de tu sitio web. Para obtener más información, consulta la guía para desarrolladores de Tag Manager.

Si usas Google Tag Manager, es preferible que sigas haciéndolo y que no añadas código gtag.js a tu sitio web. De todos modos, como gtag.js y Google Tag Manager están diseñados para poder coexistir, ambos funcionarían correctamente si se implementaran en la misma página.

Acerca de esta guía

Esta guía te ayudará a empezar a usar gtag.js en casos prácticos aplicables a AdWords, DoubleClick y Analytics. En concreto, la guía se centra en los puntos siguientes:

  • Cómo realizar la configuración básica de AdWords, DoubleClick y Analytics
  • Cómo enviar datos de eventos

No obstante, muchos de los aspectos de uso de la etiqueta gtag.js dependerán de los productos que utilices y de los datos concretos que quieras recopilar. Haz clic en los enlaces siguientes si quieres consultar documentación y casos prácticos específicos de cada producto:

Pasos de nivel avanzado para usar gtag.js

Independientemente de si quieres enviar datos a AdWords, DoubleClick o Analytics, el modelo básico para usar gtag.js es el siguiente:

  1. Añade el fragmento global a cada página del sitio web y configúralo para que funcione con el producto o los productos anteriores. Consulta la sección Añadir el fragmento global que encontrarás más abajo para averiguar cómo hacerlo.
  2. Usa comandos gtag() para capturar eventos y enviar datos a uno o más productos (p. ej., Analytics, AdWords, DoubleClick). Consulta la sección Usar comandos gtag() para configurar y enviar datos que encontrarás a continuación para saber cómo hacerlo.

Añadir el fragmento global

El fragmento global debe aparecer al principio de cada página de tu sitio web. Si el fragmento global no se añade al principio de una página, antes de los comandos gtag(), no se pueden enviar datos usando comandos gtag().

Si solo necesitas enviar datos a un producto, sigue las instrucciones correspondientes a dicho producto (Analytics, AdWords o DoubleClick). Para crear un fragmento personalizado, selecciona una pestaña de las que encontrarás a continuación, copia el fragmento y pégalo inmediatamente después de la etiqueta <head>, en cada página de su sitio web. Solo se necesita un fragmento global por página.

Si quieres enviar datos a varios productos, consulta la sección Añadir otro producto o cuenta al fragmento global que encontrarás más abajo.

Google Analytics

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

Para localizar el valor GA_TRACKING_ID:

  1. En tu cuenta de Analytics, haz clic en Administrar.
  2. En la columna "CUENTA", selecciona una cuenta del menú.
  3. En la columna "PROPIEDAD", selecciona una propiedad del menú.
  4. En "PROPIEDAD", haz clic en Información de seguimiento > Código de seguimiento.

Tu ID de seguimiento y tu número de propiedad aparecen en la parte superior de la página.

AdWords

<!-- Global site tag (gtag.js) - AdWords -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-GOOGLE_CONVERSION_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'AW-GOOGLE_CONVERSION_ID');
</script>

Para localizar el valor AW-GOOGLE_CONVERSION_ID:

  1. En tu cuenta de AdWords, ve a Herramientas > Conversiones> Acciones de conversión.
  2. En la columna Nombre, selecciona el nombre de la acción de conversión que quieres usar en la etiqueta gtag.js.
  3. En el cuadro de código, busca los valores de la variable google_conversion_id.

Añadir otro producto o cuenta al fragmento

global

Una vez instalado el fragmento gtag.js de cualquier producto, puedes configurarlo para que funcione con otros productos. Para hacerlo, solo debes añadir comandos de configuración adicionales.

A continuación tienes un ejemplo de fragmento global de Google Analytics al que se ha añadido una cuenta de AdWords en la parte inferior:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345-6">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'UA-12345-6');
  gtag('config', 'AW-123456789');
</script>

Ten en cuenta que la primera línea del fragmento gtag.js incluye una URL en el atributo src:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345-6">

Esta línea de código sirve para cargar la biblioteca de gtag.js y añadir un ID de seguimiento que se utiliza como identificador de la etiqueta global de sitio web. De esta forma, puede asociarse la etiqueta con el producto desde el que se originó.

Para ver ejemplos de cómo añadir varios productos y cuentas al fragmento global, consulta la guía de enrutamiento de gtag.js.

Usar comandos gtag() para configurar y enviar datos

Puedes invocar comandos gtag() desde cualquier lugar de una página, después del fragmento global. Puedes usar estos tres comandos: config, set y event.

config

Usa el comando config para inicializar y configurar los ajustes de una cuenta de producto concreta. El comando config tiene el formato siguiente:

gtag('config', '<target_ID>', {<additional_config_info>});

Una línea de código parecida a esta en el fragmento global configurado para Analytics tendrá dos funciones.

En la línea de código anterior, <target_ID> es el ID de la cuenta de producto a la que quieres enviar datos y {<additional_config_info>} es un objeto opcional con el que se pueden especificar opciones de configuración adicionales.

Según el producto especificado en target_ID, el comando config puede activar procesos distintos. Por ejemplo, cuando se llama al comando config con un ID de conversión de AdWords, el comando inicia una solicitud de remarketing y copia los ID de los clics en las cookies propias. Por otro lado, cuando se llama al comando config con un ID de propiedad de Google Analytics, el comando inicia un objeto de seguimiento de Google Analytics que se usará en los comandos event posteriores que se originen en la página para enviar automáticamente los hits de página vista a la propiedad de Google Analytics especificada.

Puedes ajustar y ampliar las funciones del comando config especificando parámetros en el objeto opcional <additional_config_info>. Por ejemplo, al añadir el parámetro siguiente impedirás que se envíen automáticamente los hits de páginas vistas de Google Analytics:

gtag('config', 'UA-12345-6', {'send_page_view': false});

set

El comando set permite establecer los valores que se aplicarán automáticamente a eventos concretos cada vez que estos se activen en la página. Por ejemplo, si se usa la misma moneda en todas las transacciones de tu sitio web, incluye el comando set después del fragmento global para especificar el valor del campo de moneda.

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

Puedes establecer varios atributos con un único comando set:

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

event

El comando event permite enviar datos de eventos. Por ejemplo, con el código siguiente se enviaría un evento "conversion" con los parámetros value y currency:

gtag('event', 'conversion', {
  'value': 1.0,
  'currency': 'USD'
});

Hay un conjunto de eventos recomendados y parámetros recomendados que son útiles en contextos específicos. Por ejemplo, el evento "page_view" envía un hit de página vista a Google Analytics. Para obtener más información sobre eventos y parámetros recomendados, consulta la guía de referencia de eventos.

También puedes crear nombres de eventos personalizados utilizando términos que no sean eventos recomendados. Este tipo de eventos se llaman eventos personalizados.