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 la inserción de la app de Klaviyo, primero debes deshabilitar la inserción de la app en la configuración del tema de Shopify y guardar el cambio.

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 6 caracteres (ID del sitio).
2. Si habilitaste cuentas de clientes para tu tienda, usa el conjunto completo de scripts que aparece a continuación en lugar del primer fragmento de código para identificar a los clientes que iniciaron sesión con su dirección de correo electrónico. En esta versión, también reemplaza PUBLIC_API_KEY con tu clave de API pública:

<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. Abre el editor de código del tema de Shopify con las instrucciones de Shopify para editar el código del tema.

2. Abre la plantilla o sección de Liquid para las páginas donde quieres formularios y seguimiento de Klaviyo. Si una página usa una plantilla JSON, agrega el fragmento a una sección de Liquid a la que haga referencia esa plantilla, no al archivo JSON. Consulta la documentación de la plantilla JSON de Shopify para obtener más detalles.
3. Pega tu fragmento debajo del HTML existente en el archivo Liquid, fuera de cualquier bloque {% schema %}, {% javascript %} o {% stylesheet %}. Incluye Klaviyo.js solo una vez en cada página.

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. Ve a una página de la tienda donde instalaste el fragmento. Si la tienda requiere consentimiento de seguimiento para tu visita, proporciónalo antes de hacer la prueba.
2. En esa página, agrega lo siguiente al final del URL, reemplazando example@gmail.com por tu dirección de correo electrónico:
   ?utm_email=example@gmail.com
   
   Si el URL ya contiene un signo de interrogación (?), agrega &utm_email=example@gmail.com en su lugar, usando tu dirección de correo electrónico.

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

Deberías ver un perfil de Klaviyo para tu dirección de correo electrónico (se creará si aún no existía). En el Registro de actividad, busca un evento con actividad en el sitio de tu visita de prueba.

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