Configurações

Abandono de Carrinho

Configurar o abandono de carrinho para uma loja virtual na VTEX com Google Tag Manager

Para utilizar esse tutorial é necessário que você possua uma loja virtual na VTEX e também que ela possua instalado o Google Tag Manager. 


Passo 1 - Validação de Propriedade de Domínio


Primeiramente realize a validação de propriedade de domínio de sua página para que seja possível gerar o script base de nossa ferramenta. 



Passo 2 - Inclusão do script base no site


Uma vez validada a propriedade do domínio, você precisará incluir o script base da Dinamize em sua página caso ainda não possua. Veja como incluir nosso script base: 


No Dinamize Automation 


No Dinamize Mail 



Passo 3 - Criação do email de abandono de carrinho


Com o script base já incluído agora vamos para a parte de criação do seu email de abandono de carrinho. Em Fluxos de Automação > Adicionar nova automação. Na seleção do gatilho, marque a opção "Navegação no site". 




Em Site, selecione o seu site já cadastrado na validação de propriedade. Em Identificador, dê um nome como por exemplo, "abandono". E após, marque a opção Abandono e defina o tempo que deveremos considerar na análise abandono. Por exemplo, após o clique no botão de "Fechar pedido" em seu site, quanto tempo você quer considerar para identificar um abandono de compra, ou seja, o cliente não ter chego até a página de confirmação de compra. 


Marque o tempo desejado e então clique em Selecionar. 




Agora, selecione a tarefa "Enviar e-mail" e então em Opções, clique em "Criar Novo". 






Faça as primeiras configurações do email que seus leads irão receber caso deixe algum produto no carrinho e não conclua a compra. 


Agora na parte de criação do conteúdo, você poderá incluir um elemento de produtos do abandono. Nele será substituído pelos dados dos produtos que seus leads abandonarem no carrinho. 




Após configurar seu email de abandono de carrinho, salve sua automação e clique em Ação > Instruções




Nestas instruções as únicas informações necessárias neste tutorial serão: Site e a Hash. Copie essas informações em bloco de notas, pois usaremos mais adiante no tutorial. 






Passo 4 - Criação da TAG para usuários logados


Como durante a compra em seu site, podemos ter um início de compra por um usuário que ainda não está logado ou cadastrado em sua loja e também podemos ter uma compra iniciada por um usuário já logado, precisaremos criar 2 TAGs no Google Tag Manager para tratar estes dois comportamentos. 



Vamos agora criar uma nova TAG no Google Tag Manager, no tipo de TAG marque a opção HTML personalizado. Agora, copie e cole o conteúdo abaixo, alterando os locais indicados com as informações coletadas no passo anterior: 




<script>

    

    var cart_data_ar = jQuery("body").data("cart_data_ar");

    if (typeof cart_data_ar === "undefined"){

        jQuery("body").data("cart_data_ar",[]);

    cart_data_ar = jQuery("body").data("cart_data_ar");

    };


    jQuery(".cart-items .product-item").each(function(){

        

        //Dados do Cliente

         var cmp1 = "";

         cmp1 = jQuery(".client-profile-email .email").text();

        

        //Dados do Produto    

        var name = jQuery(this).find('img').attr("alt");

        var image = "https:" + jQuery(this).find('img').attr("src");

        var link = "https:" + jQuery(this).find('a').attr("href");

        var unitary_value = jQuery(this).find('.new-product-price').text();

            

         var cart_data = [{

             "amount":"1",

             "id":name,

             "image":image,

             "link":link,

             "name":name,

             "description":name,

             "unitary_value":unitary_value

         }];


            if(cmp1!=""){

                  _dAutomationGtmAddTimer("Cole seu site aqui", "Cole sua hash aqui", {"cmp1":cmp1, "cart_data":cart_data});

            }else{

              

            cart_data_ar.push(cart_data);

                  jQuery("body").data("cart_data_ar",cart_data_ar);

            };

        });

</script>




Lembre-se de substituir as informações no código acima: 

  • Cole seu site aqui
  • Cole sua hash aqui



Passo 5 - Criação o ACIONADOR para usuários logados


Agora iremos definir o acionador da TAG para usuários logados. 



Na configuração do acionador, marque a opção Clique > Todos os elementos




Agora marque "Alguns cliques" e então Click ID > é igual a > cart-to-orderform



Vincule o Acionador criado à sua TAG e salve-a. 



Passo 6 - Criação da TAG para usuários NÃO logados


Vamos agora criar uma nova TAG no Google Tag Manager, no tipo de TAG marque a opção HTML personalizado. Agora, copie e cole o conteúdo abaixo, alterando os locais indicados com as informações coletadas no passo 3


<script>

       var cmp1 = jQuery(".client-profile-email .email").text();

  

    if(cmp1!=""){

        var cart_data_ar = $("body").data("cart_data_ar");

            if (typeof cart_data_ar !== "undefined"){

                 for (var i in cart_data_ar) {

                     cart_data = cart_data_ar[i];

                  

        _dAutomationGtmAddTimer("Cole seu site aqui", "Cole sua hash aqui", {"cmp1":cmp1, "cart_data":cart_data});

                  

                 };

               };

        cart_data_ar=[];

        $("body").data("cart_data_ar",[]);

    };

    </script>




Lembre-se de substituir as informações no código acima: 

  • Cole seu site aqui
  • Cole sua hash aqui




Passo 7 - Criação o ACIONADOR para usuários NÃO logados


Agora iremos definir o acionador da TAG para usuários não logados. 


Na configuração do acionador, marque a opção Outros > Evento personalizado




Agora, em Nome do evento, digite "profile". Dê um nome para o seu acionador e salve-o. 



Vincule o Acionador criado à sua TAG e salve-a. 


Passo 7 - Criação da TAG de finalização do Abandono quando o cliente efetua a compra


Por fim, a última TAG a ser criada servirá para informar ao nosso sistema quando o cliente concluir a compra em seu site. Desta maneira, não há mais a necessidade de enviar o email de abandono de carrinho, por isso essa tag é muito importante ser configurada. 


Vamos agora criar uma nova TAG no Google Tag Manager, no tipo de TAG marque a opção HTML personalizado. Agora, copie e cole o conteúdo abaixo, alterando os locais indicados com as informações coletadas no passo 3


<script>

  _dAutomationGtmCloseTimer("Cole seu site aqui", "Cole sua hash aqui");

  </script>



Lembre-se de substituir as informações no código acima: 

  • Cole seu site aqui
  • Cole sua hash aqui


Passo 8 - Criação o ACIONADOR para finalizar a automação de abandono


Agora iremos definir o acionador da TAG para finalizar a automação de abandono.


Em acionado selecione a opção Evento personalizado e em nome do evento informe "orderPlaced"





Agora basta publicar as novas tags e acompanhar em sua conta da Dinamize os novos envios de abandono de carrinho. Recomendamos que após realizar a publicação das tags, faça os testes simulando uma compra com usuário logado e também em aba anônima com um usuário deslogado diferente do primeiro teste.