Neste tutorial vamos explicar como utilizar as triggers (gatilhos) de checkout para capturar informações relevantes durante a jornada do cliente em um e-commerce.
As triggers de checkout são eventos que ocorrem em momentos específicos durante o processo de compra, como ao acessar o carrinho de compras, adicionar ou remover itens, alterar o endereço de entrega ou escolher um método de pagamento.
Abaixo, listamos as triggers mais comuns utilizadas durante o processo de checkout e o que cada uma delas captura:
| Trigger | Descrição |
| view_cart | Disparado quando o usuário acessa o carrinho de compras. Retorna dados do carrinho. |
| cart_update | Disparado quando há qualquer atualização na sessão do carrinho. Retorna dados do carrinho. |
| freight_update | Disparado quando o usuário altera o CEP, tipo de entrega ou horário de agendamento. Retorna dados do carrinho. |
| add_to_cart | Disparado quando um item é adicionado ao carrinho. Retorna dados do item. |
| remove_from_cart | Disparado quando um item é removido do carrinho. Retorna dados do item. |
| cart_address | Disparado quando há qualquer atualização na sessão de endereço. Retorna dados do carrinho. |
| payment_update | Disparado ao iniciar a sessão de pagamento. Retorna dados do carrinho. |
| payment_selected | Disparado ao selecionar a forma de pagamento. Retorna dados do carrinho. |
| order_success | Disparado quando finalizado o pedido. Retorna dados do pedido. |
Para utilizar as triggers de checkout, você precisará incluir o seguinte script padrão no seu código.
Este script será responsável por capturar os eventos e enviar os dados para sua ferramenta de análise ou CRM.
Script Padrão:
<script type="text/javascript" async>
(function(){
if(window.cvz && window.cvz.events){
window.cvz.events.bind("event_name.app_name", function(data){
// Ação a ser realizada quando o evento for disparado
})
}
})();
</script>
Este código define uma estrutura básica para capturar eventos. O event_name corresponde ao nome do evento (por exemplo, cart_update, add_to_cart), e o app_name é o nome da sua agência ou sistema.
Exemplo de Script de Configuração:
<script type="text/javascript" async>
(function(){
if(window.cvz && window.cvz.events){
// Início do cart_update
window.cvz.events.bind("cart_update.agenciaBeta", function(dataCart){
console.log("cart_update.agenciaBeta");
window.dataLayer.push({
"totalDoCarrinho": dataCart.totalizers.total_price
});
}); // Fim do cart_update
// Início do add_to_cart
window.cvz.events.bind("add_to_cart.agenciaBeta", function(dataItem){
console.log("add_to_cart.agenciaBeta");
console.log(dataItem);
// Aqui você pode adicionar lógica para capturar informações do item adicionado
}); // Fim do add_to_cart
}
})();
</script>
cart_update.agenciaBeta: Este evento é disparado sempre que o carrinho é atualizado (adicionar ou remover produtos, alterar quantidade, etc.).
A função captura o valor total do carrinho (total_price) e o envia para o Google Tag Manager, por exemplo, usando window.dataLayer.push.
add_to_cart.agenciaBeta: Este evento é disparado quando um item é adicionado ao carrinho. No exemplo, é possível capturar o dataItem, que contém detalhes do item adicionado, como ID, nome, preço, etc.
ATENÇÃO!
Após implementar o script, faça testes em seu site para garantir que os eventos estão sendo disparados corretamente e que os dados estão sendo capturados conforme esperado.
Sempre que houver mudanças no processo de checkout, verifique se as triggers estão capturando os dados corretamente e se o script precisa ser ajustado.
Nossa equipe recebe diariamente sugestões e melhorias de nossos clientes.
Por isso, a Convertize está sempre de portas abertas para ouvir, analisar, discutir e realizar as mudanças que estão sempre acontecendo.
Não esqueça de avaliar nossos tutoriais, até a próxima!