Precisa de ajuda?

→

Ativar o pixel do Facebook em sua loja permite que você possa avaliar o tráfego e o comportamento dos seus clientes, entendendo o impacto dos acessos. Com o pixel é possível direcionar campanhas a um publico assertivo e segmentado, trabalhar com remarketing, pois terá traqueado o seu cliente e as campanhas serão feitas com retorno certo!

Abaixo apresentamos o passo a passo da inclusão do pixel:

1- Configuração do Google Tag Manager

Para utilizar esta integração em sua loja você deverá possuir uma conta configurada no Google Tag Manager: https://tagmanager.google.com e obter o código do contêiner criado.

Em seguida no painel administrativo de sua loja virtual informe o código de seu contêiner:

Caminho de acesso:
Minha Loja >> Integrações > Ferramentas do Google > Tag Manager> Configurar >> Incluir o código

Após preencher o código clique no botão Salvar.

 

Após a criação de sua conta no tag mananger será necessário criar algumas variáveis e tags para o funcionamento do pixel em sua loja.

 

2 - Criar variáveis personalizadas

Clique no campo "Variáveis" conforme imagem abaixo

pixel_face_inclus_o_1.png

Selecione a opção "Nova" para criar uma nova variável

pixel_face_inclus_o_2.png

2.1 Variável - EasyCheckout_OrderData

Quando o cliente estiver realizando a compra, as informações referente a pedido como produtos, valores e pagamento serão apresentadas nesta variável.


No título da variável inclua o nome: EasyCheckout_OrderData

pixel_face_inclus_o_3.png

pixel_face_inclus_o_4.png

Escolher tipo: Variável da camada de dados

pixel_face_inclus_o_5.png

Nome da variável da camada de dados: ecommerce.purchase

Versão da camada de dados: Versão 2

pixel_face_inclus_o_6.png

pixel_face_inclus_o_7.png

Salve esta variável

 

2.2 Variável - EasyCheckout_Step

Esta variável é utilizada para identificar qual o passo do carrinho que o cliente está navegando

Crie nova variável com o nome: EasyCheckout_Step

Escolher tipo: Variável da camada de dados
Nome da variável da camada de dados:  ecommerce.checkout.actionField.step
Versão da camada de dados: Versão 2

pixel_face_inclus_o_8.1.PNG

Em seguida salve esta variável 

 

3 - Criar Acionadores

Acionadores são disparados em momentos importantes dentro do processo de compra, assim aquela informações essencial como o incio da compra ou a finalização é exibido corretamente na integração.

Vamos inciar a criação clicando em "Acionadores" -> "Nova"

pixel_face_inclus_o_8.png

pixel_face_inclus_o_9.png

 

3.1 Acionador - EasyCheckout_Confirmation

Este acionador marca o momento que o cliente inicia o carrinho de compras

Tipo de acionador: Evento personalizado

pixel_face_inclus_o_10.png

Nome: EasyCheckout_Confirmation
Este evento é disparado em: Alguns eventos personalizados
Disparar este acionador: EasyCheckout_Step contém 2

pixel_face_inclus_o_11.png

Em seguida salve as alterações

 

3.2 Acionador - EasyCheckout_OrderPlaced

Acionado quando o cliente finaliza a compra.


Tipo de acionador: Evento personalizado
Nome do Acionador: EasyCheckout_OrderPlaced
Nome do Evento: purchase
Este evento é disparado em: Todos os eventos personalizados

pixel_face_inclus_o_12.png

Salve as informações

4 - Criação de Tags

4.1 Tag - Facebook

Informa o Facebook as interações que o visitante faz em sua loja virtual, exceto detalhes de compra que serão configuradas no próximos passos.

Crie um nova tag, clicando em "Tags" -> "Nova"

pixel_face_inclus_o_13.png

Configuração da tag: HTML personalizado
Marcar a opção "suporte para document.write"
Acionadores de disparo: escolher "Todas as páginas" ("All Pages")

pixel_face_inclus_o_14.png

pixel_face_inclus_o_15.png

 

Copie o código abaixo e cole no campo Tag, mas não se esqueça de alterar o campo destacado com 000000000000000 pelo seu código do Facebook

