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.
Nesta página
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
As etapas para criar o código de um pixel personalizado são:
- Prepare o SDK Javascript de terceiros.
- 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.
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 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", (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,
});
});