Neste artigo, você aprenderá como configurar o seu GTM utilizando o datalayer da Yever.
A Yever disponibiliza um container com todas as variáveis e acionadores já criados. Caso deseje receber esse arquivo, solicite ao seu gerente de contas.
ETAPA 1: Acesse a sua conta do Google Tag Manager.
Certifique-se de que você já possui uma conta configurada no Google Tag Manager e acesso de editor ao container que será utilizado.
Caso ainda não tenha acesso, solicite a permissão necessária antes de iniciar a configuração.
ETAPA 2: Criando as Variáveis do Datalayer.
As variáveis são as informações que a Yever disponibiliza durante o processo de compra.
Criá-las corretamente é essencial para que você consiga enviar os dados necessários às suas plataformas de mídia, como Google Analytics, Google Ads, Meta Ads e outras ferramentas de rastreamento.
A Yever disponibiliza 38 variáveis. Por isso, será necessário criar manualmente cada uma delas dentro do GTM, seguindo o padrão abaixo:
Variável | Nome da variável da camada de dados |
adress | params.address |
address.city | params.address.city |
address.complement | params.address.complement |
address.country | params.address.country |
address.neighborhood | params.address.neighborhood |
address.number | params.address.number |
address.postal_code | params.address.postal_code |
address.state | params.address.state |
address.street | params.address.street |
coupon | params.coupon |
coupon.code | params.coupon.code |
coupon.discount | params.coupon.discount |
customer | params.customer |
customer.email | params.customer.email |
customer.first_name | params.customer.first_name |
customer.full_name | params.customer.full_name |
customer.ip | params.customer.ip |
customer.last_name | params.customer.last_name |
customer.phone | params.customer.phone |
customer.uuid | params.customer.uuid |
items | params.items |
items.0.id | params.items.0.id |
items.0.order_bump | params.items.0.order_bump |
items.0.price | params.items.0.price |
items.0.product | params.items.0.product |
items.0.variant | params.items.0.variant |
order | params.order |
payment | params.payment |
params.currency | params.params.currency |
payment.type | params.payment.type |
payment.upsell | params.payment.upsell |
payment.value | params.payment.value |
shipment | params.shipment |
shipment.description | params.shipment.description |
shipment.value | params.shipment.value |
url | params.url |
label | label |
No espaço de trabalho do seu GTM, acesse Variáveis no menu lateral esquerdo.
Clique em Nova para adicionar uma nova variável.
Defina o nome da sua variável dentro do GTM. Recomendamos manter um padrão de nomenclatura para facilitar a identificação posteriormente.
Clique em Configuração da variável e busque por Variável da camada de dados.
Se não encontrar facilmente no menu, use a lupa para pesquisar.
Em Nome da variável da camada de dados, adicione o padrão correspondente disponível na tabela acima.
Exemplo de como fica a variável address dentro do GTM.
Clique em Salvar.
Repita esse passo para todas as Variáveis da tabela.
ETAPA 3: Criando os acionadores dentro do Google Tag Manager.
Os acionadores são responsáveis por definir em quais momentos os eventos serão disparados.
Na prática, eles identificam ações realizadas pelo cliente durante a jornada de compra, como visualização de página, início de checkout, preenchimento de entrega, pagamento e compra finalizada.
A Yever disponibiliza 5 eventos. Por isso, será necessário criar manualmente cada acionador dentro do GTM, seguindo o padrão abaixo:
Evento | Condição |
Pageview | gtm_pageview |
Iniciate Checkout | gtm_initiate_checkout |
Add shipment info | gtm_add_shipment_info |
Add payment info | gtm_add_payment_info |
Purchase | gtm_purchase |
No Espaço de trabalho do seu GTM, acesse Acionadores no menu lateral esquerdo.
Clique em Novo para adicionar um novo acionador.
Defina o nome do seu acionador dentro do GTM. Recomendamos manter um padrão de nomenclatura para facilitar a identificação.
Clique em Configuração da acionador e busque por Evento personalizado.
Se não encontrar facilmente no menu, use a lupa para pesquisar.
Em Nome do evento adicione conversion.
Em Este acionador é disparado em selecione Alguns eventos personalizados.
Em Select variable, busque pela variável Label, criada na etapa anterior.
Seleciona a condição de é igual a.
Na condição, adicione o nome do evento que está sendo criando.
Exemplo de como fica o evento de pageview dentro do GTM.
Clique em Salvar.
Repita esse passo para todos os Acionadores da tabela.
ETAPA 4: Criando tags dentro do Google Tag Manager.
As tags são responsáveis por enviar os eventos rastreados no site, junto com os parâmetros configurados, para as plataformas de mídia e análise.
É por meio delas que os dados capturados pelo datalayer da Yever serão enviados para ferramentas como GA4, Google Ads, Meta Ads, entre outras.
No Espaço de trabalho do seu GTM, acesse TAGS no no menu lateral esquerdo.
Clique em Nova para adicionar uma nova tag.
Defina o nome da tag dentro do GTM. Recomendamos manter um padrão de nomenclatura para facilitar a organização.
Em Configurações da tag, escolha o tipo de tag correspondente à ação que deseja realizar, como por exemplo Evento do Google Analytics ou Pixel do Facebook.
Como exemplo vamos criar uma tag de purchase no GA4
Em ID da métrica, selecione qual pixel ou propriedade será utilizado, como GA4, Facebook, Google Ads, entre outros.
Em nome do evento, adicione purchase.
Adicione os Parâmetros de evento e as Propriedades do usuário que deseja enviar.
Em Parâmetro do evento, adicione o nome exigido pela documentação da plataforma, como
page_view,purchaseouadd_to_cart.Em Valor, adicione a variável criada na Etapa 2.
Repita esse passo para cada parâmetro que quiser enviar.
Em Acionamento, selecione o acionador que deverá disparar esse evento..
Clique em Salvar para criar a tag.
ETAPA 5: Publicar as mudanças
Após criar todas as tags, recomendamos testar a configuração antes de publicar.
Para isso, utilize o modo Visualizar do GTM e confira se os eventos estão sendo disparados corretamente.
Clique em Visualizar.
Insira a URL do seu site.
Clique em Conectar.
Duas novas abas serão abertas no navegador: uma com o seu site e outra com o Tag Assistant.
Dentro do Tag Assistant, clique em Continuar.
Na aba do seu site, simule todos os eventos criados dentro do GTM.
A cada evento realizado, volte ao Tag Assistant e verifique se ele foi disparado corretamente.
Após finalizar os testes, se estiver tudo correto, volte ao GTM e clique em Enviar.
Pronto. Toda configuração foi realizada com sucesso.
Agora, suas tags e acionadores estarão configurados para rastrear os eventos com base nos dados enviados pelo datalayer da Yever, sempre que as condições definidas forem atendidas.
COMO A YEVER ENVIA O DATALAYER
Se você possui um conhecimento mais avançado ou conta com um programador para configurar o GTM, veja abaixo como a Yever envia os dados pelo datalayer.
Todos os eventos dentro da Yever são acionados conforme o modelo abaixo:
window.dataLayer.push({
event: 'conversion',
transaction_id,
timestamp,
label: 'gtm_' + LABEL,
params,
})
Portanto, o evento sempre será enviado como:
conversion
E a label seguirá o padrão:
gtm_LABEL_QUE_DESEJA_USAR
Segue abaixo um exemplo completo do datalayer enviado com os parâmetros de uma venda realizada:
window.dataLayer.push({
"event":"conversion",
"transaction_id":"6bf3eebb-5e2a-400e-851d-85123d475406",
"timestamp":"2023-12-30T14:48:00.000Z",
"label":"gtm_purchase",
"params":{
"url":"/checkout/payment?pcode=mG7PC7m0",
"order":"1234567890",
"customer":{
"first_name":"Lucas",
"last_name":"Duarte",
"full_name":"Lucas Mendes Souza Duarte",
"email":"[email protected]",
"phone":"95997874444",
"uuid":"8407a313-24e5-49e4-8257-64e83a8c8095",
"ip":"192.168.0.1"
},
"address":{
"street":"Avenida Paulista",
"number":111,
"complement":"apto 11",
"neighborhood":"Bela Vista",
"city":"São Paulo",
"state":"SP",
"country":"BR",
"postal_code":"01310100"
},
"shipment":{
"description":"CORREIOS - Envio de 2 à 5 dias",
"value":"0.00"
},
"payment":{
"currency":"BRL",
"type":"credit_card", // billet|credit_card|pix
"value":"117.96",
"upsell":false
},
"items":[
{
"id":"8111116719909",
"product":"Produto de teste",
"variant":"Cor: Azul",
"price":97.9,
"quantity":1,
"order_bump":false
}
],
"coupon":{
"code":"",
"discount":"0.00"
}
}
})