docs.article_back

docs.nav_links

Pixel de conversão no Shopify

Instale o pixel de conversão do Styrar no Shopify usando um Custom Pixel.

ClaudeChatGPTCursor

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.

Em breve: configuração automática com a app Shopify da Styrar

Quando a app Shopify da Styrar estiver disponível e instalada na sua loja (e associada à sua conta Styrar), a Styrar coloca o pixel de conversão por si em Definições → Customer events. Não precisará de colar código de Custom Pixel nem de autorizar api.styrar.com manualmente.

Até lá, use os passos de Custom Pixel abaixo.

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.

Relacionado