Guía de configuración de Google Tag Manager

Esta guía te ayudará a configurar el seguimiento con Google Tag Manager (GTM), Google Analytics 4 (GA4), Meta (Facebook) Pixel y otras herramientas de seguimiento comunes, incluso si es tu primera vez.

Descripción general: integración de Google Tag Manager (GTM) <> Cents

Nuestra plataforma admite analítica basada en eventos mediante Google Tag Manager (GTM). Cada vez que un cliente realiza una acción (por ejemplo, iniciar sesión, estimar una dirección de entrega o enviar preferencias), se envía automáticamente un evento al dataLayer de GTM.

Luego puedes reenviar estos eventos a GA4, Facebook Pixel, Google Ads Pixel o cualquier otra herramienta de seguimiento conectada a través de GTM.

Esta guía tiene dos partes:

Parte uno: Primeros pasos
Parte dos: Solución de problemas

Parte uno: Conectar GTM a tu LiveLink

Primeros pasos: configuración de Google Tag Manager

Paso 1: Crear un contenedor de GTM

Si aún no tienes uno:

Ve a Google Tag Manager
Haz clic en Create Account

Agrega el nombre de tu empresa, elige un nombre de contenedor y selecciona Web como plataforma de destino.

Paso 2: Agrega tu ID de contenedor de GTM en el Business Manager

Copia el fragmento de tu contenedor (ej. GTM-XXXXXXXX) desde la barra superior de tu Tag Manager. Luego, en tu Business Manager, abre Integrations en el menú de la izquierda, busca la tarjeta de Google Tag Manager y haz clic en Add Integration. Ingresa el ID de tu contenedor de GTM y la URL de tu sitio web, y guarda. Eso conecta GTM con tu cuenta, ya no necesitas enviárselo a tu CSM.

Si tu sitio de pickup y entrega es un sitio web de Cents, tu ID de GTM y la URL pueden completarse automáticamente una vez que GTM esté conectado. En cualquier otra plataforma de sitio web, ingrésalos manualmente.

Puedes ignorar esta ventana emergente porque la integración de Cents con Google Tag Manager (GTM) se encarga de insertar este fragmento automáticamente.

📘 Referencia: guía oficial de configuración de GTM de Google

Paso 3: Instala Tag Assistant para Chrome

Use Tag Assistant para confirmar que el contenedor de GTM se activa correctamente en tus páginas. Esto solo funciona con Google Chrome. Si usas otro navegador, utiliza las herramientas para desarrolladores de ese navegador, disponibles en sus respectivos centros de ayuda.

Una vez descargada la extensión Tag Assistant, fíjala (pin) en tu navegador.

2. Solución de problemas: abre el LiveLink y verifica que la integración funciona

Abre tu LiveLink yendo a tu Business Manager y haciendo clic en el signo “+” en la página de órdenes
Once you're on the LiveLink open Tag Assistant. Deberías ver todos los contenedores de GTM que agregaste en el Business Manager.

Haz clic en troubleshoot tag para vincular Tag Assistant con tu LiveLink. Deberías ver esta pantalla de éxito

Si tienes varios tags agregados, asegúrate de seleccionar el correcto asociado a la tienda que estás viendo. En mi caso, es GTM-NLKJG2T

Ahora, vuelve a la página anterior donde tienes tu LiveLink y Tag Assistant abiertos. Cuando la conexión sea exitosa, verás la ventana emergente de Tag Assistant.

Vuelve a Google Tag Manager y haz clic en “Preview”. Ingresa la URL de tu LiveLink en el campo

Después de hacer clic en “Connect”, tu LiveLink debería aparecer. Intenta realizar una orden: deberían aparecer los siguientes eventos:

El nombre de cada evento aparecerá con el PREFIJO LiveLink. Puedes usarlos como triggers en GTM. También pueden registrarse otros clics.

Estos son los eventos de la experiencia ANTERIOR de LiveLink:

