Cómo añadir código de seguimiento de conversiones solo en la página de pago en Shopify

El seguimiento de conversiones te ayudará a comprender mejor el valor total de tu sitio web de Shopify y de cualquier campaña de marketing online que tengas en marcha. Con el seguimiento de conversiones configurado, podrás saber cuántos productos estás vendiendo y qué canal de marketing trajo al cliente a tu web. Al añadir el seguimiento de conversiones a la página de pago de tu tienda, puedes medir fácilmente con qué frecuencia tus clientes llegan al checkout y completan una compra.

Esto ayuda a entender las tendencias de compra de tu tienda Shopify. Para añadir el código de seguimiento de conversiones a la página de pago de tu tienda siguiendo los estándares más recientes de Shopify, tendrás que comprender las siguientes tareas.

Google Analytics

En primer lugar, tendrás que añadir el código de seguimiento de conversiones de Google Analytics de tu tienda usando el framework de Customer Events de Shopify. Aquí tienes una guía para configurarlo con Customer Events de Shopify y el sistema de píxeles personalizados.

Seguimiento de pedidos

Shopify ha actualizado la forma en que deben implementarse los scripts de seguimiento. La sección obsoleta de Additional Scripts y checkout.liquid ya no son compatibles. Sigue estos pasos para configurar el seguimiento de conversiones:

• Ve a Settings en tu panel de administración de Shopify
• Haz clic en Customer Events
• Haz clic en Custom pixels
• Haz clic en Add pixel para crear un nuevo píxel personalizado o editar uno existente
• Pega tu código de seguimiento en el editor de código del píxel personalizado
• Haz clic en Save y luego en Connect pixel para activarlo
• Prueba usando las herramientas de desarrollador del navegador o Shopify Pixel Helper

Importante: A partir del 28 de agosto de 2025, los scripts de checkout.liquid y Additional Scripts ya no se pueden editar. Ahora todo el seguimiento de conversiones debe usar el framework de Customer Events con píxeles personalizados o píxeles de apps. Si aún no has migrado, los métodos de seguimiento heredados han dejado de funcionar.

Añadir seguimiento de conversiones

Para añadir el seguimiento de conversiones solo a la página de agradecimiento, puedes crear un píxel personalizado que se suscriba al evento checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  /* Start Tracking Code */
  gtag('event', 'conversion', {
    'send_to': 'AW-xxxx/xxxx',
    'currency': event.data.checkout.currencyCode,
    'transaction_id': event.data.checkout.order.id,
    'value': event.data.checkout.totalPrice.amount
  });
  /* End Tracking Code */
});

Entorno de seguimiento en sandbox de seguridad

Shopify ahora ejecuta todas las personalizaciones del checkout y los píxeles en un entorno seguro aislado (sandbox). Esto mejora la seguridad, el rendimiento y la privacidad del cliente, pero también significa que tu código debe cumplir estándares estrictos. Los píxeles personalizados no pueden acceder directamente a elementos del DOM ni renderizar elementos de interfaz de usuario, pero sí pueden suscribirse a eventos de cliente estandarizados.

Seguimiento básico de conversiones

Supongamos que un tercero te ha pedido integrar un píxel de seguimiento como este:

<img src="https://www.tracking.com/u?amount=<AMOUNT>&amp;order-id=<ORDER_ID>&amp;currency=<CURRENCY>" height="1" width="1" />

Para implementarlo en un píxel personalizado, te suscribirías al evento checkout_completed y accederías a los siguientes datos:

• El precio total del pedido desde event.data.checkout.totalPrice.amount
• El ID del pedido desde event.data.checkout.order.id
• La moneda desde event.data.checkout.currencyCode

Cuando el cliente complete el checkout, tu píxel personalizado se activará con los datos correctos:

analytics.subscribe("checkout_completed", (event) => {
  const img = document.createElement('img');
  img.src = `https://www.tracking.com/pixel.gif?amount=${event.data.checkout.totalPrice.amount}&order-id=${event.data.checkout.order.id}&currency=${event.data.checkout.currencyCode}`;
  img.height = 1;
  img.width = 1;
  document.body.appendChild(img);
});

Cuando el cliente complete el checkout, el código anterior garantizará que el píxel se dispare con los datos correctos usando métodos seguros y actualizados.

Seguimiento de upsells post-compra

Si estás usando upsells post-compra con apps de Checkout Extensibility, puedes hacer seguimiento de conversiones tanto mediante el evento checkout_completed (que se dispara en la primera página de oferta de upsell) como con eventos de compra adicionales para obtener información más detallada:

analytics.subscribe("checkout_completed", (event) => {
  // Track initial purchase completion
  console.log('Purchase completed', event.data.checkout);
});

Solución de problemas

• La sección Additional Scripts ahora es solo de lectura a partir del 28 de agosto de 2025. Todo el seguimiento debe migrarse a Customer Events con píxeles personalizados o píxeles de apps.
• Usa la pestaña Network de las herramientas de desarrollador del navegador para validar que el evento checkout_completed se haya disparado y que tu código de seguimiento se haya ejecutado correctamente.
• También puedes usar Shopify Pixel Helper para probar tus píxeles personalizados y verificar que los eventos se estén registrando correctamente.
• Nota: Google Tag Manager no puede depurar Customer Events debido a la naturaleza aislada (sandbox) del entorno de checkout de Shopify. Evita depender del modo de vista previa de GTM; en su lugar, inspecciona manualmente los registros de red usando la consola de desarrollador del navegador.
• Si estás migrando desde métodos de seguimiento antiguos, asegúrate de desconectar los píxeles heredados para evitar el seguimiento duplicado de conversiones.