Adicionar pixels personalizados

Se não tiver um app para acompanhar e coletar dados de eventos de clientes específicos, adicione um pixel personalizado que seja executado em um ambiente sandbox flexível.

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

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

Preparar o código do pixel de terceiros

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

Veja em um exemplo da Meta que os pixels são ligeiramente diferentes entre as empresas.

​​<!-- 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 substituir 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');

Inscrever-se em eventos-padrão

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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Adicionar pixel personalizado

Antes de tudo, remova os pixels atuais para garantir que os eventos do cliente não sejam contados duas vezes. Não se esqueça de que o código desses pixels precisa ser removido manualmente de todos os locais, como theme.liquid, checkout.liquid (somente lojistas do Plus) e em outros scripts de checkout.

  1. No admin da Shopify, acesse Configurações > Eventos de cliente.
  2. Dê um nome exclusivo ao pixel. Se você inserir o nome de um pixel personalizado que já existe, será necessário escolher um diferente.
  3. Clique em Adicionar pixel para abrir o editor de eventos.
  4. Cole o pixel JavaScript de terceiros na janela Código.
  5. Adicione os eventos que você quer acompanhar no esquema adequado.
  6. Opcional: clique em Mais ações para editar o nome do pixel ou ver informações sobre como contratar um Especialista da Shopify para receber ajuda.
  7. Clique em Salvar para salvar o pixel personalizado. Se tudo estiver pronto para conectar o pixel personalizado, clique em Conectar pixel para começar a acompanhar eventos.

Conectar um pixel personalizado

Após a inclusão de um pixel personalizado, é necessário conectá-lo à loja.

  1. Na página "Eventos de cliente" do admin da Shopify, clique em Pixels personalizados.
  2. Os pixels personalizados não conectados no momento são exibidos abaixo do cabeçalho Pixels desconectados. Clique em Conectar na linha do pixel personalizado em questão.
  3. Analise os Termos de serviço da Shopify. Se o pixel estiver de acordo com os requisitos do serviço, clique em Conectar.

Exemplos de pixels personalizados

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

Desconectar pixels personalizados

Caso você não queira mais acompanhar os eventos adicionados, desconecte manualmente o pixel personalizado da loja virtual.

Etapas:

  1. Na página "Eventos de cliente" do admin da Shopify, clique em Pixels personalizados.
  2. Os pixels personalizados conectados são exibidos na parte superior da lista relacionada. Clique em Desconectar na linha do pixel personalizado em questão. Vale lembrar que a ação de desconectar não exclui o pixel.

Excluir pixels personalizados

É possível excluir pixels personalizados de que você não precisa mais.

Etapas:

  1. Na página "Eventos de cliente" do admin da Shopify, clique em Pixels personalizados.
  2. Clique no botão na linha do pixel personalizado em questão.
  3. Clique em Excluir. Confirme a exclusão para o pixel personalizado ser removido do gerenciador.

Vale lembrar que não é possível desfazer essa ação; portanto, verifique se você está excluindo o pixel correto.

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

Experimente de graça