<!-- Facebook 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', '000000000000000'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<script>
var details = dataLayer[0];
var pagina = details.pageCategory;
function getProducts(products) {
    var prodid = '[';
    for (var i = 0; i <= products.length - 1; i++) {
     prodid = prodid + products[i]['idProduct'];
     if (i !== products.length - 1) {
       prodid = prodid + ',';
     }
    };
    prodid = prodid + ']';
    return prodid;
}
(function() {
    var CART = 'AddToCart',
        CATEGORY = 'ViewCategory',
        SEARCH = 'Search',
        CONTENT = 'ViewContent';
    function facebookEvent(event_name, params) {
        fbq('track', event_name, params);
    }
    try {
        if (pagina.toLowerCase() == 'produto') {
            facebookEvent(CONTENT, {
                content_type: 'product',
                content_ids: details.idProduct,
                content_name: details.nameProduct,
                content_category: details.category,
                value: details.priceSell,
                currency: 'BRL'
            });
        } else if (pagina.toLowerCase() == 'busca') {
            var products_id = getProducts(details.listProducts);
            facebookEvent(SEARCH,{
                content_type: 'product',
                search_string: details.siteSearchTerm,
                content_category: 'Busca',
                content_ids: products_id,
                currency: 'BRL'
            });
        } else if (pagina.toLowerCase() == 'catalogo') {
            var products_id = getProducts(details.listProducts);
            facebookEvent(CATEGORY,{
                content_type: 'product',
                content_name: details.category,
                content_category: details.breadcrumb,
                content_ids: products_id,
                currency: 'BRL'
            });
        } else if (pagina.toLowerCase() == 'carrinho') {
            var products_id = getProducts(details.checkoutProducts);
            facebookEvent(CART,{
                content_type: 'product',
                content_ids: products_id,
                value: details.checkoutTotal,
                currency: 'BRL'
            });
        }
    } catch (err) {}
})();
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=000000000000000&ev=PageView&noscript=1" /></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

 Em seguida salve essa tag

 

4.2 Tag - Facebook_InitiateCheckout

Esta tag informa o Facebook que o visitante iniciou o carrinho de compras.

Crie uma nova tag

pixel_face_inclus_o_17.png

Nome da Tag: Facebook_InitiateCheckout
Marque a opção "suporte para document.write"
Acionadores de disparo: escolher "EasyCheckout_Confirmation"
Exceções:escolher "EasyCheckout_OrderPlaced"

Copie o código abaixo e cole no campo Tag, mas não se esqueça de alterar o campo destacado com 000000000000000 pelo seu código do Facebook

<!-- Facebook 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', '000000000000000'); // Insert your pixel ID here.
fbq('track', 'InitiateCheckout');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=000000000000000&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->  

Em seguida clique em Salvar

4.3 Tag - Facebook_Purchase

Quando é finalizado a venda, com essa tag o Facebook é informado quais produtos foram comprados e valor do pedido

 Crie uma nova tag

pixel_face_inclus_o_18.png

Nome da Tag: Facebook_Purchase
Marque a opção "suporte para document.write"
Acionadores de disparo: escolher
"EasyCheckout_OrderPlaced"
Exceções:escolher "EasyCheckout_Confirmation"

 

Copie o código abaixo e cole no campo Tag, mas não se esqueça de alterar o campo destacado com 000000000000000 pelo seu código do Facebook

<!-- Facebook 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', '000000000000000'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<script>
function getProducts(products) {
    var prodid = '[';
    for (var i = 0; i <= products.length - 1; i++) {
     prodid = prodid + products[i]['id'];
     if (i !== products.length - 1) {
       prodid = prodid + ',';
     }
    };
    prodid = prodid + ']';

    return prodid;
}

fbq('track', 'Purchase', {
    content_type: 'product',
    content_ids: getProducts({{EasyCheckout_OrderData}}.products),
    value: {{EasyCheckout_OrderData}}.actionField.revenue,
    currency: 'BRL'
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=000000000000000&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->  

 

E finalizando clique em Salvar

5 - Verificar resultado

Conforme seu site é visitado será disparado os pixels do Facebook. Assim para verificar se está funcionando corretamente acesse o Facebook Ads e verifique na opção Pixels

pixel_face_inclus_o_19.png

Boas Vendas!

Patricia Inácio 
Tem mais dúvidas? Envie uma solicitação

Comentários

  • Avatar
    Gerente FK Plus

    Olá! Há um erro na parte 3.1, onde manda chamar o disparador "EasyCheckout_Step" e, até então, não tinha nada sobre a criação do mesmo. Acho que falta, no início, pedir pra criar também esta variável:

    Nome: EasyCheckout_Step
    Escolher tipo: Variável da camada de dados
    Nome da variável da camada de dados: ecommerce.checkout.actionField.step
    Versão da camada de dados: Versão 2

  • Avatar
    Patricia Inácio

    Bom dia FK!

    O documento foi atualizado um dia depois e já temos feedback de agencias e lojistas que incluíram e está funcionando corretamente, por gentileza poderia validar novamente.

    Atenciosamente

    Editado por Patricia Inácio
    Powered by Zendesk