Como instalar manualmente o Klaviyo.js para lojas da Shopify

O que você vai aprender

Saiba como instalar manualmente o snippet de rastreamento Active on Site da Klaviyo, também conhecido como JavaScript no local da Klaviyo ou Klaviyo.js, em sua loja da Shopify. O senhor só deve fazer isso se tiver um tráfego muito alto na Web ou se o seu site tiver um tempo de carregamento lento por qualquer outro motivo (embora o Klaviyo tenhamelhorado recentemente os tempos de carregamento e, portanto, pode não ser a causa). Caso contrário, recomendamos que o senhor instale o Klaviyo.js pelosite , ativando a incorporação do aplicativo Shopify do Klaviyo.

Antes de começar

Se o senhor optar por instalar manualmente o Klaviyo.js e o tiver habilitado anteriormente por meio da incorporação do aplicativo Klaviyo, será necessário primeiro desativar a incorporação do aplicativo nas configurações do tema da Shopify.

Instale o Klaviyo.js em sua loja da Shopify

1. Copie o trecho de código abaixo:

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

2. No snippet de código, certifique-se de substituir PUBLIC_API_KEY por sua chave pública de seis dígitos Klaviyo de API.
3. Se tiver ativado as contas de clientes para sua loja, adicione um script extra para identificar seus clientes com o e-mail que eles usam para fazer login na loja. O conjunto completo de scripts será parecido com o seguinte:

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
   <script type="text/javascript"> //Inicialize 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]=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"> 
    //cliente accounts
   var Klaviyo = window.Klaviyo || [];
   if ("{{ customer.email }}" ) {Klaviyo.identify({"$email" : "{{ customer.email }}"})};
   </script>
   

4. Em seu Shopify Admin, clique em Loja virtual > Themes. No menu suspenso, clique em Edit Code (Editar código).
   
5. Procure os arquivos aos quais deseja adicionar o snippet e clique para abri-lo no editor. O senhor pode adicionar o snippet a qualquer modelo de página em que queira ativar os formulários e o rastreamento do Klaviyo nas páginas correspondentes. 
6. Role até a parte inferior do arquivo e cole seu snippet abaixo do outro código.
   
7. Clique em Salvar.

Teste o rastreamento do Active on Site

Para testar se o rastreamento do Active on Site está configurado corretamente, siga estas etapas:

1. Navegue até seu site.
2. Em sua página inicial, adicione o seguinte ao final do URL, substituindo example@gmail.com com seu endereço de e-mail:
   ?utm_email=example@gmail.com
   
   
3. Recarregar a página.
4. Pesquise seu endereço de e-mail no Klaviyo.
   

O senhor verá que foi criado um perfil Klaviyo para o senhor (se ainda não existir um) e que essa atividade foi rastreada no seu feed de atividades.

Agora que o senhor instalou o Klaviyo.js, o senhor poderá utilizar o rastreamento Active on Site, os formulários de inscrição do Klaviyo e muito mais. 

Recursos adicionais

• Primeiros passos com a Shopify
• Como começar a usar o rastreamento no local da Klaviyo
• Introdução aos formulários de inscrição