Integrar la etiqueta de Google en tu CMS o creador de sitios web

La etiqueta de Google (gtag.js) es un fragmento de código que se puede añadir a un sitio web para medir la actividad de usuario en distintos productos de Google, como Google Analytics 4, Google Ads y Google Marketing Platform. Más información sobre la etiqueta de Google

En esta guía se explica cómo integrar la etiqueta de Google en tu sistema de gestión de contenido (CMS) o en tu creador de sitios web para que tus usuarios finales puedan acceder a los productos de medición de Google.

Audiencia

Esta guía está pensada para propietarios de sistemas de gestión de contenido (CMS) o de creadores de sitios web que quieran ofrecer a sus usuarios una integración con los productos de medición de Google. Esta guía no va dirigida a usuarios de CMS o de creadores de sitios web.

Antes de empezar

Debes tener un ID de desarrollador de etiqueta de Google. Si no lo tienes, rellena el formulario de solicitud para conseguir tu ID de desarrollador de etiqueta de Google. Es diferente de otros IDs, como el ID de medición o el de conversión, que los usuarios finales añaden al código de medición de su sitio web.

Nota: Los IDs de desarrollador solo son necesarios si estás desarrollando una implementación que se utilizará en diferentes sitios web por empresas o entidades no relacionadas. Si la implementación solo se va a usar en un sitio y únicamente por una entidad o una empresa, no solicites un ID de desarrollador.

Descripción general

Estos son los pasos que debes seguir para integrar tu plataforma con los productos de Google:

1. Crear una integración con la etiqueta de Google
2. Actualizar la estructura de entrada del usuario
3. Implementar la API Consent
4. Configurar datos de eventos
5. Verificar la integración actualizada
6. Actualizar las instrucciones de implementación para usuarios

Crear una integración con la etiqueta de Google

Si creas una integración con la etiqueta de Google, tus clientes podrán implementar productos de medición de Google (a través de gtag.js) en todas las páginas de su sitio. Antes de crear una integración con gtag.js, quita las integraciones de etiquetas antiguas (por ejemplo, analytics.js).

Para crear una integración con la etiqueta de Google, sustituye el fragmento de código que tengas por el siguiente. Recuerda que los usuarios deben sustituir TAG_ID por su propio ID de etiqueta.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

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

Ten en cuenta lo siguiente:

• Los anunciantes pueden inhabilitar las funciones de personalización de anuncios, como el remarketing, con el parámetro allow_ad_personalization_signals (consulta el artículo Inhabilitar la recogida de datos de personalización de anuncios).
• Lo ideal es que el fragmento de etiqueta de Google solo aparezca una vez por página. El fragmento puede incluir varios IDs de etiqueta. Si ya hay una instancia de gtag.js, añade ahí los nuevos IDs de etiqueta. Más información

Actualizar la estructura de entrada del usuario

Tus clientes deben poder proporcionar su ID de etiqueta de Google a través de una sola interfaz de diferentes formas, independientemente del producto de medición de Google que estén implementando.

A continuación, se muestra un ejemplo sencillo de etiqueta de Google. La integración debe enmarcarse en una implementación de la etiqueta de Google. Se puede entender como un método para implementar Google Ads y Google Analytics.

En el siguiente diagrama se ve que una plataforma puede tener flujos independientes de usuarios para Analytics y Google Ads, pero cada flujo lleva a una interfaz en la que los usuarios proporcionan su ID de etiqueta de Google.

En el campo de ID de etiqueta se deben aceptar distintas variantes del ID con el patrón de expresión regular [A-Z]{1,3}\w{5,}[\w]*

Implementar la API Consent (modo de consentimiento)

La etiqueta de Google tiene integrada la API Consent para gestionar el consentimiento de los usuarios. Es capaz de distinguir entre el consentimiento de los usuarios para el uso de cookies con fines publicitarios y el consentimiento para el uso de cookies con fines analíticos.