Event Name (GTM dataLayer)	Descripción	Regex Trigger (for GTM)
LiveLink: Sign up	Un usuario completa el registro	^LiveLink:\s*Sign up$
LiveLink: Sign in	Un usuario inicia sesión	^LiveLink:\s*Sign in$
LiveLink: OTP requested	Se solicita una contraseña de un solo uso	^LiveLink:\s*OTP requested$
LiveLink: OTP re-requested	Se reenvía la contraseña de un solo uso	^LiveLink:\s*OTP re-requested$
LiveLink: An unattended address estimated	Estimación de entrega calculada para una dirección sin atender	^LiveLink:\s*An unattended address estimated$
LiveLink: An attended address estimated	Estimación de entrega calculada para una dirección atendida	^LiveLink:\s*An attended address estimated$
LiveLink: Saved address estimation started	El usuario inicia la estimación desde una dirección guardada	^LiveLink:\s*Saved address estimation started$
LiveLink: New address estimation started	El usuario inicia la estimación para una dirección nueva	^LiveLink:\s*New address estimation started$
LiveLink: Address saving	El usuario guarda una dirección nueva	^LiveLink:\s*Address saving$
LiveLink: Updating of existing address	El usuario actualiza una dirección existente	^LiveLink:\s*Updating of existing address$
LiveLink: Sending an e-mail about the unavailability of delivery	Se envía un correo sobre la falta de disponibilidad de entrega	^LiveLink:\s*Sending an e-mail about the unavailability of delivery$
LiveLink: Delivery windows are submitted	Opciones de entrega confirmadas	^LiveLink:\s*Delivery windows are submitted$
LiveLink: Order successfully created with RWG	Orden creada con éxito (RWG)	^LiveLink:\s*Order successfully created with RWG$
LiveLink: Error occurred during order creation with RWG	Falló la creación de la orden con RWG	^LiveLink:\s*Error occurred during order creation with RWG$
LiveLink: Order successfully created with Tune Up	Orden creada con éxito (Tune Up)	^LiveLink:\s*Order successfully created with Tune Up$
LiveLink: Error occurred during order creation with Tune Up	Falló la creación de la orden con Tune Up	^LiveLink:\s*Error occurred during order creation with Tune Up$
LiveLink: Recurring order label clicked	Se hizo clic en la etiqueta de orden recurrente	^LiveLink:\s*Recurring order label clicked$
LiveLink: Preferences are submitted	El usuario envía sus preferencias de lavado	^LiveLink:\s*Preferences are submitted$
LiveLink: Dry Cleaning category selected	El usuario selecciona limpieza en seco	^LiveLink:\s*Dry Cleaning category selected$
LiveLink: Dry Cleaning category unselected	El usuario deselecciona limpieza en seco	^LiveLink:\s*Dry Cleaning category unselected$
LiveLink: Forcing the modifier screen to be displayed	Se fuerza a mostrar la pantalla de modificadores	^LiveLink:\s*Forcing the modifier screen to be displayed$
LiveLink: Services are submitted	Servicios u opciones confirmados	^LiveLink:\s*Services are submitted$
LiveLink: Subscription is submitted	Flujo de suscripción completado	^LiveLink:\s*Subscription is submitted$

Estos son los eventos de la NUEVA experiencia de LiveLink:

Event Name (GTM dataLayer)	Descripción	Regex Trigger (for GTM)
LiveLink: User views the order page after log-in	El usuario ve la página del LiveLink después de iniciar sesión	^LiveLink:\s*User views the order page after log-in$
LiveLink: Address is selected/input	El usuario ingresa o selecciona una dirección en el LiveLink	^LiveLink:\s*Address is selected/input$
LiveLink: User adds a service to their basket	El usuario selecciona un servicio y lo agrega a su carrito	^LiveLink:\s*User adds a service to their basket$
LiveLink: User removes a service from their basket	El usuario quita un servicio de su carrito	^LiveLink:\s*User removes a service from their basket$
LiveLink: User clicks next on home to the basket page	El usuario ve el carrito desde la página de inicio	^LiveLink:\s*User clicks next on home to the basket page$
LiveLink: User clicks next from basket to checkout page	El usuario pasa a la página de checkout desde el carrito	^LiveLink:\s*User clicks next from basket to checkout page$
LiveLink: El usuario agrega un método de pago method	El usuario agrega un método de pago	^LiveLink:\s*El usuario agrega un método de pago method$
LiveLink: User submits the order	El usuario envía su orden	^LiveLink:\s*User submits the order$

Consulta el video a continuación para más información:

Para ver metadatos adicionales de cada clic y evento, ve a la pestaña Data Layer.

Ejemplo de payload del data layer para el evento LiveLink: Order successfully created with RWG:

