Como criar manualmente um evento "Added to Cart" para a Shopify

O que você vai aprender

Saiba como criar manualmente um evento Added to Cart na Shopify para rastrear quando um cliente adiciona um item a um carrinho. Esse evento pode ser usado para disparar um fluxo de carrinho abandonado. 

O evento Added to Cart é diferente do evento Checkout Started da Klaviyo. Checkout Started é acionado depois que um cliente adiciona um ou vários itens ao carrinho, insere o e-mail durante o processo de finalização de compra e prossegue para finalizar a compra. Isso acontece mais adiante no funil, enquanto Added to Cart é acionado assim que o cliente adiciona um item ao carrinho. 

Antes de começar

• Leia nosso artigo Introdução à Shopify para instruções passo a passo sobre a integração antes de continuar a leitura deste artigo.
• Certifique-se de ter ativado o rastreamento da Klaviyo no site (incluindo o rastreamento da métrica Viewed Product) para que o evento Added to Cart funcione corretamente.
• Observe que o evento Added to Cart rastreia apenas os usuários que já foram identificados por cookies pela Klaviyo.

Crie o evento “Added to Cart”

Há três etapas para criar o evento Added to Cart: 

1. Escolha onde colocar o snippet de código
2. Adicione o snippet à sua loja online
3. Teste o snippet de código

Onde devo colar o snippet?

Certifique-se de colar o snippet na página padrão do produto e em qualquer outra página de produtos que você tenha.

Se sua loja tiver blocos de liquid personalizados, você deverá usar um para o snippet 

1. Na Shopify, navegue até Loja virtual > Temas.
2. Encontre seu tema e clique em Personalizar.
3. Na parte superior da página, clique no menu suspenso Página inicial.
4. Selecione Produtos > Produto padrão para ir para sua página de produto padrão.
5. Clique em Adicionar seção na barra lateral esquerda e selecione Liquid personalizado.
6. Cole o snippet fornecido na caixa.
7. Clique em Salvar no canto superior direito.
8. Na barra lateral esquerda, seu novo bloco Liquid personalizado para Adicionou ao carrinho deve aparecer automaticamente abaixo das outras seções da página.
   • Se o bloco Added to Cart precisar ser deslocado, passe o mouse sobre o bloco e clique nos 6 pontos para arrastá-lo para baixo das outras seções
     
     

Se sua loja não tiver blocos de liquid personalizados, você deve colocar o snippet em seu arquivo theme.liquid

1. Na Shopify, navegue até Loja virtual > Temas.
2. Encontre seu tema e clique em Personalizar.
3. Clique nos três pontos na parte superior e selecione Editar código.
4. Abra o arquivo theme.liquid.
5. Cole o snippet fornecido após todos os outros códigos, antes da tag </body>.
   
6. Acima do snippet, adicione a seguinte tag de abertura: {% if product %}
   
7. Logo após o snippet, adicione a seguinte tag de fechamento: {% endif %}
8. Seu arquivo deve ficar assim:
   
9. Clique em Salvar.

Adicione o snippet ao seu site

O snippet Added to Cart a seguir deve funcionar para a maioria das lojas da Shopify.

