Como instalar manualmente o Klaviyo.js para lojas Shopify

O que você vai aprender

Saiba como instalar manualmente o snippet de rastreamento Active on Site da Klaviyo, também conhecido como JavaScript onsite da Klaviyo ou Klaviyo.js, na sua loja Shopify. Você só deve fazer isso se tiver um tráfego na web muito alto ou se seu site estiver com tempo de carregamento lento por qualquer outro motivo (embora a Klaviyo tenha melhorado os tempos de carregamento recentemente e, portanto, talvez não seja a causa). Caso contrário, recomendamos que você instale o Klaviyo.js ativando a incorporação do aplicativo Shopify da Klaviyo.

Antes de começar

Se você optar por instalar o Klaviyo.js manualmente e antes ele estava ativado pela incorporação do app da Klaviyo, primeiro você precisa desativar a incorporação do app nas configurações de tema da Shopify.

Instale o Klaviyo.js na sua loja Shopify

1. Copie o snippet de código abaixo:

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

1. No snippet de código, substitua PUBLIC_API_KEY pela sua chave de API pública da Klaviyo de seis dígitos.
2. Se você tiver ativado conta de clientes para sua loja, adicione um script extra para identificar seus clientes pelo e-mail que eles usam para fazer login na sua loja. O conjunto completo de scripts ficará assim:

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

1. No seu Administrador da Shopify, clique em Loja virtual > Temas. No menu suspenso, clique em Editar código.
   

2. Pesquise os arquivos aos quais você quer adicionar o snippet e clique para abri-los no editor. Você pode adicionar o snippet a qualquer modelo de página em que queira habilitar os formulários e o rastreamento da Klaviyo nas páginas correspondentes.
3. Role até a parte inferior do arquivo e cole seu snippet abaixo do outro código.
   

4. Clique em Save.

Teste seu rastreamento com atividade no site

Para testar se o rastreamento com atividade no site está configurado corretamente, siga estas etapas:

1. Acesse seu site.
2. Na página inicial, adicione o seguinte trecho ao final da URL, substituindo example@gmail.com pelo seu endereço de e-mail:
   ?utm_email=example@gmail.com

3. Recarregue a página.
4. Pesquise 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 essa atividade foi rastreada no seu feed de atividades.

Agora que você instalou o Klaviyo.js, você poderá usar o rastreamento com atividade no site, os formulário de registro da Klaviyo e muito mais.

Recursos adicionais