Los Shopify Web Pixels son la solución de Shopify para rastrear datos de compras como las tasas de conversión. Hay dos formas principales en las que interactuarás con ellos:

App Web Pixels
Custom Web Pixels

App Web Pixels

Algunos píxeles de apps (p. ej., Omega Facebook Pixel) se integran directamente con los Shopify Web Pixels. Estas apps no requieren configuración adicional para funcionar con Aftersell.

Custom Web Pixels

Los píxeles personalizados permiten soluciones a medida si no se puede encontrar un píxel de app en el marketplace de Shopify que satisfaga tus necesidades. A continuación se detalla cómo convertir los scripts de seguimiento existentes de la página de estado del pedido para usar píxeles personalizados. Ten en cuenta los riesgos potenciales de los píxeles personalizados antes de continuar. Si usas específicamente Google Tag Manager, Shopify proporciona documentación útil para completar esta migración. Hay 3 pasos principales para crear un píxel personalizado para el seguimiento de conversiones.

Preparar el SDK de JavaScript de terceros
Configurar el seguimiento de conversiones usando web pixels
Conectar tu píxel personalizado

1. Preparar el SDK de JavaScript de terceros

Querrás eliminar cualquier HTML presente en el código de píxel proporcionado. Cualquier JavaScript que se cargue a través de una etiqueta HTML <script> debe cargarse en su lugar mediante un enfoque de solo JavaScript. Este proceso se cubre con más detalle aquí. Un ejemplo usando Google Tag Manager Código de píxel original:

<!-- Global site tag (gtag.js) - Google Analytics -->  
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>  
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', ''YOUR_PIXEL_ID'');  
</script>

Después de eliminar el HTML y reelaborar las etiquetas <script>:

const script = document.createElement('script');  
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');  
script.setAttribute('async', '');  
document.head.appendChild(script);  
  
window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  
gtag('js', new Date());  
gtag('config', 'YOUR_PIXEL_ID');

Ten en cuenta que el SDK del píxel de Google no transmite automáticamente datos desde un píxel personalizado de Shopify. Para transmitir datos, necesitas suscribirte a eventos.

2. Configurar el seguimiento de conversiones usando web pixels

Para rastrear conversiones usando píxeles personalizados, suscríbete al evento checkout_completed proporcionado por Shopify. Este evento se dispara en la página post-compra, si se le muestra una a tu cliente, o en la página de agradecimiento si no. Este evento se dispara solo una vez en cualquiera de los dos casos, así que no se requiere lógica adicional para evitar contar una compra dos veces.

analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});

Usa esta referencia para ver qué puntos de datos puedes recuperar del event. Evento checkout_completed de Shopify Un ejemplo de un píxel de Meta personalizado Código de seguimiento que se activa cuando se completa un checkout:

!function(f,b,e,v,n,t,s)  
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?  
n.callMethod.apply(n,arguments):n.queue.push(arguments)};  
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';  
n.queue=[];t=b.createElement(e);t.async=!0;  
t.src=v;s=b.getElementsByTagName(e)[0];  
s.parentNode.insertBefore(t,s)}(window, document,'script',  
'https://connect.facebook.net/en_US/fbevents.js');  
  
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party  
fbq('init', YOUR_PIXEL_ID);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});

3. Conectar tu píxel personalizado

Antes de agregar un píxel personalizado, elimina o modifica cualquier píxel existente para asegurarte de que los eventos de clientes no se cuenten dos veces. El código de píxel existente debe eliminarse manualmente de cualquier lugar donde exista, como theme.liquid, checkout.liquid (solo comerciantes de Plus) y los Additional scripts en los ajustes de tu checkout. Una vez hecho eso, sigue estos pasos para conectar un píxel personalizado a tu tienda.

Navega a Settings > Customer Events > Custom Pixels > Add Custom Pixel
1. Ingresa un nombre para tu píxel personalizado.
Pega el código de tu píxel personalizado en la sección “Code”.
Asegúrate de que los ajustes de privacidad del cliente estén configurados correctamente.
Haz clic en “Save” en tu píxel personalizado.
¡Haz clic en “Connect” para poner tu píxel personalizado en vivo!

Getting Started

Home Page

Best Practices

Post-Purchase Upsells

Checkout Upsells (Shopify Plus)

Thank You Page

Product Page Upsells

Rokt Thanks

Strategies

Analytics & Tracking

Integrations

Billing & Account

Troubleshooting

Configurar los web pixels de Shopify

App Web Pixels

Custom Web Pixels

1. Preparar el SDK de JavaScript de terceros

2. Configurar el seguimiento de conversiones usando web pixels

3. Conectar tu píxel personalizado

​App Web Pixels

​Custom Web Pixels

​1. Preparar el SDK de JavaScript de terceros

​2. Configurar el seguimiento de conversiones usando web pixels

​3. Conectar tu píxel personalizado

App Web Pixels

Custom Web Pixels

1. Preparar el SDK de JavaScript de terceros

2. Configurar el seguimiento de conversiones usando web pixels

3. Conectar tu píxel personalizado