Google Consent Mode en un píxel personalizado de Shopify (Google Tag Manager)

Resumen

Algunas tiendas cargan un contenedor de Google Tag Manager (GTM) desde un Shopify custom pixel (Settings > Customer events) en lugar de, o además de, hacerlo desde la tienda. Este artículo muestra cómo aplicar Google Consent Mode Advanced a las etiquetas que dispara ese contenedor.

Con GTM hay muy poco código que escribir. Dos líneas al principio del píxel pasan el consentimiento del visitante a la etiqueta Pandectes CMP de tu contenedor, y la etiqueta hace el resto.

Si no usas GTM y cargas Google Analytics 4 o Google Ads directamente con gtag.js, usa en su lugar Google Consent Mode en un píxel personalizado de Shopify (gtag.js). Usa un enfoque u otro para una propiedad de Google, nunca ambos.

Antes de empezar

• La etiqueta CMP de Pandectes debe estar en tu contenedor. Añádela desde la Template Gallery de GTM, dispárala en Consent Initialization - All Pages y configura el consentimiento que necesita cada etiqueta. Los pasos están en Integración con Google Tag Manager (GTM): plantilla oficial de Pandectes.
• Configura primero la parte de la tienda. El píxel solo cubre lo que se ejecuta dentro del propio píxel. Las etiquetas de Google en la propia tienda se configuran como se describe en Cómo configurar Google Tag Manager con Pandectes.
• Revisa tu plan. Google Consent Mode y la etiqueta CMP de Pandectes funcionan en el plan Plus y superiores.

Por qué el píxel necesita su propia configuración de consentimiento

Un píxel personalizado de Shopify se ejecuta en un iframe aislado con su propio window y su propio dataLayer. Está separado de la página de la tienda, y el consentimiento configurado en uno es invisible para el otro.

Así que un contenedor cargado dentro del píxel no puede ver el consentimiento que ya tiene la tienda. Las dos líneas de abajo se lo pasan. Todo lo de este artículo se aplica solo dentro del píxel.

Las dos líneas

Colócalas al principio absoluto del píxel personalizado, antes del fragmento de GTM y antes de cualquier otra cosa:

window.pandectesPixelInit = init;
window.pandectesSubscribe = api.customerPrivacy.subscribe;

Esa es toda la configuración del consentimiento. La etiqueta CMP de Pandectes en tu contenedor las lee, aplica el estado de consentimiento por defecto correcto para el visitante y lo actualiza cada vez que el visitante cambia su elección en el banner. No necesitas escribir comandos default ni update ni mantener una lista de regiones: la etiqueta toma la política de la configuración de tu banner.

Dos reglas de colocación:

• Las líneas van primero. La etiqueta las lee cuando arranca el contenedor. Si el fragmento de GTM se ejecuta antes, no hay nada que leer.
• Las líneas van en el mismo píxel que el contenedor. Cada píxel personalizado es su propio sandbox. Configurarlas en un píxel no sirve de nada para un contenedor cargado en otro.

Modo Advanced y permiso del píxel

Esta configuración te da Google Consent Mode Advanced: el contenedor se carga en cada visualización de página, sus etiquetas envían pings sin cookies mientras el consentimiento está denegado y pasan a medición completa cuando se concede.

Para eso, el píxel debe poder ejecutarse antes del consentimiento. En Shopify Admin, ve a Settings > Customer events, abre tu píxel personalizado y, en Customer privacy, configura Permission como Not required. Si lo configuras como Required, Shopify retiene el píxel hasta que el visitante acepta, el contenedor nunca se carga y no se envía ningún ping sin cookies.

Si quieres Basic mode en su lugar (nada se carga hasta que se da el consentimiento), configura Permission como Required, selecciona las categorías que necesites y deja que Shopify retenga el píxel.

El código del píxel

1. En Shopify Admin, ve a Settings > Customer events y haz clic en Add custom pixel.
2. Dale un nombre al píxel y pega el código de abajo.
3. Sustituye GTM-XXXXXXX por el ID de tu contenedor.
4. Añade tus propias suscripciones a eventos al final.
5. Configura el permiso como se describe arriba, haz clic en Save y luego en Connect.

/* Pandectes consent handover.
 * Keep these two lines at the very top, above the GTM snippet.
 * The Pandectes CMP tag in your container reads them. */
window.pandectesPixelInit = init;
window.pandectesSubscribe = api.customerPrivacy.subscribe;

/* START_MODIFY_FOR_YOUR_STORE */
const GTM_ID = "GTM-XXXXXXX"; // your container ID
/* END_MODIFY_FOR_YOUR_STORE */

