Criar código de pixel personalizado

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.

Observação

Antes de criar um pixel personalizado, verifique os apps disponíveis para melhorar a estabilidade, a segurança e o desempenho. Se não houver um que atenda às suas necessidades, opte por criar um pixel personalizado.

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:

• Riscos associados a pixels
• Limitações da sandbox de pixels da Shopify
• Uso da API para a sandbox de pixels da Shopify
• Esquema de acompanhamento de eventos do cliente

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

Observação

Este é um tutorial avançado e não é atendido pela Shopify. Se você precisar de ajuda para adicionar pixels personalizados, contrate um Parceiro da Shopify.

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

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

É 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 substituir script src= 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. Verifique sempre 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

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.

Configurar a permissão

Nos mercados configurados para exigir consentimento, como o Espaço Econômico Europeu (EEE) e o Reino Unido, os pixels da web são acionados apenas quando os visitantes do site deram as permissões necessárias. Vale destacar que os novos pixels requerem as permissões de Marketing e Análises por padrão.

Da mesma forma, pixels configurados como venda de dados não serão acionados para clientes que desativaram a venda ou o compartilhamento de dados, a menos que permitam o uso limitado de informações.

Desenvolvedores de pixels personalizados podem saber mais sobre como coletar e registrar o consentimento.

Vale lembrar que cada pixel pode ter um nome diferente para cada finalidade. Consulte a documentação do pixel de terceiros para saber como ele mapeia as definições da Shopify.

Por exemplo, veja como as finalidades de marketing e análises mapeiam o modo de consentimento do Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Exemplo de pixel personalizado

Veja abaixo um exemplo do código de um pixel da Meta. O código do pixel varia de acordo com o provedor de serviços de terceiros e os eventos que você quer acompanhar. Consulte a referência de eventos do cliente para ver a lista de eventos disponíveis.

Pixel da Meta personalizado

!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", (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", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (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", (event) => {
  fbq('track', 'AddPaymentInfo');
});

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

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