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 eliges instalar manualmente Klaviyo.js y antes lo tenías habilitado mediante el app embed de Klaviyo, primero debes desactivar el app embed en la configuración del tema de Shopify y guardar el cambio.

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 6 caracteres (ID del sitio).
2. Si has activado Cuentas de cliente 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 han iniciado sesión mediante su dirección de email. Sustituye PUBLIC_API_KEY en esta versión por tu clave de API pública también:

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

2. Abre la plantilla o la sección de Liquid para las páginas en las que quieras formularios y seguimiento de Klaviyo. Si una página usa una plantilla JSON, añade el snippet a una sección de Liquid a la que haga referencia esa plantilla, no al archivo JSON. Consulta la documentación de plantillas JSON de Shopify para obtener más información.
3. Pega tu snippet 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. 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. Ve a una página de la tienda donde hayas instalado el snippet. Si la tienda requiere consentimiento de seguimiento para la visita, proporciónalo antes de hacer la prueba.
2. En esa página, añade lo siguiente al final de la URL, sustituyendo example@gmail.com por tu dirección de email:
   ?utm_email=example@gmail.com
   
   Si la URL ya contiene un signo de interrogación (?), añade &utm_email=example@gmail.com en su lugar, usando tu dirección de email.

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

Deberías ver un perfil de Klaviyo para tu dirección de email (creado si no existía ya). En su Registro de actividad, busca un evento Activo en el sitio de tu visita de prueba.

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