Como criar um evento "Adicionado ao Carrinho" para BigCommerce

O que você vai aprender

Saiba como criar um evento Adicionado ao carrinho para a BigCommerce que rastreia quando um cliente adiciona um item ao carrinho e pode disparar um fluxo de carrinho abandonado. Os eventos Adicionado ao carrinho não são rastreados automaticamente quando você integra com a BigCommerce; primeiro, é necessário adicionar (e, possivelmente, modificar) um snippet de JavaScript (incluído neste guia) nos arquivos do tema da BigCommerce.

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

Antes de começar

O evento Added to Cart é rastreado apenas para usuários que já foram identificados por cookies pela Klaviyo.

Você já deve ter o rastreamento de 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 com a BigCommerce, e as instruções podem ser encontradas no nosso artigo de integração.

Adicionar o snippet

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

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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]=arguments[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">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. Em seguida, verifique se você precisa modificar seu snippet. Para fazer isso, você precisará verificar o ID do botão "Adicionar ao carrinho" no seu site e ver se ele corresponde à variável "Adicionar ao carrinho" destacada no snippet abaixo, cujo padrão é form-action-addToCart.
   

2. Para verificar o ID do botão, abra uma das páginas de produto do seu site, clique com o botão direito do mouse no botão "Adicionar ao carrinho" e selecione Inspecionar.
   

3. O console será aberto, mostrando o código-fonte do botão “Adicionar ao carrinho”. A imagem a seguir mostra a ID do botão "Adicionar ao carrinho" destacada no console.
   

4. O ID do botão na página mostrada aqui corresponde a form-action-addToCart, então não é preciso fazer nenhuma alteração.
   • Se o ID do botão "Adicionar ao carrinho" no seu site não for form-action-addToCart, você precisará alterar o texto da variável dentro das aspas para corresponder ao ID do botão
5. Se o código-fonte não estiver mostrando um ID do botão, pule para a próxima seção e aprenda a usar um snippet alternativo com notação de classe em vez de notação de botão.
6. Quando terminar, salve seu arquivo product.html.

Você terminou de adicionar o snippet e agora vai rastrear o evento Added to Cart.

Snippet alternativo para o botão "Adicionar ao carrinho" 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 botões de "Adicionar ao carrinho".

Se o botão “Adicionar ao carrinho” não tiver um ID de botão (que você pode determinar seguindo as etapas na seção anterior) e, em vez disso, usar uma notação de classe, você deve usar o snippet de código alternativo abaixo para ativar o evento Adicionado ao carrinho.

1. Se o botão for definido pela notação de classe, cole o seguinte snippet alternativo no final do arquivo product.html:

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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]=arguments[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">
//Viewed Product
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>

1. Provavelmente, será necessário modificar esse código com o nome da sua classe. Compare o nome da classe do seu botão entre aspas, destacado no exemplo a seguir, com o conteúdo entre parênteses após getElementsByClassName no snippet 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 se chama add-to-cart.
   
   

• Se esses dois não corresponderem, altere o snippet de código para refletir o nome da classe do seu botão.

2. Por exemplo, o snippet de código abaixo foi modificado com o valor de classname btn product-form_cart-submit btn--secondary-accent entre aspas duplas.
   

3. Salve seu arquivo product.html

Depois de salvar, você terá terminado de adicionar o snippet e já poderá rastrear o evento Added to Cart.

Solução de problemas do snippet “Adicionado ao carrinho”

Depois de adicionar o snippet, ele deve monitorar o botão "Adicionar ao carrinho" e rastrear um evento Adicionado ao carrinho 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 adiciona ao carrinho vai acionar um novo evento. Você pode visualizar esses eventos ao:

1. Acesse Análises > Métricas na Klaviyo
2. Procurando pelo evento
3. Clicar em Feed de atividades
   
   

Se você não vir eventos Adicionado ao carrinho na sua conta, tente o seguinte:

• Verifique se o seu Klaviyo.js (também conhecido como snippet com atividade no site) está funcionando, o que é necessário para que Adicionado ao carrinho funcione corretamente. Isso deve ter sido adicionado ao seu site automaticamente quando você fez a integração com a Klaviyo, mas você pode verificar se está funcionando seguindo as etapas na seção de confirmação da instalação do rastreamento no site do nosso artigo de integração do BigCommerce.
• Verifique se o rastreamento de Viewed Product está funcionando, o que também é necessário para que Added to Cart funcione corretamente. Esse snippet é adicionado manualmente, e você pode aprender como adicioná-lo e testá-lo na seção Viewed Product do nosso artigo de integrações.

Se você ainda estiver encontrando problemas com seu snippet Adicionado ao Carrinho, isso pode ser devido a um problema ao identificar o botão “Adicionar ao carrinho”. Neste caso, entre em contato com o suporte da Klaviyo.

O fluxo de carrinho abandonado "Added to Cart"

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

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

Para começar a usar um fluxo de carrinho abandonado com o evento Added to Cart, recomendamos usar o fluxo pré-criado disponível na Biblioteca de fluxos do Klaviyo, que já tem o filtro de fluxo adequado configurado. Esse fluxo tende a segmentar compradores em potencial mais casuais, que ainda não iniciaram o checkout.

O fluxo de carrinho abandonado acionado pelo evento Added to Cart pode ser encontrado na seção de meta "Impedir vendas perdidas".

Se você implementou o snippet Added to Cart do BigCommerce, este fluxo estará pronto para uso, com todos os filtros recomendados e o conteúdo dinâmico de e-mail prontos para impulsionar e-mails personalizados de acompanhamento do carrinho.

Você usa o Buy with Prime da Amazon?

Se estiver usando o Buy with Prime para cobrança e processamento de qualquer produto da sua loja, siga os seguintes passos:

• Integre o Buy with Prime com a Klaviyo para trazer os dados para sua conta Klaviyo.
• Para o fluxo de carrinho abandonado disparado por “Adicionado ao Carrinho”, inclua os seguintes filtros para excluir clientes que iniciaram o checkout ou fizeram compras via Buy with Prime:
  
  • Checkout Iniciado (Buy with Prime) zero vezes desde o início desse fluxo E
  • Não fez nenhum pedido (Buy with Prime) desde que iniciou este fluxo.

Recursos adicionais