Como criar um evento "Adicionado ao carrinho" para BigCommerce

O que você vai aprender

Saiba como criar um evento Added to Cart para o BigCommerce que rastreia quando um cliente adiciona um item ao carrinho e pode acionar um fluxo de carrinho abandonado. Os eventos Added to Cart não são rastreados automaticamente quando o usuário faz a integração com o BigCommerce; é necessário primeiro adicionar (e potencialmente modificar) um snippet JavaScript (incluído neste guia) aos arquivos de tema do BigCommerce.

• O senhor não precisa criar o evento Added to Cart para enviar um fluxo de carrinho abandonado; o fluxo de carrinho abandonado Added to Cart é separado do fluxo de carrinho abandonado padrão, que é acionado por Started Checkout. 
• A integração do BigCommerce com o Klaviyo já rastreia um evento Started Checkout quando um cliente insere seu e-mail durante o processo de checkout após adicionar itens ao carrinho. 

Antes de começar

O evento Added to Cart (Adicionado ao carrinho ) só é rastreado para os usuários previamente cookied pela Klaviyo. 

O senhor já deve ter o rastreamento do Viewed Product instalado para que o evento Added to Cart funcione corretamente. Normalmente, os clientes da Klaviyo instalam isso durante o processo de integração do BigCommerce e as instruções podem ser encontradas em nosso artigo de integração. 

Adicione o snippet