```json
{
  "event": "LiveLink: Order successfully created with RWG",
  "gtm": {
    "uniqueEventId": 453,
    "start": 1761009806266,
    "allowlist": null,
    "blocklist": null,
    "scrollThreshold": 90,
    "scrollUnits": "percent",
    "scrollDirection": "vertical",
    "triggers": "20,21,22,23,24,25,26,27,28,29",
    "priorityId": 17,
    "element": "HTMLButtonElement: html > body > div#root > div._wrapper_40jdv_1 > div.ptr > div.ptr__children > div._container_mddes_1537.undefined > div._container_lqw19_1537 > div.sc-blHHSb.sc-gtLWhw.iLDgup.jTrzQY > div.sc-blHHSb.sc-gtLWhw.cgpTud.jTrzQY > div._content_70500_599 > section._contentBody_70500_1563 > div._submitButtonWrapper_lqw19_1577._mobile_lqw19_1523 > button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeMedium.MuiButton-containedSizeMedium.MuiButton-colorPrimary.MuiButton-fullWidth.Mui-disabled._button_1lba7_13._contained_1lba7_2.css-vk6cgn",
    "elementClasses": "MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth _button_1lba7_13 _contained_1lba7_2 css-vk6cgn",
    "historyChangeSource": "popstate",
    "oldUrl": "https://app.trycents.com/new-order/laundrynyc/schedule/delivery",
    "newUrl": "https://app.trycents.com/new-order/laundrynyc/checkout"
  },
  "attributes": {
    "distance": "100%",
    "label": "/new-order/laundrynyc/home",
    "counter": 60
  },
  "developer_id": {"dZTQ1Zm": true},
  "businessId": 1947,
  "businessName": "Cents Suds",
  "storeId": 2725,
  "storeName": "Cents Laundry",
  "centsCustomer": {
    "id": 1225386,
    "firstName": "Francine",
    "lastName": "Dong",
    "email": "[email protected]",
    "phoneNumber": "7016109146"
  },
  "isOperatorSession": false,
  "isRWGFlow": true,
  "ownDeliveryIsAvailable": true,
  "ownDeliveryFee": 100,
  "pickup": {"fee": 100, "type": "OWN_DRIVER"},
  "delivery": {"fee": 100, "type": "OWN_DRIVER"},
  "subscriptionDetails": {
    "interval": 1,
    "deliveryTimingsId": 85535,
    "pickupTimingsId": 85533
  },
  "payload": {
    "orderDelivery": {
      "pickup": {"timingsId": 85533, "type": "PICKUP"},
      "delivery": {"timingsId": 85535, "type": "RETURN"}
    },
    "zipCode": "10013",
    "turnAroundInHours": 24
  },
  "hasMultipleServices": false
}
```

Parte dos: Configurar tags en GTM y conectarlos a fuentes externas

Configurar tags en GTM y conectarlos a fuentes externas

Usarás GTM para conectar los eventos de tu plataforma con herramientas de analítica y publicidad. Elige los eventos para los que quieras crear tags y triggers.

Ejemplo: enviar eventos a GA4
Ejemplo: enviar eventos a Facebook Pixel
Ejemplo: configurar un pixel de conversión de Google Ads

Ejemplo 1: enviar un evento a GA4

** Si aún no tienes una cuenta de Google Analytics, consulta este artículo para crear una primero.

En GTM, haz clic en Tags → New

2. Nombra tu carpeta con algo reconocible, ej. Google Analytics

3. Elige Tag Type → Google Analytics: GA4 Event

4. Selecciona tu Configuration Tag de GA4 existente (o crea una)

5. Copia tu measurement ID desde Google Analytics

6. Pégalo en el campo Measurement ID. Si no se encuentra ninguna etiqueta de Google, haz clic en “Create tag” y sigue el flujo.

7. En Event Name, ingresa un nombre de evento reconocible. En nuestro caso, usaremos “purchase”.

8. Ahora, en Triggering, haz clic en el “+” en la esquina superior derecha, entra en la configuración del trigger y selecciona Custom Event. Puedes nombrarlo algo reconocible como “purchase”.

Ingresa el nombre del evento exactamente como se muestra en la parte 1. Es importante que coincida EXACTAMENTE. En nuestro caso usaremos LiveLink: Order successfully created with RWG event. Usa Regex matching para una coincidencia menos estricta. Haz clic en save.

Repite los pasos de solución de problemas de la Parte 1 para verificar que tu nuevo tag se activa en el evento correcto

Verifica que ahora estás recibiendo eventos de analítica en tu cuenta de Google Analytics

Repite este proceso para cada evento que quieras rastrear.

📘 Referencia: Configurar GA4 en GTM, Eventos recomendados de GA4

Ejemplo 2: configurar un Pixel de Facebook (Meta)

**Asegúrate de tener ya un Business Portfolio en Facebook y una cuenta publicitaria dentro de él. Asígnate a la cuenta publicitaria como administrador completo.

Go to Meta Events Manager
Crea un nuevo Pixel y copia el código base del Meta Pixel

En GTM, haz clic en Tags → New → Tag Type → Custom HTML. Pega el código base de tu Pixel

Agrega triggers para los eventos que quieras. Repite los pasos de solución de problemas de la Parte 1 para asegurarte de que la configuración funciona.

📘 Reference: Configurar Meta Pixel con GTM

Ejemplo 3: configurar un Pixel de conversión de Google Ads

**Asegúrate de tener una cuenta de Google Ads creada

Ve a Google Ads Conversion Tracking
Crea una acción de conversión para los eventos que te interesen, ej. Purchase. Configúrala con “Use Google Tag Manager”.
En GTM, agrega un tag de Google Ads Conversion Tracking. Agrega tu Conversion ID y Label