Como adicionar o rastreamento onsite da Klaviyo usando o Gerente de Tag do Google

O que você vai aprender

Aprenda a adicionar snippets de rastreamento no site da Klaviyo ao seu site usando o Gerenciador de tags do Google. Alguns proprietários de sites usam o Gerenciador de Tags do Google como um ponto único para gerenciar todos os snippets da web de terceiros que precisam adicionar ao site. O rastreamento no site da Klaviyo se enquadra nessa categoria e pode ser adicionado e gerenciado pelo Gerenciador de Tags do Google.

Antes de começar

Configurar o Google Tag Gerente

Se você já criou uma conta do Google Tag Manager, pode pular estas etapas e ir para a seção sobre criar uma tag.
1. Crie uma conta do Google Tag Manager.
2. Adicione os scripts de instalação ao seu site.

Se você está começando a usar o Google Tag Manager, consulte a documentação deles 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 Com atividade no site da Klaviyo. Recomendamos criar um acionador separado para o rastreamento Com atividade no site e Produto visualizado. Isso acontece porque o rastreamento Produto visualizado só será acionado nas páginas de produtos, enquanto o rastreamento Com atividade no site deve ser acionado em todas as páginas do seu site.
2. Selecione HTML personalizado como o tipo de tag.

3. Para localizar seu snippet Com atividade no site na Klaviyo, clique no menu da sua conta e selecione Integrações.
4. Depois, clique no botão Configurar rastreamento web no canto superior direito.

6. No Google Tag Manager, cole o snippet da Klaviyo com atividade no site na caixa de HTML.

7. Configure seu gatilho para disparar em uma visualização de página para todas as páginas. Isso garante que seu snippet Active on Site será acionado sempre que os clientes visualizarem uma página no seu site.

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

Você pode adicionar seu snippet de Produto visualizado usando o mesmo método. Modifique o acionador para que ele seja disparado apenas em páginas que incluam seus produtos. Em alguns sites, isso pode ser feito limitando o acionador para que ele seja disparado apenas em páginas em que o URL inclui a palavra "product".

Teste seu rastreamento no site

1. Acesse seu site.
2. Adicione o seguinte ao final do URL:

?utm_email=klaviyogreen@gmail.com

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

3. Depois, na sua conta da Klaviyo, navegue até Painel > Feed de atividade. Se o seu rastreamento no site estiver instalado corretamente, você verá um novo evento Com atividade no site no topo do seu feed de atividade, referente ao e-mail que você inseriu no parâmetro de URL acima.

Se você estiver com dificuldades para fazer seu evento Produto visualizado disparar, verifique se suas tags estão configuradas para disparar em uma ordem específica. Você sempre deve fazer seu snippet com atividade no site disparar antes do seu snippet Produto visualizado.

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

Como usar o Google Tag Manager na Shopify

No Shopify, em vez de usar o Gerenciador de tags do Google, recomendamos que você ative o rastreamento no site do Klaviyo por meio da incorporação do app do Klaviyo no Shopify. A incorporação do app permite o rastreamento de com atividade no site e Produto visualizado, desde que esteja ativada e que a configuração de Produto visualizado esteja marcada na página de configurações de integrações. Nossa integração com o Shopify também permite Pesquisa enviada, Coleção visualizada e Adicionado ao carrinho pela configuração Rastrear eventos comportamentais.

Se você quiser adicionar rastreamento no site pelo Gerenciador de tags do Google, desative primeiro a incorporação do app. Em seguida, use o snippet abaixo.

"Coleções" não estão disponíveis pela API AJAX do Shopify, então as tag de produtos do Shopify (tag) são capturadas no snippet abaixo.

<script type="text/javascript"> 
//Initialize the Klaviyo object 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 type="text/javascript">
//Viewed Product
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({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Recursos adicionais