Integra la etiqueta de Google en tu CMS o creador de sitios web.

La etiqueta de Google 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, Google Ads y Google Marketing Platform. Obtén más información sobre la etiqueta de Google.

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

Público

Esta guía está destinada a los propietarios de sistemas de administración de contenido (CMS) o creadores de sitios web que desean proporcionar a sus usuarios una integración con los productos de medición de Google. No está destinada a los usuarios de un CMS o creador de sitios web.

Antes de comenzar

Asegúrate de tener un ID de desarrollador de la etiqueta de Google. Si no tienes uno, 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 tus usuarios finales agregan al código de medición de su sitio web.

Descripción general

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

  1. Crea una integración con la etiqueta de Google.
  2. Actualiza la estructura de entrada del usuario.
  3. Implementa la API de Consentimiento.
  4. Configura los datos de eventos.
  5. Verifica la integración actualizada.
  6. Actualiza las instrucciones de implementación del usuario.

Crea una integración con la etiqueta de Google

Si creas una integración con la etiqueta de Google, tus clientes podrán implementar los productos de medición de Google (a través de gtag.js) en todas las páginas de su sitio. Asegúrate de quitar 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('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID
  gtag('js', new Date());

  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 Inhabilita la recopilación de datos de publicidad personalizada.
  • Lo ideal es 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 IDs de etiqueta nuevos a la etiqueta existente. Obtén más información.

Actualiza la estructura de entrada del usuario

Tus clientes deberían poder proporcionar varias formas de su ID de etiqueta de Google a través de una interfaz, independientemente del producto de medición de Google que implementen.

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

Casilla de entrada del ID de etiqueta de Google

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

Anuncios y estadísticas que conducen a un flujo de entrada

La entrada del ID de etiqueta debe aceptar varias 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 del usuario. Puede diferenciar el consentimiento del usuario para las cookies con fines publicitarios de las que se usan para fines de Analytics.

El resultado esperado es que los clientes obtengan al menos la gtag('consent', 'update' {...}) llamada integrada sin que el cliente deba realizar ninguna acción. Esto debería garantizar que las etiquetas de Google (Google Ads, Floodlight, Google Analytics, Vinculador de conversiones) puedan leer el estado de consentimiento del usuario más reciente y que lo incluyan 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, sin activación condicional basada en el consentimiento) para permitir que el modo de consentimiento las active de una manera que tenga en cuenta el consentimiento.

Para obtener detalles de la implementación, consulta Administra la configuración de consentimiento (web).

Configura los datos de eventos

Debes enviar datos de eventos enriquecidos desde el sitio web del cliente a su cuenta de Google sin que el cliente deba realizar 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 leads y los registros.

Estas son algunas de las prácticas recomendadas para agregar eventos:

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

Registra todo lo que sea posible

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

  • Eventos clave, como purchase o sign_up
  • Eventos anteriores a los eventos clave, como add_to_cart
  • Interacciones de comportamiento, como las interacciones con medios, que ayudan a los clientes a comprender cómo interactúan con sus usuarios finales

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

Los eventos se envían con el event comando. Esto incluye el mismo ID de desarrollador de la etiqueta de Google que incluiste en la etiqueta global del sitio que se describió 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 de tu plataforma. Adjunta el ID a cada evento.
  • Los siguientes parámetros son opcionales y se pueden omitir:
    • 'value' es el valor numérico del evento clave (p. ej., el precio de una compra).
    • 'currency' es un código de moneda de tres letras, útil para los anunciantes que aceptan varias monedas.
    • 'transaction_id' es un ID único para la transacción (p.ej., un ID de pedido); se usa para fines de eliminación de duplicados.
  • Aunque algunos parámetros son opcionales, te recomendamos que incluyas la mayor cantidad de información posible para cada evento.
    • Los parámetros proporcionan más información sobre las formas en las que los usuarios interactúan con su sitio web o aplicación. Por ejemplo, cuando alguien ve un producto que usted vende, puede 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 brindan a los usuarios una mejor comprensión de sus clientes.

Si deseas medir un evento clave basado en un clic (p.ej., un clic en un botón o una respuesta dinámica para un sitio que usa 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>

Configura al menos 8 eventos principales

Te recomendamos que configures un conjunto de eventos principales que tengan el mayor valor para los propietarios del sitio. Como mínimo, te recomendamos que configures los siguientes eventos:

  • view_item_list: Cuando un usuario ve una lista de elementos (p.ej., 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 agrega uno o más productos a un carrito de compras. 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 finalización de la compra de uno o más 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 más 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 el usuario final pueda ver los métodos de registro más populares (p.ej., Cuenta de Google, dirección de correo electrónico). 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 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 que captures lo siguiente:

  • Cualquier evento de éxito asociado directamente con el valor
  • Eventos de éxito que contribuyen a eventos clave principales (add_to_cart, sign_up, etc.)
  • Interacciones y participaciones del usuario 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 posibles extensiones de este esquema, así que avísanos si tienes sugerencias.

Verifica la 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
  • Tu 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 páginas de eventos clave, 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 contienen "google" y verificar cómo se envían los datos.
  • Informe en tiempo real de Google Analytics (del servidor): Informe en tiempo real de Google Analytics: 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 la etiqueta.

Para informar un error o proporcionar comentarios sobre la información faltante, completa el formulario de asistencia del sistema de administración de contenido.

Cuando sea posible, comparte el acceso de prueba con Google para la verificación continua.

Actualiza las instrucciones de implementación del usuario

Actualiza tu documentación para proporcionar instrucciones claras sobre cómo implementar los productos de medición de Google con tu implementación. Para que podamos proporcionar comentarios, completa el formulario de revisión de la documentación de configuración de la integración del CMS y comparte un borrador de estas instrucciones.