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 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 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 o creadores de sitios web del sistema de administración de contenido (CMS) que deseen proporcionar a sus usuarios una integración con los productos de medición de Google. Esta guía no está dirigida a 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 tus usuarios finales agregan al código de medición de su sitio web.

Nota: Los IDs de desarrollador solo son necesarios cuando creas una implementación que las empresas o entidades no relacionadas usarán en varios sitios web. Si un sitio o una entidad usarán la implementación, no solicites un ID de desarrollador.

Descripción general

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

1. Cómo crear una integración con la etiqueta de Google
2. Actualiza la estructura de entrada del usuario
3. Implementa la API de Consent
4. Configura los datos de eventos
5. Verifica tu integración actualizada
6. Actualiza las instrucciones de implementación para el 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 productos de medición de Google (a través de gtag.js) en cada página 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 tu 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 Inhabilita la recopilación de datos para la 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. Más información

Cómo actualizar la estructura de entrada del usuario

Tus clientes deben 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 de etiqueta de Google simple. 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.

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 lleva a una interfaz en la que los usuarios proporcionan su ID de etiqueta de Google.

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

Implementa la API de Consent (también conocida como modo de consentimiento)

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 con fines de análisis.

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

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

Configura los datos de eventos

Debes enviar datos de eventos enriquecidos del 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 clientes potenciales y los registros.

Las siguientes son 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:

• Eventos clave, como purchase o sign_up
• Eventos anteriores a los eventos clave, como add_to_cart
• Interacciones conductuales, como interacciones con contenido multimedia que ayudan a los clientes a comprender cómo atraen a sus usuarios finales

Debes agregar fragmentos de eventos clave solo a las páginas de eventos clave (p.ej., confirmación de compra o 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 comando event. Esto incluye el mismo ID de desarrollador de la etiqueta de Google que incluiste en la etiqueta del sitio global 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 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 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 de la transacción (p.ej., un ID de pedido); se usa para anular la duplicación.
• Si bien algunos parámetros son opcionales, se recomienda que incluyas la máxima información disponible para cada evento.
  • Los parámetros proporcionan información adicional sobre las formas en las que los usuarios interactúan con tu sitio web o aplicación. 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 precompiladas en Google Analytics y les permiten a los usuarios comprender mejor a sus clientes.

Si deseas medir un evento clave en función de 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 principal de eventos 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 confirmació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 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 la siguiente información:

• Cualquier evento de éxito directamente asociado con el valor
• Eventos de éxito que contribuyen a los eventos clave principales (add_to_cart, sign_up, etc.)
• Participación e interacciones de los usuarios que ayudan a los anunciantes a comprender cómo atraen a sus usuarios finales

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

• Eventos
• Eventos recomendados por caso de uso
• Mide el comercio electrónico para las propiedades Google Analytics 4

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:

• Su 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 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 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 la etiqueta.

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

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

Actualiza las instrucciones de implementación para el 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. Comparte un borrador de estas instrucciones completando el formulario de revisión de la documentación de la configuración de la integración de CMS para que podamos proporcionar comentarios.