Criar código de pixel personalizado

Atenção

Pixels personalizados são um recurso avançado que exige conhecimento de JavaScript. O cumprimento das leis aplicáveis, bem como a gestão de consentimentos, segurança do código, solução de problemas e atualizações, são de sua responsabilidade. Os pixels estão sujeitos aos Termos de Serviço da Shopify.

A Shopify não oferece atendimento para a adição e o uso de pixels personalizados. Se precisar de ajuda para adicionar ou usar um pixel personalizado, contrate um Parceiro da Shopify.

Esta página contém instruções para criar um código de pixel personalizado para um pixel de terceiros, a fim de rastrear eventos de clientes específicos. Depois de criar o código do pixel personalizado, você pode adicionar o pixel à sua loja da Shopify.

Observação

Antes de criar um pixel personalizado, analise os apps disponíveis para ter mais estabilidade, segurança e desempenho. No entanto, caso não haja um app que atenda às suas necessidades, crie um pixel personalizado.

Preparação para criar um pixel personalizado

Antes de criar um pixel personalizado, analise as informações a seguir para entender como configurar o pixel:

• Riscos associados a pixels.
• Limitações do sandbox de pixels da Shopify.
• Uso da API do sandbox de pixels da Shopify.
• Esquema de rastreamento de eventos de clientes.

Ao adicionar um pixel personalizado, você especifica as seguintes informações:

• O pixel JavaScript de terceiros.
• Os eventos comportamentais que você quer rastrear.
• As configurações de consentimento de privacidade do cliente.

Criar o código para um pixel personalizado

Expanda os negócios

Este é um tutorial avançado sem atendimento da Shopify. Se precisar de ajuda para adicionar um pixel personalizado, você poderá contratar um Parceiro da Shopify.

A criação do código para um pixel personalizado envolve as seguintes etapas:

1. Preparar o SDK Javascript de terceiros.
2. Configurar o pixel para rastrear eventos de clientes.
3. Configurar as configurações de consentimento para a privacidade do cliente para o pixel.

Preparar o SDK Javascript de terceiros

O serviço de terceiros com o qual você está trabalhando fornece o código integrado ao pixel. Geralmente, um pixel tem dois componentes: um SDK de Javascript e o código de rastreamento. É preciso remover qualquer HTML no código do serviço de terceiros, pois o sandbox de pixel da Shopify é compatível apenas com JavaScript.

Confira um exemplo de Pixel da Meta. Os pixels podem ser um pouco diferentes entre os serviços de terceiros.

​​<!-- 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, restarão o SDK do pixel da Meta e o código para inicializá-lo. O código de rastreamento de evento PageView também foi removido, pois 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);

O SDK do pixel da Meta não transmite dados de um pixel personalizado da Shopify de forma automática. Para transmitir os dados, é preciso se inscrever nos eventos.

É possível encontrar pixels carregados com script src=. Como o HTML não é compatível com os pixels da Shopify, será preciso substituir script src= pelo equivalente em JavaScript.

Confira um exemplo de pixel do Google Analytics carregado com script src=:

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

A parte script src= pode ser substituída pelo equivalente em JavaScript. Verifique sempre se o atributo src corresponde à versão em 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');

O SDK de pixel do Google não transmite dados de um pixel personalizado da Shopify automaticamente. Para fazer a transmissão, é preciso se inscrever em eventos.

Rastrear eventos de clientes

Após carregar e inicializar o SDK do pixel, é preciso enviar eventos para ele para fins de rastreamento. Para isso, inscreva-se em eventos e, depois, passe os dados do evento para o SDK do pixel para serem processados pelo serviço de terceiros.

Inscrever-se em eventos-padrão

A Shopify oferece um conjunto-padrão de eventos, que ajuda a garantir que o pixel colete os dados necessários.

É possível se inscrever em eventos usando a API Shopify Pixels Extension. Você precisará inserir o código do pixel de terceiros no evento em que está se inscrevendo.

Este é um exemplo do evento PageView para o Pixel da Meta. Lembre-se de que fbq("track") faz parte do código da Meta e cada empresa terá a própria versão. Por isso, consulte a documentação de cada uma.

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

Alguns eventos têm metadados que podem ser enviados para o pixel. Confira um exemplo de como enviar algumas informações do produto para o 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,
  });
});

Inscrever-se em eventos de clientes personalizados

Para rastrear outros eventos de clientes, como o clique em um botão, adicione eventos de clientes personalizados. A inscrição nesses eventos pode ser feita da mesma forma que nos eventos-padrão. Declare o nome do evento no qual você quer se inscrever e passe a informação para o pixel do provedor de serviços de terceiros.

Este é um exemplo de como um evento personalizado publicado pode aparecer nos arquivos Liquid do tema:

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

Este é um exemplo de como configurar o pixel para se inscrever nesse 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 o consentimento e as configurações de venda de dados

Observação

A responsabilidade pelo cumprimento das leis de privacidade é sua, e você deve consultar sua assessoria jurídica para determinar como as leis da sua região e da região em que você vende podem afetar a empresa. Para vender produtos com a plataforma da Shopify, é preciso cumprir as leis da jurisdição da sua empresa e dos seus clientes, os Termos de Serviço da Shopify, a Política de Uso Aceitável da Shopify e outras políticas aplicáveis. Saiba mais sobre a privacidade do cliente.

Em mercados configurados para exigir consentimento, como o Espaço Econômico Europeu (EEE) e o Reino Unido, os web pixels são executados somente quando os visitantes do site concedem as permissões exigidas na configuração do pixel.

Por padrão, os novos pixels personalizados exigem as permissões de Marketing e Análise. É possível personalizar as permissões necessárias na seção Privacidade do cliente > Permissão das informações do pixel personalizado.

Da mesma forma, os pixels configurados como de venda de dados não serão executados para clientes que desativaram a venda ou o compartilhamento de dados, a menos que o pixel seja compatível com o uso limitado de dados. Por padrão, novos pixels personalizados se qualificam como venda de dados. É possível personalizar se os dados coletados se qualificam como venda de dados na seção Privacidade do cliente > Venda de dados das informações do pixel personalizado.

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

Cada pixel pode ter um nome diferente para cada finalidade. Consulte a documentação do pixel de terceiros para entender o mapeamento com as definições da Shopify.

Por exemplo, veja a seguir como as finalidades de Marketing e Análise são mapeadas para 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 rastrear. Consulte a referência de eventos de clientes para ver uma lista de eventos disponíveis.

Exemplo de 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,
  });
});