Así, los clientes reciben al menos la llamada gtag('consent', 'update' {...}) integrada sin tener que hacer nada. De este modo, las etiquetas de Google (Google Ads, Floodlight, Google Analytics y vinculación de conversiones) pueden leer el último estado del consentimiento de los usuarios e incluirlo en las solicitudes de red a Google (a través del parámetro &gcs).

Para completar la implementación, hay que desplegar o ayudar a los anunciantes a desplegar (por ejemplo, a través de una UI) el estado gtag('consent', default' {...}) y desbloquear las etiquetas de Google (es decir, sin la activación condicional basada en el consentimiento) para que el modo de consentimiento las active según lo que decida cada usuario.

Para obtener más información sobre la implementación, consulta el artículo Gestionar la configuración del consentimiento (web).

Configurar datos de eventos

Debes enviar datos de eventos enriquecidos desde el sitio web del cliente a su cuenta de Google sin que el cliente tenga que hacer nada. Por ejemplo, puedes añadir los eventos que correspondan a un embudo de compra (como add_to_cart, begin_checkout, add_payment_info, add_shipping_info y purchase) a la generación de oportunidades de venta y a los registros.

Estas son las prácticas recomendadas para añadir eventos:

• Registrar toda la información posible
• Configurar al menos ocho eventos principales
• Dar prioridad a los eventos de comercio electrónico

Registrar toda la información posible

Siempre que sea posible, configura eventos de forma predeterminada. Por ejemplo:

• Eventos de conversión, como purchase o sign_up
• Eventos anteriores a los eventos de conversión, como add_to_cart
• Comportamientos como interacciones con medios que ayudan a los clientes a entender cómo interactúan con sus usuarios finales

Solo debes añadir fragmentos de eventos de conversión a páginas de conversión (por ejemplo, a confirmaciones de compras o confirmaciones de envío de formularios). No obstante, recuerda que debes añadir la etiqueta de Google a todas las páginas del sitio.

Los eventos se envían con el comando event, que incluye el mismo ID de desarrollador de etiqueta de Google que has incluido en la etiqueta global de sitio web descrita anteriormente:

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Por ejemplo, puedes usar el comando event para enviar un evento login con el valor "Google" en method:

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});

<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Ten en cuenta lo siguiente:

• Tu ID de desarrollador <developer ID> es único y específico para tu plataforma. Incluye el ID en todos los eventos.
• Los siguientes parámetros son opcionales y se pueden omitir:
  • 'value' es el valor numérico de la conversión (por ejemplo, el precio de una compra).
  • 'currency' es un código de moneda de tres letras que resulta útil a los anunciantes que aceptan distintas monedas.
  • 'transaction_id' es un ID único de la transacción (por ejemplo, un ID de pedido) y se utiliza para evitar duplicados.
• Aunque algunos parámetros son opcionales, te recomendamos que incluyas toda la información que sea posible con cada evento.
  • Los parámetros te proporcionan información adicional sobre la forma en que los usuarios interactúan con tu sitio web o tu aplicación. Por ejemplo, cuando un usuario ve uno de los productos que vendes, puedes incluir parámetros que describan ese producto, como su nombre, su categoría y su precio.
  • Algunos parámetros rellenan automáticamente las dimensiones y las métricas predefinidas en Google Analytics para que los usuarios puedan identificar mejor a sus clientes.

Si quieres medir un evento de conversión en función de un clic (por ejemplo, un clic en un botón o una respuesta dinámica en un sitio con AJAX), también puedes usar el siguiente fragmento:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Configurar al menos ocho eventos principales

Te recomendamos que configures un conjunto principal con los eventos que resulten más útiles a los propietarios de sitios web. Como mínimo, configura los siguientes eventos:

