Cómo instalar manualmente Klaviyo.js para tiendas de Shopify

Objetivos del artículo

Aprende a instalar manualmente el fragmento de seguimiento Active on Site de Klaviyo, también conocido como el JavaScript en el sitio de Klaviyo o Klaviyo.js, en tu tienda Shopify. Solo deberías hacer esto si tienes un tráfico web muy alto o si tu sitio tiene tiempos de carga lentos por algún otro motivo (aunque Klaviyo recientemente mejoró los tiempos de carga, por lo que quizá no sea la causa). De lo contrario, se recomienda instalar Klaviyo.js habilitando la inserción de la app de Shopify de Klaviyo.

Antes de empezar

Si eliges instalar Klaviyo.js manualmente y antes lo tenías habilitado mediante el app embed de Klaviyo, primero debes deshabilitar el app embed en la configuración del tema de Shopify.

Instala Klaviyo.js en tu tienda de Shopify

1. Copia el fragmento de código a continuación:

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

1. En el fragmento de código, asegúrate de reemplazar PUBLIC_API_KEY por tu clave de API pública de Klaviyo de seis dígitos.
2. Si has habilitado Cuentas de clientes para tu tienda, agrega un script adicional para identificar a tus clientes con el correo electrónico que usan para iniciar sesión en tu tienda. El conjunto completo de scripts se verá como lo siguiente:

<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. Desde tu Administrador de Shopify, haz clic en Tienda en línea > Temas. En el menú desplegable, haz clic en Editar código.
   

2. Busca los archivos a los que quieres agregar el fragmento y haz clic para abrirlos en el editor. Puedes agregar el fragmento a cualquier plantilla de página en la que quieras habilitar los formularios y el seguimiento de Klaviyo en las páginas correspondientes.
3. Desplázate hasta la parte inferior del archivo y pega el snippet debajo del otro código.
   

4. Haz clic en Guardar.

Prueba el seguimiento con actividad en el sitio

Para probar que el seguimiento con actividad en el sitio está configurado correctamente, sigue estos pasos:

1. Accede a tu sitio web.
2. En la página de inicio, añade lo siguiente al final del URL, reemplazando example@gmail.com por tu dirección de correo electrónico:
   ?utm_email=example@gmail.com

3. Vuelve a cargar la página.
4. Busca tu dirección de correo electrónico en Klaviyo.
   

Deberías ver que se creó un perfil de Klaviyo para ti (si todavía no existía) y que esta actividad se registró en tu fuente de actividad.

Ahora que instalaste Klaviyo.js, podrás utilizar el seguimiento con actividad en el sitio, el formulario de registro de Klaviyo y más.

Recursos adicionales