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

O que você vai aprender

Saiba como criar manualmente um evento Adicionado ao Carrinho na Shopify para rastrear quando um cliente adiciona um item ao carrinho e para disparar um fluxo de carrinho abandonado. 

O evento Adicionado ao Carrinho é diferente do evento Checkout Iniciado da Klaviyo. Checkout Iniciado é acionado quando um cliente adiciona itens ao carrinho, insere o e-mail durante o checkout e prossegue com a finalização da compra. Isso acontece mais adiante no funil. O evento Adicionado ao Carrinho acontece assim que o cliente adiciona um item ao carrinho. 

Antes de começar

• Confira nosso artigo Introdução à Shopify para saber tudo sobre a integração antes de ler este artigo.
• Para que o evento Adicionado ao Carrinho funcione corretamente, ative o rastreamento da Klaviyo no site (incluindo o rastreamento da métrica Produto Visualizado).
• O evento Adicionado ao Carrinho rastreia apenas os usuários que já foram identificados por cookies pela Klaviyo.

Crie o evento “Adicionado ao Carrinho”

Há três etapas para criar o evento Adicionado ao Carrinho: 

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

Onde devo colar o snippet?

Cole o snippet na página padrão de produtos e em qualquer outra página de produtos existentes.

Se sua loja tiver blocos Liquid personalizados, use um para o snippet 

1. Na Shopify, acesse Online Store > Themes.
2. Encontre seu tema e clique em Customize.
3. Na parte superior da página, clique no menu suspenso Home page.
4. Selecione Products > Default product para ir para sua página de produto padrão.
5. Clique em Add section na barra lateral esquerda e selecione Custom Liquid.
6. Cole o snippet fornecido na caixa.
7. Clique em Save no canto superior direito.
8. Na barra lateral esquerda, seu novo bloco Liquid personalizado para Adicionado ao Carrinho deve aparecer automaticamente abaixo das outras seções.
   • Se quiser mover o bloco Adicionado ao Carrinho, passe o mouse sobre ele e clique nos 6 pontos para arrastá-lo.
     
     

Se sua loja não tiver blocos Liquid personalizados, posicione o snippet em seu arquivo theme.liquid

1. Na Shopify, acesse Online Store > Themes.
2. Encontre seu tema e clique em Customize.
3. Clique nos três pontos na parte superior e selecione Edit code.
4. Abra o arquivo theme.liquid.
5. Cole o snippet fornecido após todos os outros códigos, antes de fechar com a tag </body>.
   
6. Acima do snippet, adicione a tag de abertura {% if product %}
   
7. Logo após o snippet, adicione a tag de fechamento {% endif %}
8. Seu arquivo deve ficar assim:
   
9. Clique em Save.

Adicione o snippet ao seu site

O snippet Adicionado ao Carrinho a seguir deve funcionar para a maioria das lojas da Shopify.

Adicione o snippet abaixo à sua loja Shopify no local definido 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 terminar, teste o evento usando as orientações da próxima seção.

Teste o evento “Adicionado ao Carrinho”

É importante destacar que a Klaviyo rastreia apenas os “navegadores conhecidos”, ou aqueles identificados por cookies (quando alguém clica em um e-mail, preenche um formulário, etc). Por isso, os eventos Adicionado ao Carrinho podem não aparecer em sua conta instantaneamente. Para entender quem a Klaviyo rastreia, consulte nosso artigo sobre rastreamento no site. 

Para testar o evento Adicionado ao Carrinho, é preciso identificar manualmente seu e-mail com cookies. Siga estas etapas:

1. Acesse seu site.
2. Na 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. Vá para 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 Klaviyo.
   

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

Não conseguiu rastrear "Adicionado ao Carrinho" com o snippet fornecido?

Se tiver problemas para rastrear Adicionado ao Carrinho com o snippet acima, tente usar os snippets abaixo, que chamaremos de Snippet 2 e Snippet 3. Antes de testar um novo snippet, remova aquele que não funcionou.

Determine qual snippet alternativo deve ser testado

Sua loja usa uma ID de botão para Adicionar ao carrinho? Se a resposta for sim, ‌use o Snippet 2. Se seu botão Adicionar ao carrinho for definido por notação de classe, use o Snippet 3. Para descobrir se sua loja usa uma ID de botão ou notação de classe:

1. 1. Abra uma das páginas de produtos do seu site. 
   2. Clique com o botão direito do mouse no botão “Adicionar ao carrinho” e selecione Inspect.
   3. O console será aberto, mostrando o código-fonte do seu botão “Adicionar ao carrinho” na aba Elements.
   4. Na aba Elements, seu código pode estar assim:
      
   5. Este botão “Adicionar ao carrinho” não tem uma ID (que incluiria algo como id = "button_ID_name); ele é indicado por uma notação de classe (class= "btn product-form_cart-submit btn-secondary-accent).

Snippet 2

Se seu botão Adicionar ao carrinho for definido por uma ID de botão, adicione o snippet abaixo à sua loja da Shopify, no local definido na seção “Onde devo posicionar 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>

Talvez este snippet precise ser modificado, pois a variável Add to Cart deve corresponder à ID do botão usado no seu site.

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

Para verificar a ID do botão, siga as mesmas etapas usadas para identificar a ID de botão: 

1. Abra uma das páginas de produto do seu site.
2. Clique com o botão direito do mouse em “Adicionar ao carrinho” e selecione Inspect.
3. O console será aberto, mostrando o código-fonte do seu botão “Adicionar ao carrinho”. A imagem a seguir mostra a ID do botão “Adicionar ao carrinho” destacada no console.
   
   A 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 à ID do seu botão. O snippet modificado do nosso exemplo fica assim:
   

Snippet 3

Se seu botão Adicionar ao carrinho for definido por notação de classe, adicione o snippet abaixo à sua loja da Shopify, no local definido na seção “Onde devo posicionar 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>

Talvez este snippet precise ser modificado, pois a variável Add to Cart deve corresponder à classe usada no seu site.

1. Abra uma das páginas de produto do seu site.
2. Clique com o botão direito do mouse em “Adicionar ao carrinho” e selecione Inspect.
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. 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 tiver problemas para rastrear Adicionado ao Carrinho com essas opções, pode haver um erro 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 Checkout Iniciado; o fluxo de carrinho abandonado disparado por Adicionado ao Carrinho tem como alvo clientes que ainda não iniciaram o checkout.

Para habilitar esse fluxo, você pode usar o modelo pré-definido disponível na biblioteca de fluxos da Klaviyo:

1. Vá até a biblioteca de fluxos da Klaviyo.
2. Clique na seção “Prevenir perdas de vendas”.
3. Selecione um fluxo Disparador Adicionado ao Carrinho - Lembrete de Carrinho Abandonado. Há duas opções: somente e-mail ou e-mail e SMS.
   
4. Se tiver criado o evento Adicionado ao Carrinho, o fluxo estará pronto para ser usado com todos os filtros recomendados e o conteúdo dinâmico de e-mail enviará mensagens personalizadas 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 migrar os dados entre as duas plataformas.
• 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
  • Pedido Realizado (Buy with Prime) zero vezes desde o início desse fluxo.

Resultado 

Você criou e testou um evento Adicionado ao Carrinho da Shopify e ativou um fluxo de carrinho abandonado disparado por Adicionado ao Carrinho. 

Recursos adicionais

• Introdução ao fluxo de carrinho abandonado
• Sobre os dados da Shopify
• Solução de problemas de integração com a Shopify