Adicione o snippet abaixo à sua loja Shopify no local que determinou acima.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   fetch(`${window.location.origin}/cart.js`)
   .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    if (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
      return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  for (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

Quando acabar, teste o evento usando as orientações da próxima seção.

Teste o evento “Added to Cart”

É importante observar que a Klaviyo rastreia apenas os “navegadores conhecidos”, ou aqueles que foram identificados por cookies (quando alguém clica em um e-mail, preenche um formulário etc.). Por esse motivo, os eventos Added to Cart podem não aparecer em sua conta tão rapidamente quanto você espera. Para saber mais sobre quem a plataforma Klaviyo rastreia, consulte nosso artigo sobre rastreamento no site. 

Para testar o evento Added to Cart, você precisa identificar manualmente seu endereço de e-mail com cookies. Siga estas etapas:

1. Navegue até seu site.
2. Em sua página inicial, adicione o seguinte ao final da URL, substituindo testing.email@gmail.com pelo seu endereço de e-mail:
   ?utm_email=testing.email@gmail.com
   
   
3. Recarregue a página.
4. Navegue até a página de um produto em seu site e clique no botão Adicionar ao carrinho.
5. Busque seu endereço de e-mail na plataforma Klaviyo.
   

Você verá que foi criado um perfil da Klaviyo para você (se ainda não existir um) e que esse evento Added to Cart foi registrado no seu feed de atividades.

Você está com problemas para rastrear Added to Cart com o snippet fornecido?

Se estiver tendo problemas para rastrear Added to Cart com o snippet fornecido, você poderá tentar os dois snippets adicionais abaixo, que chamaremos de Snippet 2 e Snippet 3. Antes de testar um novo snippet, certifique-se de primeiro remover o que não funcionou.

Determine qual snippet de backup deve ser testado

Sua loja usa um ID de botão para definir o botão Adicionar ao carrinho? Se a resposta for sim,‌tente o Snippet 2. Se, em vez disso, seu botão Adicionar ao carrinho for definido por notação de classe, você deve usar o Snippet 3. Veja como descobrir se sua loja usa um ID de botão ou notação de classe:

1. 1. Abra uma das páginas de produtos de seu site. 
   2. 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 seu botão “Adicionar ao carrinho” na aba Elementos do console.
   4. Na aba Elementos, seu código pode estar assim:
      
   5. Observe que este botão “Adicionar ao carrinho” não tem um ID de botão (que incluiria algo como id = "button_ID_name). Em vez disso, ele é mencionado por uma notação de classe (class= "btn product-form_cart-submit btn-secondary-accent).

Snippet 2

Se o seu botão Adicionar ao carrinho for definido por um ID de botão, adicione o snippet abaixo à sua loja da Shopify no local que determinou na seção “Onde devo colocar o snippet?”, juntamente com as tags necessárias.

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

Este snippet provavelmente precisará ser modificado, pois a variável Add to Cart no snippet precisa corresponder ao ID do botão usado em seu site.

A variável Add to Cart, cujo nome padrão é AddToCart, está destacada no snippet abaixo:

Para verificar o ID do botão, siga as mesmas etapas que usou para verificar a presença de um ID de botão em seu site: 

1. Abra uma das páginas de produto de seu site.
2. 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 seu botão “Adicionar ao carrinho”. A imagem a seguir mostra o ID do botão “Adicionar ao carrinho” destacado no console.
   
   O ID do botão na página mostrada aqui (addToCart-product-template) é diferente da variável no snippet padrão (AddToCart). 
4. Se não corresponderem, modifique o snippet para que corresponda ao ID do seu botão. O snippet modificado do nosso exemplo fica assim:
   

Snippet 3

Se o seu botão Adicionar ao carrinho for definido por notação de classe, adicione o snippet abaixo à sua loja da Shopify no local que determinou na seção “Onde devo colocar o snippet?”, juntamente com as tags necessárias.

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

Este snippet provavelmente precisará ser modificado, pois a variável Add to Cart no snippet precisa corresponder à classe usada em seu site.

1. Abra uma das páginas de produto de seu site.
2. 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 seu botão “Adicionar ao carrinho”. A imagem a seguir mostra a classe do botão “Adicionar ao carrinho“ destacada no console.
   
4. Compare o código do botão entre aspas, destacado no exemplo acima, com o conteúdo entre parênteses após getElementsByClassName no snippet de código acima. Por exemplo, a classe listada na captura de tela é btn product-form_cart-submit btn--secondary-accent e a variável listada no snippet é add-to-cart.
5. Se não corresponderem, modifique o snippet para que corresponda à classe do seu botão. O snippet modificado do nosso exemplo fica assim:
   

Se você estiver tendo problemas para rastrear Added to Cart depois de tentar estas diferentes opções, talvez seja um problema de identificação do botão Adicionar ao carrinho. Neste caso, entre em contato com o suporte da Klaviyo.

Próxima etapa: ative o fluxo de carrinho abandonado

O fluxo padrão de carrinho abandonado da Klaviyo é disparado pelo evento Started Checkout, enquanto o fluxo de carrinho abandonado disparado por Added to Cart tem como alvo compradores mais casuais que ainda não iniciaram o checkout.

Para habilitar este fluxo, recomendamos usar o fluxo pré-criado disponível na biblioteca de fluxos da Klaviyo:

1. Navegue até a biblioteca de fluxos da plataforma Klaviyo.
2. Clique na seção “Prevenir perdas de vendas”.
3. Selecione um fluxo Disparador Added to Cart Trigger, Lembrete de carrinho abandonado. Há duas opções: somente e-mail ou e-mail e SMS.
   
4. Se você tiver criado o evento Added to Cart, este fluxo estará pronto para uso com todos os filtros recomendados e o conteúdo dinâmico de e-mail configurado para enviar mensagens personalizadas de acompanhamento do carrinho.

Você usa o Buy with Prime da Amazon?

Se você estiver usando o Buy with Prime para efetuar o pagamento e o processamento de qualquer produto em sua loja, siga estes passos:

• Integre o Buy with Prime com a plataforma Klaviyo para trazer os dados do Buy with Prime para sua conta Klaviyo.
• Para o seu fluxo de carrinho abandonado disparado por “Added to Cart”, adicione os seguintes filtros de fluxo para excluir os clientes que iniciaram o checkout ou fizeram compras via Buy with Prime do recebimento de mensagens incorretas:
  
  • Checkout Iniciado (Buy with Prime) zero vezes desde o início desse fluxo E
  • Placed Order (Buy with Prime) zero vezes desde o início desse fluxo.

Resultado 

Você criou e testou um evento Added to Cart da Shopify e ativou um fluxo de carrinho abandonado disparado por Added to Cart. 

Recursos adicionais

• Introdução ao fluxo de carrinho abandonado
• Referência de dados da Shopify
• Solução de problemas de sua integração com a Shopify