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.
Comentários
0 comentário
Por favor, entre para comentar.