Pixel de conversão no Shopify

O Shopify já não permite colar uma tag <script> em bruto no checkout — o rastreio de terceiros passa pelos Custom Pixels, um ambiente isolado (sandbox) construído sobre a Customer Events API do Shopify. Este guia mostra como ligar o pixel de conversão do Styrar a um pixel personalizado.

A sandbox não dá acesso direto ao DOM, por isso, em vez de incorporar a tag de script do Styrar, chama-se o endpoint de rastreio diretamente com fetch sempre que um evento de cliente do Shopify ocorre.

Configuração

1. No seu admin do Shopify, vá a Definições → Eventos de cliente → Adicionar pixel personalizado.

2. Dê-lhe um nome (por exemplo, "Conversões Styrar") e adicione 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,
     });
   });
   

   Subscreva o evento que corresponder à conversão que lhe interessa — checkout_completed, payment_info_submitted, product_added_to_cart, entre outros, estão todos disponíveis.

3. Permita o acesso à rede. O Shopify bloqueia, por predefinição, requisições de saída a partir de pixels personalizados. Nas definições desse mesmo pixel, adicione api.styrar.com em Permissões → Ligar a servidores de terceiros, ou a requisição acima falhará silenciosamente.

4. Defina o pixel como Ativo.

Uma nota sobre o token de clique

A sandbox de pixels do Shopify não consegue ler o localStorage da mesma forma que uma página normal, por isso o styrar_ck precisa de continuar presente no URL (ou ser transportado como um atributo de carrinho) no momento em que o seu evento dispara. Se o seu fluxo de checkout remover o parâmetro de query antes do checkout_completed, capture o token mais cedo — no page_viewed — e guarde-o como um atributo de carrinho para o poder ler mais tarde.

Isto continua a usar exatamente o mesmo endpoint público e não autenticado POST /v1/pixel/track que qualquer outra plataforma — não existe nenhuma app específica do Shopify para instalar do lado do Styrar.

Relacionado

• Pixel de conversão — referência completa