• view_item_list: cuando un usuario ve una lista de artículos (por ejemplo, una lista de productos). Más información

  gtag('event', 'view_item_list', {
    item_list_id: "related_products",
    item_list_name: "Related products",
    items: [{
      item_id: "SKU_123",
      item_name: "Test Item",
      currency: "USD",
      discount: 2.22,
      price: 99.9,
      quantity: 1
    }]
  });
  

• add_to_cart: cuando un usuario añade uno o varios productos al carrito de la compra. Más información

  gtag('event', 'add_to_cart', {
    value: 99.0,
    currency: "USD",
    items: [{
      item_id: "SKU_123",
      item_name: "Test Product",
      price: 99.0,
      currency: ‘USD’,
      quantity: 1,
      item_category: "All Products"
    }]
  });
  

• begin_checkout: cuando un usuario inicia el proceso de pago de uno o varios productos. Más información

  gtag('event', 'begin_checkout') {
    value: 99.0,
    currency: "USD",
    items: [{
      item_id: "SKU_123",
      item_name: "Test Product",
      price: 99.0,
      currency: ‘USD’,
      quantity: 1,
      item_category: "All Products"
    }]
  });
  

• purchase: cuando un usuario compra uno o varios productos o servicios. Más información

  gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
  

• sign_up: cuando un usuario se registra, para que así vea los métodos más populares (por ejemplo, una cuenta de Google o una dirección de correo). Más información

  gtag('event', 'sign_up', {method: 'web'});
  

• generate_lead: cuando un usuario envía un formulario. Más información

  gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
  

• subscribe: cuando un usuario se suscribe a un servicio o una newsletter.

  gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
  

• book_appointment: cuando un usuario reserva una cita.

  gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
  

Otras recomendaciones

Google admite muchos más eventos y parámetros, en particular para el comercio electrónico. En general, te recomendamos que registres lo siguiente:

• Cualquier evento de éxito asociado directamente al valor
• Eventos de éxito que contribuyen a las conversiones principales (add_to_cart, sign_up, etc.)
• Interacciones que permiten a los anunciantes identificar cómo están interactuando con sus usuarios finales

A continuación, se incluyen otros recursos que explican en mayor profundidad la recogida de eventos:

• Eventos
• Eventos recomendados por caso práctico
• Medición de comercio electrónico en propiedades de Google Analytics 4

Estamos dispuestos a ampliar este esquema, así que no dudes en ponerte en contacto con nosotros si tienes alguna sugerencia.

Verificar la integración actualizada

Antes de enviar los cambios a producción, comprueba la compatibilidad con los siguientes elementos:

• Tu etiqueta de Google con un destino de Google Analytics 4
• Tu etiqueta de Google para el remarketing y la medición de conversiones

Comprueba también que la etiqueta se active correctamente en todas las páginas, incluidas las de conversión. Para ello, usa cualquiera de estas herramientas:

• Google Tag Assistant: puedes ver qué etiquetas de Google se han activado y en qué orden. El modo de depuración de Tag Assistant muestra los datos que se transfieren a la capa de datos y los eventos que activan esos intercambios de datos.
• Herramientas para desarrolladores de Chrome: usa la pestaña Red para filtrar las solicitudes que contengan "google" y así verificar cómo se envían los datos.
• Informe "En tiempo real" de Google Analytics (en el servidor): crea una cuenta de Google Analytics gratuita y utiliza el informe En tiempo real para comprobar si los servidores de Google reciben los hits de etiqueta.

Para informar de errores o de falta de información, rellena el formulario de asistencia para sistemas de gestión de contenido (CMS).

Si puedes, indica a Google cómo acceder para hacer una verificación de prueba.

Actualizar las instrucciones de implementación para usuarios

Actualiza la documentación para ofrecer instrucciones claras sobre cómo implementar productos de medición de Google mediante tu implementación. Envíanos un borrador de estas instrucciones rellenando el formulario de revisión de documentación para configurar la integración del CMS. Así podremos responderte con nuestros comentarios.