O pixel do Pinterest permite o monitoramento de conversões e o alcance do público relevante, aqueles que demonstram mais interesse pelo seu site. Basicamente, é uma ferramenta de análise que visa mensurar a eficácia das campanhas e medir as ações e comportamento dos visitantes da loja.
Ele funciona com um código que, ao ser configurado nas páginas de vendas, página de pagamento e página de confirmação, permite o mapeamento delas junto com o seu fluxo de campanhas do Pinterest. Logo, se um cliente entrar no seu site, adicionar um produto no carrinho e não finalizar a compra, por exemplo, você poderá impactar esse cliente diretamente no Pinterest, buscando recuperar a venda.
Neste artigo, vamos explicar como configurar o pixel na plataforma via Tag Manager. Ressaltamos que demais customizações poderão ser realizadas diretamente com seus desenvolvedores.
Variáveis
Primeiramente, acesse o Google Tag Manager, clique em Variáveis e Variável Definida Pelo Usuário.
Em seguida, realize as criações conforme os campos configurados abaixo, pois isso dará acesso aos parâmetros enviados para o data layer na plataforma, como valor da conversão, nome do produto, entre outros.
Título da Variável: google_tag_params
Depois, você deverá criar algumas outras variáveis com javascript personalizado, conforme abaixo.
O exemplo do print screen deve ser replicado seguindo o título das outras variáveis mais abaixo.
Título da Variável: ecomm_prodid
function(){
if(window.location.href.match('checkout')){
var items = document.getElementsByClassName('fbits-responsive-carrinho-item')
var ids = [];
for (var i = 0; i< items.length; i ++){
ids.push(items[i].getAttribute('data-produtovarianteid'))
}
return ids;
}
else if (window.location.href.match('produto')) {
return document.getElementById('hdnProdutoVarianteId').value;
} else {
return null;
}
}
Título da Variável: ecomm_totalvalue
function() {
if(window.location.href.match('Confirmacao')){
return {{orderTotal}}
} else if (window.location.href.match('checkout')) {
var valor = document.getElementById('div-total')
valor = valor.innerText;
valor = valor.replace(/\R|\$|\s|\./g,'');
valor = valor.replace(',','.');
valor = Number(valor);
return valor;
} else {
var valores = {{google_tag_params}}.ecomm_totalvalue;
var totalvalue = 0;
for (var i = 0; i < valores.length; i++){
totalvalue = totalvalue+valores[i]
}
return totalvalue;
}
}
Título da Variável: pproductname
function() {
var pproductname='';
if({{google_tag_params}}!=undefined)
{
pproductname={{google_tag_params}}.pproductname;
}
return pproductname;
}
Título da Variável: pname
function() {
var pname='';
if({{google_tag_params}}!=undefined)
{
pname={{google_tag_params}}.pname;
}
return pname;
}
Título da Variável: psubtotal
function() {
var psubtotal='';
if({{google_tag_params}}!=undefined)
{
psubtotal={{google_tag_params}}.psubtotal;
}
return psubtotal;
}
Título da Variável: categoria
function() {
var categoria='';
if({{google_tag_params}}!=undefined)
{
categoria={{google_tag_params}}.categoria;
}
return categoria;
}
Título da Variável: valorPedidoSemFrete
function valorPedidoSemFrete () {
var valorPedidoSemFrete = "";
valorPedidoSemFrete = Fbits.Carrinho.ValorTotal - Fbits.Carrinho.ValorFrete
valorPedidoSemFrete = parseFloat(valorPedidoSemFrete).toFixed(2)
return valorPedidoSemFrete
}
Título da Variável: orderTotal
function(){
function readCookie(name) {
var n = name + "=";
var cookie = document.cookie.split(';');
for(var i=0;i < cookie.length;i++) {
var c = cookie[i];
while (c.charAt(0)==' '){c = c.substring(1,c.length);}
if (c.indexOf(n) == 0){return c.substring(n.length,c.length);}
}
return null;
}
return readCookie('orderTotal')
}
Tags
Após a criação das variáveis, é preciso criar as tags para captura dos eventos de visualizações de páginas de produto, carrinho e confirmação de compra.
Título Tag: Pixel Pinterest
A primeira tag a ser inserida será o código base do Pixel do Pinterest. Para isso, acesse "Tags", no menu lateral esquerdo, e clique em "Nova".
Acionamento
Com o acionamento dessa tag, em Acionadores de disparo selecione "All Pages" e em Exceções crie a seguinte configuração:
Após a finalização das configurações do acionador e tag clique em "Salvar".
Visualização de Produto
Para a tag de visualização do produto crie uma tag conforme o exemplo abaixo:
Título da Tag: Pinterest – Produto
<script>
pintrk('track', 'ViewContent', {
content_type: 'product',
content_ids: ['{{ecomm_prodid}}'],
content_name: '{{pproductname}}',
content_category: '{{categoria}}',
value: '{{ecomm_totalvalue}}',
currency: 'BRL'
});
</script>
Visualização de Carrinho
O processo de criação da Tag para visitantes que chegaram ao carrinho é igual a tag acima, tendo apenas a diferença dos códigos e acionador.
Título da Tag: Pinterest – Carrinho
<script>
pintrk('track', 'AddToCart', {
value: "{{valorPedidoSemFrete}}",
currency: 'BRL',
content_type: 'product',
content_ids: '{{ecomm_prodid}}'
});
</script>
Da mesma forma, precisamos criar um acionador para que a tag seja disparada apenas no carrinho. Para isso, a url precisa ser igual a https://checkout.sualoja.com.br/.
Confirmação de compra
Novamente repita o processo de criação de tag, porém, lembre-se de substituir a parte correspondente com o código abaixo:
Título da Tag: Pinterest – Confirmação
<script>
pintrk('track', 'Purchase', {
value: '{{valorPedidoSemFrete}}',
currency: 'BRL',
content_type: 'product',
content_ids: '{{ecomm_prodid}}',
});
</script>
Atenção: por tratar-se de uma aplicação externa, como medida de segurança, a plataforma pode realizar o bloqueio das URLs. Caso ocorra o bloqueio, será necessário realizar a liberação das URLs em Gerenciar Políticas de Segurança. Para mais detalhes clique aqui.