Como inserir Pixel de Remarketing do TikTok

     O Pixel do TikTok 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 TikTok. 

       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.

Atenção: Caso a loja esteja instanciada no Storefront, o valor das variáveis utilizadas podem mudar.

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 TikTok

       A primeira tag a ser inserida será o código base do Pixel do Tik Tok. 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: TikTok – Produto

<script>

ttq.track('ViewContent', {

content_type: 'product',

content_id: ['{{ecomm_prodid}}'],

content_name: '{{pproductname}}',

product_category: '{{categoria}}',

value: '{{ecomm_totalvalue}}',

currency: 'BRL'

});

</script>

       Após inserir o script acesse "Configurações avançadas", em seguida "Sequenciamento de tags", nesta opção marque o checkbox de "Disparar uma tag antes do disparo de Tik Tok - Produto" e selecione a tag que você criou com o Código base do Pixel do Tik Tok.

       Repita esse processo para todas as demais tags.

       Para o acionamento, localizado logo abaixo do HTML que você acabou de inserir, você deverá criar um acionador de exibição da página, configurando para que a tag dispare apenas nas páginas que contenham /produto/ na URL, conforme abaixo:

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: TikTok - Carrinho

<script>

ttq.track('AddToCart', {

value: "{{valorPedidoSemFrete}}", 

currency: 'BRL', 

content_type: 'product', 

content_id: '{{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: TikTok - Confirmação

<script>

ttq.track('CompletePayment', {

value: '{{valorPedidoSemFrete}}',

currency: 'BRL',

content_type: 'product',

content_id: '{{ecomm_prodid}}', 

});

</script>

Depois, basta adicionar o acionador com a url contendo "Confirmacao", conforme imagem abaixo:

       Com isso, fechamos as três principais tags com as informações necessárias para garantir versatilidade na hora de segmentar seus anúncios no TikTok.

       Por fim, não esqueça de enviar as alterações realizadas no Google Tag Manager clicando em "Enviar", conforme abaixo: 

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.