1. Abra o administrador do BigCommerce e navegue até Storefront > My Themes.
2. Localize seu tema atual e clique no menu suspenso Advanced Settings (Configurações avançadas ).
3. Procure o arquivo product.html e clique nele para abri-lo.
4. Cole o snippet abaixo diretamente abaixo do snippet do Klaviyo Viewed Product.

   <script text="text/javascript"> 
   //Inicializar o objeto Klaviyo imediatamente no carregamento da página
   !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=argumentos[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
   <script text="text/javascript">
   /Adicionado ao carrinho
   var klaviyo = window.klaviyo || [];
   document.getElementById("form-action-addToCart").addEventListener('click',function (){
      klaviyo.track("Added to Cart", item);
   });
   </script>

5. Em seguida, verifique se o senhor precisa modificar o snippet. Para fazer isso, o senhor precisará verificar o ID do botão "Add to Cart" em seu site e ver se ele corresponde à variável "Add to Cart" destacada no snippet abaixo, cujo padrão é form-action-addToCart.
   
6. Para verificar o ID do botão, abra uma das páginas de produtos do site, clique com o botão direito do mouse no botão "Add to Cart" e selecione Inspect (Inspecionar).
   
7. O console será aberto, mostrando o código-fonte do botão "Add to Cart". A imagem a seguir mostra o ID do botão "Add to Cart" destacado no console.
   
8. O ID do botão na página mostrada aqui corresponde a form-action-addToCart, portanto, nenhuma alteração precisa ser feita.
   • Se o ID do botão "Add to Cart" em seu site não for form-action-addToCart, será necessário alterar o texto da variável entre aspas para corresponder ao ID do botão
9. Se o seu código-fonte não estiver mostrando um ID de botão, pule para a próxima seção e saiba como usar um snippet alternativo com notação de classe em vez de notação de botão. 
10. Quando terminar, salve o arquivo product.html. 

O senhor terminou de adicionar o snippet e agora acompanhará o evento Added to Cart. 

Snippet alternativo para o botão "Add to Cart" sem um ID de botão

Por motivos de estilo, alguns sites usam uma notação de classe em vez de um ID de botão para os botões "Add to Cart".

Se o seu botão "Add to Cart" não tiver um ID de botão (que pode ser determinado seguindo as etapas da seção anterior) e, em vez disso, usar uma notação de classe, use o trecho de código alternativo abaixo para ativar o evento Added to Cart. 

1. Se o botão for definido por notação de classe, cole o seguinte trecho alternativo na parte inferior do arquivo product.html:

   <script text="text/javascript"> 
   //Inicializar o objeto Klaviyo imediatamente no carregamento da página
   !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=argumentos[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
   <script text="text/javascript">
   //Produto visualizado
   var klaviyo = window.klaviyo || [];
   var classname = document.getElementsByClassName("add-to-cart");
   var addToCart = function() {
      klaviyo.track("Added to Cart", item);
   }; 
   for (var i = 0; i < classname.length; i++) {
      classname[i].addEventListener('click', addToCart, false);
   }
   </script>
   

2. Esse código provavelmente precisará ser modificado com o nome de sua classe. Compare o nome da classe do botão entre as aspas, destacado no exemplo a seguir, com o conteúdo entre parênteses após getElementsByClassName no trecho de código acima. Por exemplo, o nome da classe na captura de tela é btn product-form_cart-submit btn--secondary-accent e a classe no snippet é chamada add-to-cart.
   
   
   • Se esses dois não corresponderem, altere o trecho de código para refletir o nome da classe do seu botão.
3. Por exemplo, o trecho de código abaixo foi modificado com o valor classname btn product-form_cart-submit btn--secondary-accent cercado por aspas duplas.
   
4. Salve o arquivo product.html

Depois de salvar, o senhor terminou de adicionar o snippet e agora pode rastrear o evento Added to Cart. 

Solução de problemas do snippet "Added to Cart"

Depois que o senhor adicionar o snippet, ele deverá observar o botão "Add to Cart'' e rastrear um evento Added to Cart sempre que um visitante com cookie clicar nesse botão. 

Esse evento funciona de forma semelhante ao evento Viewed Product. Cada item que alguém adicionar ao carrinho acionará um novo evento. O senhor pode visualizar esses eventos em:

1. Navegando para o Analytics > Metrics in Klaviyo
2. Pesquisar o evento
3. Clicar em Feed de atividades
   
   

Se o senhor não vir eventos Added to Cart em sua conta, tente o seguinte:

• Verifique se o Klaviyo.js (também conhecido como o snippet Active on Site) está funcionando, o que é necessário para que o Added to Cart funcione corretamente. Isso deve ter sido adicionado ao seu site automaticamente quando você se integrou ao Klaviyo, mas é possível verificar se está funcionando seguindo as etapas na seção de confirmação da instalação do rastreamento no local do nosso artigo sobre integração com o BigCommerce.
• Verifique se o rastreamento do produto visualizado está funcionando, o que também é necessário para que Added to Cart funcione corretamente. Esse snippet é adicionado manualmente e o senhor pode saber como adicioná-lo e testá-lo na seção Viewed Product do nosso artigo de integração. 

O "Added to Cart" fluxo de carrinho abandonado

Ao criar um fluxo de carrinho abandonado (usando Added to Cart ou Started Checkout), o senhor pode usar o Klaviyo SMS além do e-mail. Por motivos de conformidade, certifique-se de enviar apenas um SMS em seu fluxo e, se estiver usando vários tipos de fluxos de carrinho abandonado, certifique-se de usar o SMS apenas em um deles. 

Na seção Essentials da biblioteca, o senhor encontrará o fluxo padrão de lembrete de carrinho abandonado. Esse fluxo é acionado pelo evento Started Checkout.

Para começar a criar um fluxo de carrinho abandonado usando o evento Added to Cart, recomendamos o uso do fluxo pré-construído disponível na Biblioteca de fluxos da Klaviyo, que já tem os filtros de fluxo adequados configurados. Esse fluxo tende a ter como alvo compradores potenciais mais casuais que ainda não iniciaram o checkout.

O fluxo de carrinhos abandonados acionado pelo evento Added to Cart pode ser encontrado na seção "Prevent lost sales" goal. 

Se o senhor implementou o snippet Added to Cart do BigCommerce, esse fluxo estará pronto para ser usado com todos os filtros recomendados e o conteúdo dinâmico de e-mail pronto para gerar e-mails personalizados de acompanhamento de carrinho.

Você usa o Buy with Prime da Amazon?

Se o senhor estiver usando o Buy with Prime para efetuar o pagamento e o atendimento de qualquer um dos produtos de sua loja, deverá fazê-lo:

• Integre o Buy with Prime com o Klaviyo para trazer os dados do Buy with Prime para sua conta do Klaviyo.
• Para o seu fluxo "Added to Cart" abandonado, adicione os seguintes filtros de fluxo para excluir os clientes que iniciaram checkouts ou fizeram compras via Buy with Prime de receberem mensagens incorretas:
  
  • Iniciou o Checkout (Buy with Prime) zero vezes desde o início desse fluxo E
  • Pedido feito (Buy with Prime) zero vezes desde o início desse fluxo.

Recursos adicionais

• Criar um fluxo de carrinho abandonado
• Referência de dados do BigCommerce