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 manualmente o Klaviyo.js e antes o tinha ativado por meio da incorporação do app da Klaviyo, primeiro você precisa desativar a incorporação do app nas configurações do tema da Shopify e salvar a alteração.
Para colar esse código é preciso ter acesso ao HTML e à plataforma de e-commerce do seu site. Por isso, nossa equipe de suporte não consegue oferecer assistência prática. Se você não tem um desenvolvedor na sua equipe e não se sente seguro(a) para adicionar o código, considere entrar em contato com um parceiro da Klaviyo para obter ajuda.
Instale o Klaviyo.js na sua loja Shopify
- 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>- No snippet de código, substitua PUBLIC_API_KEY por sua chave de API pública da Klaviyo de 6 caracteres (ID do site).
- Se você ativou contas de cliente na sua loja, use o conjunto completo de scripts abaixo em vez do primeiro snippet para identificar clientes conectados pelo endereço de e-mail. Substitua PUBLIC_API_KEY nesta versão pela sua chave de API pública também:
<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>- Abra o editor de código do tema do Shopify seguindo as instruções do Shopify para editar o código do tema.
- Abra o modelo ou a seção Liquid das páginas em que você quer formulários e rastreamento do Klaviyo. Se uma página usa um modelo JSON, adicione o snippet a uma seção Liquid referenciada por esse modelo, e não ao arquivo JSON. Para mais detalhes, consulte a documentação do modelo JSON da Shopify.
- Cole seu snippet abaixo do HTML existente no arquivo Liquid, fora de quaisquer blocos
{% schema %},{% javascript %}ou{% stylesheet %}. Inclua o Klaviyo.js apenas uma vez em cada página.
- 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:
- Acesse uma página na sua loja onde você instalou o snippet. Se a sua loja exigir consentimento de rastreamento para a sua visita, forneça-o antes de testar.
- Nessa página, adicione o seguinte ao final da URL, substituindo example@gmail.com pelo seu endereço de e-mail:
?utm_email=example@gmail.com
Se a URL já contiver um ponto de interrogação (?), acrescente&utm_email=example@gmail.comem vez disso, usando seu endereço de e-mail.
- Recarregue a página.
- Pesquise seu endereço de e-mail na Klaviyo e abra seu perfil.
Você deve ver um perfil do Klaviyo para seu endereço de e-mail (criado caso ainda não existisse). No Registro de atividades, procure um evento Com atividade no site referente à sua visita de teste.
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.
Dependendo das configurações de privacidade do cliente, a Klaviyo pode não rastrear eventos de visitantes da loja da Shopify na UE, no EEE, no Reino Unido e na Suíça, a menos que eles tenham fornecido consentimento.
Recursos adicionais
- Introdução à Shopify
Como integrar a Klaviyo à Shopify e transferir o perfil do cliente e dados do pedido para criar mensagens mais segmentadas com a Klaviyo. Além disso, aprenda a habilitar o rastreamento no site e os formulários de registro da Klaviyo e a sincronizar os dados da Klaviyo com a Shopify.
- Introdução ao recurso da Klaviyo de rastreamento no site
As diferentes opções de rastreamento no site oferecidas pela Klaviyo. Há dois tipos principais de rastreamento no site:
- Introdução aos formulários de registro
Saiba como criar e personalizar formulários de registro na Klaviyo para interagir com compradores, coletar e-mails e números de telefone e criar relacionamentos duradouros.