Píxel de conversión en Shopify

Shopify ya no permite pegar una etiqueta <script> sin procesar en el checkout: el seguimiento de terceros pasa por Custom Pixels, un entorno aislado construido sobre la Customer Events API de Shopify. Esta guía muestra cómo conectar el píxel de conversión de Styrar a un custom pixel.

El entorno aislado no te da acceso directo al DOM, así que en lugar de incrustar la etiqueta de script de Styrar, llamas al endpoint de seguimiento directamente con fetch cada vez que se dispara un evento de cliente de Shopify.

Configuración

1. En tu administrador de Shopify, ve a Configuración → Eventos de clientes → Añadir custom pixel.

2. Asígnale un nombre (por ejemplo, "Conversiones Styrar") y añade un código como este:

   JavaScript

   analytics.subscribe('checkout_completed', (event) => {
     const url = new URL(window.location.href);
     const clickToken = url.searchParams.get('styrar_ck') ||
       (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
     if (!clickToken) return;
   
     fetch('https://api.styrar.com/v1/pixel/track', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         clickToken,
         eventName: 'purchase',
         value: event.data.checkout.totalPrice.amount,
         eventData: { currency: event.data.checkout.totalPrice.currencyCode },
       }),
       keepalive: true,
     });
   });
   

   Suscríbete al evento que corresponda a la conversión que te interesa: checkout_completed, payment_info_submitted, product_added_to_cart, y otros están disponibles.

3. Permite el acceso a la red. Shopify bloquea por defecto las solicitudes salientes desde los custom pixels. En la configuración del mismo píxel, añade api.styrar.com en Permisos → Conectar con servidores de terceros, o la solicitud anterior fallará silenciosamente.

4. Pon el píxel en estado Activo.

Nota sobre el token de clic

El entorno aislado del píxel de Shopify no puede leer localStorage como lo haría una página normal, así que styrar_ck debe seguir presente en la URL (o transportarse como un atributo del carrito) para el momento en que se dispare tu evento. Si tu flujo de checkout elimina el parámetro de consulta antes de checkout_completed, captura el token antes, en page_viewed, y guárdalo como un atributo del carrito para poder leerlo más tarde.

Esto sigue usando exactamente el mismo endpoint público y sin autenticación POST /v1/pixel/track que cualquier otra plataforma: no hay ninguna app específica de Shopify que instalar del lado de Styrar.

Relacionado

• Píxel de conversión — referencia completa