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

Qué aprenderás

Descubre cómo 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 experimentas un tráfico web muy alto o si tu sitio tiene un tiempo de carga lento por cualquier otro motivo (aunque Klaviyo ha mejorado los tiempos de carga recientemente y, por lo tanto, puede que no sea la causa). De lo contrario, te recomendamos que instales Klaviyo.js habilitando la inserción de la aplicación de Shopify de Klaviyo.

Antes de empezar

Si decides instalar Klaviyo.js manualmente y antes lo tenías habilitado a través de la inserción de la aplicación de Klaviyo, primero debes desactivar la inserción de la aplicación en la configuración del tema de Shopify.

Instala Klaviyo.js en tu tienda Shopify

1. Copia el fragmento de código que aparece 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 sustituir PUBLIC_API_KEY por tu clave de API pública de Klaviyo de seis dígitos.
2. Si has habilitado Cuentas de cliente para tu tienda, añade un script adicional para identificar a tus clientes con el email que usan para iniciar sesión en tu tienda. El conjunto completo de scripts tendrá el siguiente aspecto:

<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 el administrador de Shopify, haz clic en Online Store > Themes. En el menú desplegable, haz clic en Editar código.
   

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

4. Pulsa Guardar.

Probar tu seguimiento de Active on Site

Para comprobar que tu seguimiento de Activo 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 de la URL, sustituyendo example@gmail.com con tu dirección de email:
   
   ?utm_email=example@gmail.com.

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

Verás que se ha creado un perfil de Klaviyo para ti (si no existía ya uno) y que esta actividad se ha registrado en tu feed de actividad.

Ahora que has instalado Klaviyo.js, podrás utilizar el seguimiento Activo en el sitio, los formularios de registro de Klaviyo y mucho más.

Recursos adicionales