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