Integra 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 agregar a un sitio web para medir la actividad del usuario en una variedad de productos de Google, incluidos Google Analytics 4, Google Ads y Google Marketing Platform. Más información sobre la etiqueta de Google

En esta guía, se describe cómo integrar la etiqueta de Google en el sistema de administración de contenido (CMS) o en el creador de sitios web para brindar a los usuarios finales acceso a los productos de medición de Google.

Público

Esta guía está destinada a los propietarios del sistema de administración de contenido (CMS) o los creadores de sitios web que deseen proporcionar a sus usuarios una integración en los productos de medición de Google. Esta guía no está destinada a los usuarios de un CMS o de un creador de sitios web.

Antes de comenzar

Asegúrate de tener un ID de desarrollador de la etiqueta de Google. Si no tienes un ID de desarrollador de la etiqueta de Google, completa el formulario de solicitud de ID de desarrollador de la etiqueta de Google. Tu ID de desarrollador es diferente de otros IDs, como el ID de medición o el ID de conversión, que los usuarios finales agregan al código de medición de su sitio web.

Descripción general

Para integrar tu plataforma en los productos de Google, sigue estos pasos:

  1. Cómo crear una integración con la etiqueta de Google
  2. Cómo actualizar la estructura de entrada del usuario
  3. Cómo implementar la API de Consent
  4. Cómo configurar datos de eventos
  5. Verifica tu integración actualizada
  6. Actualiza las instrucciones de implementación del usuario

Cómo crear una integración con la etiqueta de Google

Mediante la creación de una integración con la etiqueta de Google, tus clientes pueden implementar productos de medición de Google (a través de gtag.js) en todas las páginas de su sitio. Asegúrate de quitar todas las integraciones de etiquetas heredadas existentes (por ejemplo, analytics.js) antes de crear una integración con gtag.js.

Para crear una integración con la etiqueta de Google, reemplaza el fragmento de código existente por el siguiente. Asegúrate de que los usuarios puedan reemplazar 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 Cómo inhabilitar la recopilación de datos de la publicidad personalizada.
  • Lo ideal sería que el fragmento de la etiqueta de Google aparezca solo una vez por página. El fragmento puede admitir varios IDs de etiqueta. Si hay una instancia existente de gtag.js, debes agregar los IDs de etiqueta nuevos a la etiqueta existente. Más información

Cómo actualizar la estructura de entrada del usuario

Tus clientes deben poder proporcionar varias formas de ID de etiqueta de Google a través de una interfaz, sin importar el producto de medición de Google que estén implementando.

Por ejemplo, a continuación se muestra una entrada simple de una etiqueta de Google. La integración se debe enmarcar como una implementación para la etiqueta de Google. Esto se puede subtitular como un método para implementar Google Ads y Google Analytics.

Una imagen de la casilla de entrada del ID de una etiqueta de Google

Como alternativa, en el siguiente diagrama, se muestra cómo una plataforma puede tener flujos de usuarios separados para Analytics y Google Ads, pero cada flujo conduce a una interfaz en la que los usuarios proporcionan su ID de etiqueta de Google.

Una imagen de Analytics y Google Ads que lleva
a un flujo de entrada

La entrada de ID de etiqueta debe aceptar múltiples variantes de ID con el patrón de expresión regular [A-Z]{1,3}\w{5,}[\w]*

La etiqueta de Google tiene una API de consentimiento integrada para administrar el consentimiento de los usuarios. Puede diferenciar el consentimiento de los usuarios para cookies con fines publicitarios y el consentimiento con fines estadísticos.

El resultado esperado es que los clientes obtengan, al menos, la llamada a gtag('consent', 'update' {...}) integrada sin que el cliente deba realizar ninguna acción. Esto debe garantizar que las etiquetas de Google (Google Ads, Floodlight, Google Analytics y vinculador de conversiones) puedan leer el estado de consentimiento del usuario más reciente y, además, incluir el estado en las solicitudes de red a Google (a través del parámetro &gcs).

