Que es un Web Pixel de Shopify? API moderna de scripts de seguimiento explicada

Un Web Pixel es la API oficial de Shopify para ejecutar scripts de seguimiento y analitica en las paginas de tu tienda y checkout. Introducido como parte de la plataforma Checkout Extensibility de Shopify, los Web Pixels reemplazaron el enfoque heredado de inyectar scripts directamente en checkout.liquid o el campo de "Scripts adicionales" que Shopify elimino para tiendas en Checkout Extensibility. La diferencia arquitectonica clave es que los Web Pixels se ejecutan dentro de un iframe aislado, lo que significa que no pueden acceder al DOM de la pagina principal, cookies o almacenamiento local directamente.

Hay dos tipos de Web Pixels. Los App Pixels son gestionados por aplicaciones de Shopify: cuando instalas una aplicacion de seguimiento como ScaleUp, registra un App Pixel que Shopify carga automaticamente en todas las paginas incluyendo el checkout. Los Custom Pixels son fragmentos de JavaScript que escribes y configuras manualmente a traves del administrador de Shopify en Configuracion > Eventos de clientes. Ambos tipos reciben los mismos eventos estandarizados de comercio electronico de Shopify (page_viewed, product_viewed, checkout_started, payment_info_submitted, checkout_completed y otros) a traves de la API Web Pixel de Shopify.

El cambio a Web Pixels representa un cambio fundamental en como Shopify maneja el seguimiento de terceros. En lugar de dar a los scripts acceso completo a la pagina, lo que creaba riesgos de seguridad, preocupaciones de privacidad y problemas de rendimiento, Shopify ahora actua como intermediario. Tus scripts de seguimiento reciben datos de eventos estructurados de Shopify en lugar de extraerlos de la pagina. Esto es mas confiable (no mas selectores rotos cuando se actualizan los temas), mas privado (los scripts solo obtienen los datos que Shopify elige exponer) y mas seguro (los scripts aislados no pueden modificar la experiencia de checkout).

Los Web Pixels son importantes porque ahora son la unica forma de ejecutar scripts de seguimiento en las paginas de checkout de Shopify para tiendas en Checkout Extensibility. Shopify depreco checkout.liquid en agosto de 2024 y requirio que todas las tiendas Shopify Plus migraran a Checkout Extensibility a principios de 2025. Las tiendas Shopify estandar fueron transicionadas automaticamente. Si tu seguimiento de Google Ads dependia de scripts en checkout.liquid o el campo de Scripts adicionales, esos scripts dejaron de funcionar despues de la migracion. Los Web Pixels son el reemplazo requerido.

Para el seguimiento de Google Ads especificamente, la transicion a Web Pixels afecta como se capturan los datos de conversion. El enfoque antiguo de colocar un fragmento de gtag.js en tu pagina de checkout y leer datos del pedido del dataLayer ya no funciona. En su lugar, tu codigo de seguimiento (ya sea a traves de una aplicacion o un pixel personalizado) debe escuchar el evento estandarizado checkout_completed de Shopify y extraer los datos de conversion del payload del evento. Esto incluye el total del pedido, ID de transaccion, moneda y detalles de articulos de linea. La estructura del evento esta definida por Shopify, no por tu tema o codigo personalizado, lo que la hace mas consistente pero tambien significa que debes adaptarte al formato de datos de Shopify.

El modelo de sandbox tambien impacta el seguimiento basado en cookies. Debido a que los Web Pixels se ejecutan en un iframe, no pueden acceder directamente a las cookies de primera parte establecidas en tu dominio principal. Esto significa que la atribucion tradicional basada en cookies (leer la cookie _gcl_aw para obtener el GCLID) no funciona dentro de un Web Pixel. Las aplicaciones de seguimiento deben usar metodos alternativos, como pasar datos de atribucion a traves del payload de eventos de Shopify, usar enfoques del lado del servidor o aprovechar Enhanced Conversions, para mantener una atribucion precisa de Google Ads. Este es un cambio tecnico significativo que sorprende a muchos comerciantes durante la migracion.

Cuando una pagina se carga en tu tienda Shopify, la plataforma de Shopify verifica que Web Pixels estan registrados para tu tienda. Cada pixel se carga dentro de su propio iframe aislado, un contexto de navegador completamente aislado que no comparte cookies, almacenamiento local ni acceso al DOM con la pagina principal. Shopify luego envia eventos estandarizados de comercio electronico a cada iframe de pixel a traves de una API de mensajeria. Por ejemplo, cuando un cliente ve un producto, Shopify activa un evento product_viewed que contiene el titulo del producto, precio, ID de variante y otros datos estructurados. Tu codigo de pixel recibe este evento y lo procesa como necesites, tipicamente enviandolo a Google Ads, GA4 u otra plataforma de analitica.

El flujo de eventos continua a traves de todo el recorrido del cliente. A medida que un cliente agrega articulos al carrito, comienza el checkout, ingresa informacion de pago y completa la compra, Shopify activa eventos correspondientes (collection_viewed, product_added_to_cart, checkout_started, payment_info_submitted, checkout_completed) en cada pixel registrado. El evento checkout_completed contiene los detalles completos del pedido: ID de transaccion, subtotal, impuestos, envio, codigos de descuento aplicados, articulos de linea con cantidades y precios, y el correo del cliente (si se otorga el consentimiento). Estos datos son lo que tu codigo de pixel usa para enviar eventos de conversion a Google Ads.

Para los App Pixels especificamente, el desarrollador de la aplicacion (como ScaleUp) escribe el codigo del pixel y lo registra a traves de la API de Partners de Shopify. Cuando un comerciante instala la aplicacion y habilita el seguimiento, Shopify comienza a cargar ese pixel en cada pagina. La aplicacion tambien puede configurar que eventos de clientes quiere recibir y puede almacenar datos de configuracion que se pasan al pixel en el momento de carga. Los Custom Pixels funcionan de manera similar, pero el comerciante escribe el JavaScript directamente en el administrador de Shopify. Ambos tipos tienen acceso al mismo flujo de eventos y las mismas restricciones de sandbox.

El problema mas significativo que enfrentan los comerciantes con Web Pixels es la perdida de datos de atribucion basados en cookies. Debido a que los pixels se ejecutan en un iframe aislado, no pueden leer cookies de primera parte como _gcl_aw (GCLID) o _ga (ID de cliente de GA4) que fueron establecidas en el dominio principal. Si tu seguimiento depende de leer estas cookies en el momento de la conversion, se rompera dentro de un Web Pixel. Esta es la razon principal por la que muchas tiendas Shopify ven una caida en conversiones atribuidas despues de migrar a Checkout Extensibility: la conversion se activa, pero el vinculo de atribucion al clic original del anuncio se pierde.

Otro problema comun es la incompletitud de datos de eventos en Custom Pixels. Aunque los eventos estandarizados de Shopify proporcionan datos estructurados, ciertos campos pueden estar vacios dependiendo de la configuracion de tu tienda, las opciones de consentimiento del cliente y el flujo de checkout especifico. Por ejemplo, el correo del cliente en checkout_completed puede estar redactado si el cliente no ha consentido al marketing. Los datos de articulos de linea pueden usar IDs de variante que no coinciden con los IDs de producto que tienes en tu feed de Google Merchant Center. Estas discrepancias requieren un mapeo de datos cuidadoso en tu codigo de pixel.

Los Web Pixels son parte de la infraestructura de seguimiento mas amplia de Shopify. Comprender estos conceptos relacionados te ayuda a navegar la transicion al seguimiento moderno de Shopify de manera efectiva.