> ## 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.

# Configurando web pixels do Shopify

> Configurando o rastreamento de conversões usando Web Pixels com upsells pós-compra

Os [Shopify Web Pixels](https://help.shopify.com/en/manual/promoting-marketing/pixels) são a solução do Shopify para rastrear dados de compras, como taxas de conversão. Existem duas formas principais de interagir com eles:

* App Web Pixels
* Custom Web Pixels

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

Alguns pixels de apps (por exemplo, Omega Facebook Pixel) se integram diretamente aos Shopify Web Pixels. Esses apps não exigem nenhuma configuração adicional para funcionar com a Aftersell.

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

Os pixels personalizados permitem soluções sob medida caso nenhum pixel de app disponível no marketplace do Shopify atenda às suas necessidades. A seguir, detalhamos como converter scripts de rastreamento existentes da página de status do pedido para usar pixels personalizados. Observe os [riscos potenciais dos pixels personalizados](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks) antes de prosseguir.

Se você usa especificamente o Google Tag Manager, o Shopify fornece [documentação útil para concluir essa migração](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial).

Há 3 etapas principais para criar um pixel personalizado para rastreamento de conversões.

1. Preparar o SDK JavaScript de terceiros
2. Configurar o rastreamento de conversões usando web pixels
3. Conectar seu pixel personalizado

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. Preparando o SDK JavaScript de terceiros
</div>

Você vai querer remover qualquer HTML presente no código do pixel fornecido. Qualquer JavaScript carregado por meio de uma tag HTML `<script>` deve, em vez disso, ser carregado usando uma abordagem apenas com JavaScript.

Esse processo é abordado em mais detalhes [aqui](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk).

Um exemplo usando o Google Tag Manager

*Código do pixel 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>
```

*Após remover o HTML e retrabalhar as tags `<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');
```

Observe que o SDK de pixel do Google não transmite dados automaticamente a partir de um pixel personalizado do Shopify. Para transmitir dados, você precisa se inscrever nos eventos.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Configurando o rastreamento de conversões usando web pixels
</div>

Para rastrear conversões usando pixels personalizados, inscreva-se no evento `checkout_completed` fornecido pelo Shopify. Esse evento é disparado na página pós-compra, se ela for exibida ao seu cliente, ou na página de agradecimento, caso contrário. Esse evento é disparado apenas uma vez em qualquer um dos casos, então nenhuma lógica extra é necessária para evitar a contagem dupla de uma compra.

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

Use esta referência para ver quais pontos de dados você pode obter do `event`.

[Evento checkout\_completed do Shopify](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

Um exemplo de pixel personalizado da Meta

*Código de rastreamento disparado quando um checkout é concluído:*

```
!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. Conectando seu pixel personalizado
</div>

Antes de adicionar um pixel personalizado, remova ou modifique quaisquer pixels existentes para garantir que os eventos de clientes não sejam contados duas vezes. O código de pixel existente deve ser removido manualmente de qualquer lugar em que exista, como `theme.liquid`, `checkout.liquid` (apenas lojistas Plus) e os Additional scripts nas configurações do seu checkout.

Feito isso, siga estas etapas para conectar um pixel personalizado à sua loja.

1. Acesse Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. Digite um nome para o seu pixel personalizado.
2. Cole o código do seu pixel personalizado na seção "Code".
3. Garanta que as configurações de privacidade do cliente estejam devidamente configuradas.
4. Clique em "Save" no seu pixel personalizado.
5. Clique em "Connect" para ativar seu pixel personalizado!