- En Shopify, el server-side tracking envía cada compra a partir del pedido pagado que Shopify comunica por webhook, así que no depende de que se cargue la página de agradecimiento.
- El id de visitante y los click ids de los anuncios se guardan como atributos del carrito, de modo que Shopify los copia en el pedido y el pedido puede vincularse con el clic.
- Los eventos del navegador y del servidor comparten un único id de evento construido a partir del id del pedido, así que Meta, TikTok, Snapchat, Pinterest y Reddit cuentan cada compra una sola vez.
- Con Respect visitor consent activado, un visitante que rechaza las cookies de marketing no recibe id de visitante y sus eventos del navegador no se envían a las plataformas publicitarias, pero el pedido pagado sí se envía con los datos del cliente con hash a partir del pedido.
- La configuración en ROASaurus tiene cuatro pasos principales: instalar la app, activar la incrustación de la app en el tema, añadir el píxel de checkout y conectar tus plataformas publicitarias.
El server-side tracking en Shopify significa que cada compra llega a Meta, TikTok y otras plataformas publicitarias a partir de los datos de pedido de tu tienda, enviados por un servidor, y no solo desde un píxel en el navegador del comprador. Shopify comunica cada pedido pagado a la app de tracking por webhook, y la app lo envía a la API de conversiones de cada plataforma, vinculado con el clic en el anuncio que trajo al comprador.
Esta guía cubre las piezas de Shopify de ese flujo: la incrustación de la app en el tema y el proxy de la app, los píxeles en el checkout, el webhook orders/paid, la vinculación de pedidos, la deduplicación, el consentimiento y la configuración en ROASaurus. Para la idea general, lee antes qué es el server-side tracking.
Cómo funciona el server-side tracking en Shopify
El clic y la compra ocurren en momentos distintos y en lugares distintos. El clic solo es visible en el navegador, en la página de llegada. El pedido pagado solo es seguro en el lado de Shopify, cuando se captura el pago. El server-side tracking registra el primero, espera al segundo y los une.
Las piezas de Shopify: incrustación de la app, proxy de la app, píxeles y webhooks
Una tienda Shopify da a una app de tracking cuatro lugares donde trabajar. Cada uno tiene una función distinta, y una configuración completa usa los cuatro.
| Pieza | Dónde se ejecuta | Qué hace |
|---|---|---|
| Incrustación de la app en el tema | Cada página de la tienda | Carga el script de tracking, lee los click ids de los anuncios y guarda el id de visitante en el carrito |
| Proxy de la app | Una ruta en el dominio de tu propia tienda | Recibe los eventos de la tienda como solicitudes first-party |
| Eventos de cliente (píxeles) | Checkout y página de agradecimiento | Informan de los pasos del checkout y del checkout completado desde un sandbox |
| Webhooks de pedido | Los servidores de Shopify | Envían el pedido a la app cuando se crea y cuando se paga |
La incrustación de la app en el tema y el proxy de la app
Una incrustación de la app en el tema es un bloque que una app añade a tu tema. La activas en el editor de temas, así que no hay código que pegar. La incrustación de ROASaurus carga un script en cada página. En la página de llegada lee click ids como fbclid, ttclid y gclid y los parámetros UTM, y los guarda junto con un id de visitante first-party.
El script envía sus eventos a través del proxy de la app de Shopify. Un proxy de la app reenvía las solicitudes de una ruta de tu propio dominio, como yourstore.com/apps/roasaurus, al servidor de la app. Para el navegador, es una solicitud a tu propio sitio, lo que puede ayudar frente a los bloqueadores de anuncios que bloquean dominios de tracking conocidos. Shopify elimina la cabecera Cookie de las solicitudes del proxy de la app y la cabecera Set-Cookie de las respuestas, así que el id de visitante viaja dentro del propio evento, no en una cookie.
Eventos de cliente y píxeles en el checkout
En el checkout de Shopify, los scripts de tracking se ejecutan como píxeles en un sandbox, no en la propia página. Los gestionas en Settings › Customer events. Hay dos tipos. Los píxeles de app vienen con una app y se ejecutan en un sandbox estricto. Los píxeles personalizados los añade el comerciante y se ejecutan en un sandbox menos estricto, que puede cargar scripts de terceros como el píxel de Meta.
ROASaurus usa ambos. Su píxel de app se activa al instalar la app. Informa a ROASaurus del inicio del checkout, del paso de contacto y del checkout completado. El píxel personalizado opcional añade al checkout los píxeles del navegador de Meta, TikTok, Snapchat, Pinterest y Reddit, y envía las conversiones de Google Ads.
Webhooks de pedido
Un webhook es un mensaje que Shopify envía a una app cuando ocurre algo en la tienda. ROASaurus se suscribe, entre otros, a orders/paid y orders/create. El pedido del webhook contiene el id del pedido, el valor, las líneas de pedido, los datos del cliente, los tokens de carrito y de checkout, los atributos del carrito, y la dirección IP y el navegador desde los que se hizo el pedido. Llega desde los servidores de Shopify, así que un bloqueador de anuncios o una pestaña cerrada no pueden detenerlo.
Cómo se vinculan los pedidos con los clics en anuncios
El webhook le dice a ROASaurus que un pedido se ha pagado. Para enviar una conversión útil, ROASaurus también necesita saber qué visitante hizo el pedido, porque el registro del visitante contiene los click ids. Prueba estos vínculos en orden, del más directo al menos directo:
| Método | Cómo funciona | Cuándo se usa |
|---|---|---|
| Atributo del carrito | El script escribe el id de visitante y los valores fbc, fbp, ttp, gclid y ttclid como atributos del carrito. Shopify los copia en el pedido. | Primera opción |
| Tokens de carrito y de checkout | El script vincula el token del carrito con el visitante, y el píxel de checkout vincula el token del checkout. El webhook lleva ambos tokens. | Cuando falta el atributo del carrito |
| Evento de checkout | El píxel de checkout informa del checkout completado con el id del pedido y el id del visitante. | Cuando ningún token coincide |
| Dirección de email | El email con hash de un visitante que lo introdujo antes, por ejemplo en el paso de contacto del checkout. | Cuando no hay evento de checkout |
| Dirección IP y navegador | Un visitante visto con la misma dirección IP y el mismo navegador poco antes del pedido. | Solo cuando encaja exactamente un visitante |
Los atributos del carrito son la razón por la que la vinculación es directa en Shopify. Son pares clave-valor guardados en el carrito, y Shopify los copia en el pedido. Un valor escrito en la página de producto sigue ahí cuando llega el webhook, incluso si el comprador cerró antes de tiempo la página de agradecimiento.
Una excepción: los botones de pago acelerado como Buy it now se saltan el carrito. ROASaurus aconseja desactivarlos, para que Add to cart se registre siempre. Los pedidos hechos con ellos aún pueden vincularse mediante el token del checkout.
Un pedido, de principio a fin
Esto es lo que ocurre con un solo pedido de un anuncio de Meta, con el píxel personalizado instalado:
page_view ?fbclid=IwAR2x…Un comprador llega desde un anuncio de Meta. El click id se guarda con el visitante 3f2a.cart _tl=3f2a _tl_fbc=fb.1.…El id de visitante y el valor de clic de Meta se guardan como atributos del carrito.checkout_started ic-c1a9…El token del checkout se vincula con el mismo visitante.checkout_completed order-6123456789012El píxel de checkout informa del pedido, y el píxel de Meta envía Purchase con este id de evento.orders/paid #1042 id 6123456789012 $86.00Shopify envía el pedido pagado por webhook.Meta CAPI Purchase order-6123456789012Tras una breve espera, el evento del servidor sale con los click ids, la dirección IP y el user agent.Cuándo se envía la compra: orders/paid u orders/create
El webhook que dispara la compra depende de cómo pagan tus clientes. Lo eliges como el tipo de checkout en Store settings.
| Tipo de checkout | Webhook | Cuándo se envía la compra |
|---|---|---|
| Shopify checkout | orders/paid | Cuando se paga el pedido. Los pedidos que nunca se pagan no se envían. |
| External / COD checkout | orders/create | Cuando se crea el pedido. Para el pago contra reembolso, y para checkouts como Checkify y CheckoutChamp que crean pedidos de Shopify. |
ROASaurus retiene cada compra durante un breve tiempo después de que llegue el webhook. En ese tiempo, normalmente llega también el evento de checkout completado del navegador. Entonces su URL de página, su dirección IP y su user agent se añaden al evento del servidor, junto a los click ids del registro del visitante. Los pedidos que Shopify marca como pedidos de prueba se registran, pero no se envían a las plataformas publicitarias.
Cómo funciona la deduplicación con los píxeles del navegador
Cuando los píxeles del navegador funcionan junto a los eventos del servidor, la plataforma recibe cada compra dos veces y debe quedarse solo con una. Lo hace mediante el id de evento. ROASaurus da a ambas copias de una compra el mismo id, construido a partir del id de pedido de Shopify: order-6123456789012 para el pedido con id 6123456789012. Es el número largo de la URL del pedido en el Shopify admin, no el nombre del pedido como #1042. El píxel de checkout lo usa para el Purchase del navegador, y el servidor lo usa para el evento de la API de conversiones. Meta, por ejemplo, se queda con una copia cuando el nombre del evento y el id del evento coinciden y ambas llegan en un plazo de 48 horas.
| Plataforma | Píxel del navegador de ROASaurus | Deduplicado con el evento del servidor |
|---|---|---|
| Meta, TikTok, Snapchat, Pinterest, Reddit | Tienda y checkout | Sí |
| X, Microsoft Advertising, Taboola | Ninguno, solo eventos del servidor | Nada que fusionar |
| Google Ads | Solo checkout, mediante el píxel personalizado | Se envía una vez, desde el checkout |
El id de evento solo funciona entre eventos que lo llevan. Si otra app envía el mismo píxel, sus eventos tienen sus propios ids, y la plataforma cuenta el pedido de nuevo. En Shopify, las causas habituales son el canal de Facebook & Instagram conectado al mismo píxel, la app de TikTok y el código del píxel pegado en theme.liquid. Nuestra guía sobre eventos de compra duplicados muestra cómo encontrarlos, y Evitar el doble conteo enumera las soluciones.
Consentimiento a través de la Customer Privacy API de Shopify
La Customer Privacy API de Shopify guarda la elección de cookies de cada visitante. Tu banner de cookies la rellena, tanto si usas el banner propio de Shopify como una app de consentimiento conectada a la API. Los scripts y los píxeles pueden entonces preguntarle si el marketing está permitido para ese visitante.
Con Respect visitor consent activado, que es el valor por defecto en Store settings, el script de la tienda de ROASaurus y los píxeles de checkout consultan la API antes de hacer tracking.
- Se guardan un id de visitante, click ids y eventos de navegación
- Los píxeles del navegador se cargan y envían eventos
- El pedido pagado se envía desde el servidor y se vincula con el clic en el anuncio
- No se asigna id de visitante, así que sus visitas y sus clics en anuncios no se vinculan con él
- Los eventos del navegador se conservan sin id de visitante, dirección IP ni datos del navegador, y no se envían a las plataformas publicitarias
- El pedido pagado se sigue enviando desde el servidor con datos del cliente con hash a partir del pedido, y con la dirección IP y el user agent del pedido
- El evento que llega a la plataforma publicitaria no lleva click id
A los emails, teléfonos, nombres y direcciones se les aplica un hash SHA-256 antes de enviarlos a una plataforma publicitaria. Hay tres detalles más que importan:
- Tu banner decide. ROASaurus sigue lo que indica la API. Si la API no está disponible en la página, ROASaurus trata al visitante como si hubiera dado su consentimiento, así que comprueba que tu banner esté conectado a ella.
- La página de llegada se queda en el pedido. Shopify guarda la dirección de la página de llegada con cada pedido, y puede contener etiquetas de campaña y click ids. ROASaurus la usa en sus propios informes de atribución, también para los visitantes que rechazaron, y no la envía a las plataformas publicitarias.
- Enviar el pedido es una decisión legal. Si puede enviarse o no el pedido pagado de un visitante que rechazó es una cuestión legal para tu tienda.
Nuestra guía sobre Consent Mode v2 y RGPD explica las reglas a grandes rasgos, y Consentimiento y privacidad tiene los detalles.
Cómo configurar el server-side tracking en Shopify con ROASaurus
Haz los pasos de configuración en este orden:
- Instala la app
Ve a Add a store, elige Shopify, introduce tu dominio
.myshopify.comy haz clic en Install app. Aprueba la app en Shopify. ROASaurus registra los webhooks de pedido y activa su píxel de app. - Activa la incrustación de la app en el tema
En la página Tracking & platforms, haz clic en Open theme editor, activa la incrustación de la app de ROASaurus y guarda.
- Añade el píxel del checkout
En el Shopify admin, ve a Settings › Customer events y añade un píxel personalizado llamado ROASaurus. Establece su permiso en Not required, porque el script de ROASaurus comprueba por sí mismo la elección de marketing del visitante. Pega el fragmento de Tracking & platforms. Necesitas este píxel para los píxeles del navegador en el checkout y para Google Ads.
- Conecta tus plataformas publicitarias
En Tracking & platforms, haz clic en Add pixel para cada plataforma, o en Connect with Facebook para Meta. Deja activada la opción de cargar también el píxel del navegador si quieres eventos del navegador deduplicados.
- Revisa los ajustes de la tienda
En Store settings, elige tu tipo de checkout y deja Respect visitor consent activado si vendes donde se exige consentimiento.
- Elimina otros emisores
En el canal de Facebook & Instagram, quita este píxel de los ajustes de uso compartido de datos. Bajar el nivel de uso compartido de datos no basta, porque todos los niveles, incluido Standard, envían el píxel de Meta desde el navegador. Si la app de TikTok envía el mismo píxel, detenlo también allí, y quita el código del píxel de tu tema.
El fragmento del píxel personalizado tiene este aspecto. Cópialo de Tracking & platforms, donde tu clave de tienda ya está rellenada. La guía de configuración de Shopify tiene los mismos pasos.
self.tl = this; document.head.appendChild(document.createElement('script')).src = 'https://app.roasaurus.com/c.js?k=YOUR_STORE_KEY';Cómo comprobar que funciona
Prueba con un pedido real antes de fiarte de las cifras:
- Abre tu tienda con
?roasaurus=connectedal final de la URL. Un mensaje confirma que el script está activo. - Para Meta, pega el código de Events Manager › Test events en el campo Test event code del píxel.
- Haz un pedido real de bajo precio y reembólsalo después. Los pedidos de prueba de Shopify no se envían.
- En el Event log, el envío del servidor del pedido aparece como sent para cada plataforma, con la respuesta de la plataforma.
- En la vista de pruebas de la plataforma, comprueba que el Purchase del navegador y el del servidor comparten el id de evento
order-más el id de pedido de Shopify. - Quita después el código del evento de prueba.
Lo que el server-side tracking en Shopify no soluciona
- Consentimiento rechazado. Los pedidos de visitantes que rechazaron las cookies de marketing se envían, pero sin click id, así que las plataformas publicitarias los vinculan peor.
- Los límites de cookies de Safari. Un comprador que vuelve después de más de 7 días puede parecer un visitante nuevo. Un subdominio de tracking first-party mantiene la recogida en tu dominio, pero Safari aún puede limitar esas cookies a 7 días.
- Diferencias de atribución. Cada plataforma publicitaria sigue atribuyendo el mérito de las ventas con sus propias ventanas y modelos. Para comparar canales con un único conjunto de reglas, usa tu propia atribución.
- Otras apps con el mismo píxel. Los ids de evento solo fusionan los eventos que los comparten.
Lo que sí soluciona es la compra que ocurrió pero nunca llegó a la plataforma publicitaria porque se perdió el evento del navegador. Para saber qué envía ROASaurus a cada plataforma, consulta server-side tracking y la integración con Shopify.
Fuentes
- Shopify: Customer Privacy API
- Shopify: Authenticate app proxies
- Shopify Help Center: Manage your custom pixels
- Shopify Help Center: Facebook data sharing
- Meta: Handling Duplicate Pixel and Conversions API Events
En ROASaurus
- Ayuda: configurar ROASaurus en Shopify
- Integración con Shopify
- Server-side tracking en ROASaurus
- Ayuda: consentimiento y privacidad