/* Load the GTM container inside the pixel sandbox.
 * This dataLayer is not shared with the storefront or other pixels. */
window.dataLayer = window.dataLayer || [];

(function (w, d, s, l, i) {
  w[l] = w[l] || [];
  w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
  var f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l != "dataLayer" ? "&l=" + l : "";
  j.async = true;
  j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
  f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", GTM_ID);

/* YOUR EVENT SUBSCRIPTIONS GO HERE, IN THIS SAME PIXEL.
 *
 * The code above sets consent and loads the container. On its own it
 * pushes nothing to the dataLayer.
 *
 * The example below is sample code only, adapted from Shopify's GTM
 * tutorial. Adapt the events and fields to your own GTM triggers.
 * Shopify's original also pushes email, phone and address. Those are
 * left out on purpose: putting personal data in the dataLayer is a
 * privacy decision you need to make for your own store. */

// analytics.subscribe("checkout_completed", (event) => {
//   window.dataLayer.push({
//     event: "checkout_completed",
//     timestamp: event.timestamp,
//     id: event.id,
//     token: event.data?.checkout?.token,
//     url: event.context.document.location.href,
//     client_id: event.clientId,
//     orderId: event.data?.checkout?.order?.id,
//     currency: event.data?.checkout?.currencyCode,
//     subtotal: event.data?.checkout?.subtotalPrice?.amount,
//     shipping: event.data?.checkout?.shippingLine?.price?.amount,
//     value: event.data?.checkout?.totalPrice?.amount,
//     tax: event.data?.checkout?.totalTax?.amount,
//   });
// });

Cada evento que envíes necesita un disparador Custom Event correspondiente en GTM con exactamente el mismo nombre que la clave event (checkout_completed en el ejemplo).

Cada píxel que cargue un contenedor necesita las dos líneas

No puedes poner las dos líneas en un píxel personalizado y cargar el contenedor en otro. Cada píxel es un sandbox separado. Un contenedor cargado en un píxel sin las dos líneas no tiene estado de consentimiento, y sus etiquetas se disparan con los valores por defecto de Google sin ningún aviso.

Lo mismo vale para tus suscripciones a eventos: deben estar en el mismo píxel, debajo del fragmento de GTM.

Comprueba que funciona

Tag Assistant y GTM Preview no pueden ver el píxel

Ni Google Tag Assistant ni el modo Preview de GTM se conectan a un contenedor que se ejecuta dentro del sandbox del píxel. Solo inspeccionan la página de la tienda, así que no muestran nada (o solo las etiquetas propias de la tienda) aunque el píxel funcione correctamente. Esto es lo esperado y no es un error.

Revisa el dataLayer en el frame del píxel

1. Abre las DevTools de Chrome y ve a la pestaña Console.
2. En la barra de herramientas de la consola, abre el desplegable de frames (normalmente muestra top) y selecciona el frame del sandbox del píxel (su nombre empieza por web-pixel). Shopify crea un frame por cada píxel personalizado, así que elige el correcto si tienes varios.
3. Ejecuta las comprobaciones de abajo.

En el frame top, dataLayer es el dataLayer de la tienda, que no te dice nada sobre el píxel.

• ¿Están configuradas las dos líneas? window.pandectesPixelInit y window.pandectesSubscribe deberían estar ambos definidos.
• ¿Llega el consentimiento antes que las etiquetas? En dataLayer, las entradas de consentimiento deben aparecer antes de que se disparen tus etiquetas.
• ¿Se carga el píxel antes del consentimiento? Debe hacerlo para el modo Advanced. Si el contenedor solo aparece después de que el visitante acepte, el permiso del píxel está en Required y estás en modo Basic.
• ¿Llegan tus eventos? Haz un pedido de prueba y comprueba que el evento aparece en dataLayer con el nombre que espera tu disparador de GTM.

Errores habituales

Ajustes que este artículo no cubre

Ajustes como url_passthrough, ads_data_redaction, allow_enhanced_conversions y restricted_data_processing se configuran en GTM (en la etiqueta CMP de Pandectes o en tus propias etiquetas), no en el píxel.

Pandectes no puede asesorar sobre estos ajustes. Los valores correctos dependen de tus cuentas de Google Ads y Analytics, del modelado en el que confíes y de la situación legal de tu negocio. Coméntalo con quien gestione tu configuración de Google o con tu asesor legal si hay una cuestión de privacidad.

Actualizado el: 30/10/2026