Criar código de pixel personalizado

Esta página foi impressa em Mar 22, 2023. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/promoting-marketing/pixels/custom-pixels/code.

Esta página inclui instruções para criar um código personalizado para um pixel de terceiros que permitirá a você acompanhar eventos específicos do cliente. Depois da criação do código, adicione o pixel personalizado à loja da Shopify.

Preparar-se para criar um pixel personalizado

Antes de criar um pixel personalizado, leia as informações a seguir para entender melhor como funciona a configuração do recurso:

Com um pixel personalizado, você especifica informações como as seguintes:

  • Pixel JavaScript de terceiros
  • Eventos de comportamento que você quer acompanhar

Criar o código para um pixel personalizado

As etapas para criar o código de um pixel personalizado são:

  1. Prepare o SDK Javascript de terceiros.
  2. Configurar o pixel para acompanhar eventos do cliente

Preparar o SDK Javascript de terceiros

O serviço de terceiros com que você trabalha oferece o código integrado ao pixel, que costuma ter dois componentes: um SDK Javascript e o código de rastreamento. Todo HTML no código do serviço de terceiros precisa ser removido, pois a sandbox de pixels da Shopify só aceita JavaScript.

Este é um exemplo de pixel da Meta. Vale lembrar que os pixels diferem ligeiramente de um terceiro para outro.

​​<!-- Meta Pixel Code -->
​​<script>
!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');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

Depois de remover o HTML do código da Meta, você fica com o SDK do pixel e o código para iniciá-lo. O código de rastreamento de eventos PageView também foi retirado, porque será adicionado na próxima etapa.

​​!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');
fbq('init', YOUR_PIXEL_ID);

É possível que você encontre pixels enviados com script src=. Vale lembrar que os pixels da Shopify não são compatíveis com HTML, então será necessário substituí-los pelo equivalente em JavaScript.

Veja um exemplo do pixel do Google Analytics:

<!-- 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>

É possível substituir a parte script src= pelo equivalente em JavaScript a seguir. Sempre verifique se o atributo src é igual à versão HTML:

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');

Acompanhar eventos do cliente

Depois de carregar e inicializar o SDK do pixel, é preciso transmitir eventos para fazer o rastreamento. Faça isso por meio da inscrição em eventos e da transmissão dos dados relacionados ao SDK do pixel para processamento pelo serviço de terceiros.

Inscrever-se em eventos-padrão

A Shopify oferece um conjunto-padrão de eventos para facilitar a coleta dos dados necessários pelo pixel.

É possível se inscrever em eventos com a API Shopify Pixels Extension. No entanto, vale lembrar que é necessário colocar o código do pixel de terceiros junto com o evento em questão.

Neste exemplo do evento PageView do pixel da Meta, fbq("track") faz parte do código da plataforma. É importante ressaltar que cada empresa tem uma versão própria; portanto, consulte a documentação relacionada.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Alguns eventos têm metadados que podem ser transmitidos ao pixel. Veja no exemplo como enviar informações sobre um produto ao evento ViewContent da Meta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode,
    value: event.data.productVariant.price.amount,
  });
});

Assinar eventos personalizados de cliente

Os eventos personalizados de cliente permitem que você acompanhe eventos adicionais, como quando alguém clica em um botão. A assinatura neles é feita da mesma maneira que a dos eventos-padrão: declare o nome do evento que você quer assinar e passe as informações para o pixel do provedor de serviços de terceiros.

Este é um exemplo de como um evento personalizado publicado aparece nos arquivos do Liquid para o tema:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Este é um exemplo de como você pode configurar o pixel para assinar esse evento personalizado:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Para saber mais sobre eventos personalizados, consulte a documentação para desenvolvedores da Shopify.

Exemplo de pixel personalizado

Veja abaixo o exemplo do código de um pixel completo. Esse código varia de acordo com o provedor de serviços de terceiros e os eventos que você quer acompanhar.

Pixel personalizado da Meta

!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);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode, 
    value: event.data.productVariant.price.amount,
  });
});

analytics.subscribe("search_submitted", async (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", async (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data.cartLine.merchandise.productVariant.id],
    content_name: event.data.cartLine.merchandise.productVariant.title,
    currency: event.data.cartLine.merchandise.productVariant.price.currencyCode,
    value: event.data.cartLine.merchandise.productVariant.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", async (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", async (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", async (event) => {
  fbq('track', 'Purchase', {
    currency: event.checkout.currencyCode,
    value: event.checkout.totalPrice.amount,
  });
});

Tudo pronto para começar a vender com a Shopify?

Experimente de graça