Los pasos de implementación adicionales serían implementar o ayudar a los anunciantes a implementar (p. ej., a través de una IU) el estado gtag('consent', default' {...}) y desbloquear las etiquetas de Google (es decir, no activar la activación condicional basada en el consentimiento) para habilitar el modo de consentimiento para que se active de una manera compatible con el consentimiento.

Para obtener detalles sobre la implementación, consulta Cómo administrar la configuración de consentimiento (Web).

Cómo configurar datos de eventos

Deberías enviar datos de eventos enriquecidos desde el sitio web del cliente a su Cuenta de Google sin necesidad de que el cliente realice ninguna acción. Por ejemplo, puedes agregar los eventos a lo largo de un embudo de compra (es decir, add_to_cart, begin_checkout, add_payment_info, add_shipping_info y purchase), la generación de clientes potenciales y los registros.

A continuación, se incluyen las prácticas recomendadas para agregar eventos:

  • Registra todo lo posible
  • Configura al menos 8 eventos principales
  • Prioriza los eventos de comercio electrónico

Registra todo lo posible

Siempre que sea posible, debes configurar los eventos de forma predeterminada. Esto incluye lo siguiente:

  • Los eventos de conversión, como purchase o sign_up
  • Eventos antes de los eventos de conversión, como add_to_cart
  • Interacciones basadas en el comportamiento, como las interacciones en los medios de comunicación que ayudan a los clientes a comprender cómo interactúan con los usuarios finales

Debes agregar fragmentos de evento de conversión solo a las páginas de conversión (p.ej., la confirmación de la compra o la confirmación del envío de un formulario). Ten en cuenta que aún debes agregar la etiqueta de Google en todas las páginas del sitio.

Los eventos se envían con el comando event. Esto incluye el mismo ID de desarrollador de la etiqueta de Google que incluiste en la etiqueta global del sitio 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 un valor method de “Google”:

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. Adjunta el ID a cada evento.
  • Los siguientes parámetros son opcionales y se pueden omitir:
    • 'value' es el valor numérico de la conversión (p. ej., el precio de una compra).
    • 'currency' es un código de moneda de tres letras que resulta útil para los anunciantes que aceptan varias monedas.
    • 'transaction_id': Es el ID único de la transacción (p.ej., un ID de pedido) y se usa para anular la duplicación.
  • Aunque algunos parámetros son opcionales, se recomienda que incluyas la mayor cantidad de información disponible para cada evento.
    • Los parámetros proporcionan información adicional sobre las formas en que los usuarios interactúan con tu sitio web o app. Por ejemplo, cuando alguien ve un producto que vendes, puedes incluir parámetros que describan ese producto, como el nombre, la categoría y el precio.
    • Algunos parámetros propagan automáticamente las dimensiones y métricas compiladas previamente en Google Analytics y les permiten a los usuarios comprender mejor a sus clientes.

Si deseas medir un evento de conversión basado en un clic (p.ej., un clic en un botón o una respuesta dinámica para un sitio que utiliza AJAX), también puedes utilizar 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>

Configura al menos 8 eventos principales

Te recomendamos que configures un conjunto principal de eventos que sean más valiosos para los propietarios de sitios. Como mínimo, te recomendamos que configures los siguientes eventos:

  • view_item_list: Cuando un usuario ve una lista de artículos (p.ej., una lista de productos). Obtén 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 agrega uno o más productos a un carrito de compras. Obtén 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 confirmación de la compra de uno o más productos. Obtén 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 más productos o servicios. Obtén más información.

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
    
  • sign_up: Cuando se registra un usuario final para que pueda ver los métodos de registro más populares (p.ej., Cuenta de Google, dirección de correo electrónico). Obtén más información.

    gtag('event', 'sign_up', {method: 'web'});
    
  • generate_lead: Cuando un usuario envía un formulario. Obtén más información.

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
    
  • subscribe: Ocurre cuando un usuario se suscribe a un servicio o a un boletín informativo.

    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'});
    

Recomendaciones adicionales

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

  • Cualquier evento de éxito asociado directamente con el valor
  • Eventos de éxito que contribuyen a las conversiones principales (add_to_cart, sign_up, etcétera)
  • Las participaciones y las interacciones de los usuarios que ayudan a los anunciantes a comprender cómo interactúan con sus usuarios finales

Los siguientes son recursos adicionales que explican con más detalle la recopilación de eventos:

Nos interesa analizar las posibles extensiones de este esquema, así que comunícate con nosotros si tienes sugerencias.

Verifica tu integración actualizada

Antes de enviar los cambios a producción, verifica la compatibilidad con lo siguiente:

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

Además, verifica que la etiqueta se active correctamente en todas las páginas, incluidas las de conversión, con cualquiera de estas herramientas:

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

Para informar un error o enviar comentarios sobre la información faltante, completa el formulario Asistencia para el sistema de administración de contenido.

Cuando sea posible, comparte el acceso a la prueba con Google para que realice una verificación continua.

Actualiza las instrucciones de implementación de usuario

Actualiza tu documentación para proporcionar instrucciones claras sobre cómo implementar los productos de medición de Google a través de tu implementación. Completa el formulario de revisión de la documentación de configuración de la integración de CMS para que podamos proporcionar comentarios y compartir un borrador de estas instrucciones.