> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurar los web pixels de Shopify

> Configuración del seguimiento de conversiones usando Web Pixels con upsells post-compra

Los [Shopify Web Pixels](https://help.shopify.com/en/manual/promoting-marketing/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

<div id="app-web-pixels">
  # App Web Pixels
</div>

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.

<div id="custom-web-pixels">
  # Custom Web Pixels
</div>

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](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks) antes de continuar.

Si usas específicamente Google Tag Manager, Shopify proporciona [documentación útil para completar esta migración](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial).

Hay 3 pasos principales para crear un píxel personalizado para el seguimiento de conversiones.

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

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. Preparar el SDK de JavaScript de terceros
</div>

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í](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk).

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.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Configurar el seguimiento de conversiones usando web pixels
</div>

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](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

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,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. Conectar tu píxel personalizado
</div>

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.

1. Navega a Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. Ingresa un nombre para tu píxel personalizado.
2. Pega el código de tu píxel personalizado en la sección "Code".
3. Asegúrate de que los ajustes de privacidad del cliente estén configurados correctamente.
4. Haz clic en "Save" en tu píxel personalizado.
5. ¡Haz clic en "Connect" para poner tu píxel personalizado en vivo!