Como adicionar o rastreamento no local do Klaviyo usando o Google Tag Manager

O que você vai aprender

Saiba como adicionar os snippets de rastreamento no local do Klaviyo ao seu site usando o Google Tag Manager. Alguns proprietários de sites usam o Google Tag Manager como um ponto único para gerenciar todos os snippets da Web de terceiros que precisam adicionar ao site. O rastreamento no local do Klaviyo se enquadra nessa categoria e pode ser adicionado e gerenciado por meio do Google Tag Manager.

Antes de começar

Configuração do Google Tag Manager

Se já tiver criado uma conta no Google Tag Manager, pule estas etapas e vá para a seção sobre como criar uma tag.
1. Crie uma conta no Google Tag Manager.
2. Adicione os scripts de instalação ao seu site.

Se não estiver acostumado a usar o Google Tag Manager, consulte a documentação sobre como configurar uma conta e adicionar os scripts de instalação ao seu site.

Criar uma nova tag

1. No espaço de trabalho do seu site, crie um novo acionador para o rastreamento do Klaviyo Active on Site. Recomendamos a criação de um acionador separado para o rastreamento de Active on Site e Viewed Product. Isso ocorre porque o rastreamento de produtos visualizados só será acionado nas páginas dos produtos, enquanto o rastreamento ativo no site deve ser acionado em todas as páginas do site.
2. Selecione HTML personalizado como o tipo de tag.

3. Para localizar o snippet Active on Site no Klaviyo, clique no menu da sua conta e selecione Integrations (Integrações).
4. A partir daí, clique no botão Setup Web Tracking (Configurar rastreamento da Web ) no canto superior direito.


5. Copie o primeiro snippet. 

6. No Google Tag Manager, cole o snippet do Klaviyo Active on Site na caixa HTML.

7. Defina seu acionador para disparar em uma exibição de página para todas as páginas. Isso garante que o snippet Active on Site será acionado sempre que os clientes visualizarem uma página do seu site.

8. Salve sua nova tag. Isso conclui a adição do snippet de rastreamento Active on Site usando o Google Tag Manager.

O senhor pode adicionar seu snippet Viewed Product usando o mesmo método. Modifique o acionador para disparar somente em páginas que incluam seus produtos. Em alguns sites, isso pode ser feito limitando o acionador para disparar somente em páginas em que o URL inclua a palavra "product".

Teste seu rastreamento no local

1. Navegue até seu site.
2. Adicione o seguinte ao final do URL:

?utm_email=klaviyogreen@gmail.com

O senhor pode substituir "klaviyogreen@gmail.com" pelo seu próprio endereço de e-mail. Pressione enter para recarregar a página.

3. Em seguida, em sua conta Klaviyo, navegue até o Dashboard > Activity Feed. Se o rastreamento no local estiver instalado corretamente, o senhor verá um novo evento Active on Site (Ativo no local ) na parte superior do feed de atividades do e-mail que inseriu no parâmetro de URL acima.

Se o senhor tiver problemas para fazer com que o evento Viewed Product seja acionado, verifique se as tags estão configuradas para serem acionadas em uma ordem específica. O senhor sempre quer que o snippet Active on Site seja acionado antes do snippet Viewed Product.

Se o senhor receber um erro ao tentar salvar qualquer um dos snippets de rastreamento no Google Tag Manager, terá que colar os snippets diretamente no seu site.

Uso do Google Tag Manager na Shopify

Com o Shopify, em vez de usar o Gerenciador de tags do Google, o senhor é incentivado a ativar Klaviyo o rastreamento no local por meio Klaviyo do aplicativo incorporado em Shopify. A incorporação do aplicativo permite o rastreamento de Active on Site e Viewed Product, desde que esteja ativada e que a configuração Viewed Product esteja marcada na página de configurações de integração. Nossa integração com o Shopify também permite a Pesquisa enviada, Coleção visualizada e Adicionado ao carrinho por meio da configuração Rastrear eventos comportamentais.

Se, em vez disso, o senhor quiser adicionar rastreamento no local por meio do Google Tag Manager, certifique-se de desativar a incorporação do aplicativo primeiro. Em seguida, use o snippet abaixo.

"As coleções" não estão disponíveis por meio da API AJAX da Shopify, portanto, as tags de produto da Shopify (Tags) são capturadas no trecho abaixo.

<script type="text/javascript"> 
//Inicializar o objeto Klaviyo 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 type="text/javascript">
//Produto visualizado
var klaviyo = window.klaviyo || [];
product_handle = location.href.split( '/' ).pop().split( '?' )[0];
fetch('/products/'+product_handle+'.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Product", item);
  klaviyo.trackViewedItem({
    Título: item.Name,
    ItemId: item.ProductID,
    Tags: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// Se o senhor quiser adicionar também o snippet Added to Cart, coloque-o aqui sem as tags de script
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Recursos adicionais

• Como começar a usar o rastreamento no local da Klaviyo
• Como funciona o rastreamento de conversão de mensagem
• Guia para criar um fluxo de abandono de navegação