Cómo instalar manualmente Klaviyo.js para tiendas Shopify

Qué aprenderás

Aprenda a instalar manualmente el fragmento de seguimiento de Klaviyo Active on Site , también conocido como JavaScript in situ de Klaviyo o Klaviyo.js, en su tienda Shopify.  Sólo debería hacerlo si experimenta un tráfico web muy elevado o si su sitio sufre de lentitud de carga por cualquier otro motivo (aunque Klaviyo hamejoradorecientementelos tiempos de carga en , por lo que puede que no sea la causa). De lo contrario, le recomendamos que instale Klaviyo.js en habilitando la incrustación de la aplicación Shopify de Klaviyo.

Antes de empezar

Si decide instalar manualmente Klaviyo.js y anteriormente lo tenía habilitado a través de la incrustación de la aplicación de Klaviyo, primero debe deshabilitar la incrustación de la aplicación en la configuración de su tema de Shopify.

Instale Klaviyo.js en su tienda Shopify

1. Copie el fragmento de código siguiente:

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

2. En el fragmento de código, asegúrese de sustituir PUBLIC_API_KEY por su clave pública de seis dígitos Klaviyo de API.
3. Si ha habilitado las Cuentas de clientes para su tienda, añada un script adicional para identificar a sus clientes con el correo electrónico que utilizan para iniciar sesión en su tienda. El conjunto completo de guiones 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"> //Inicializar el objeto Klaviyo al cargar la página !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]=argumentos[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"> 
    //cuentas de cliente
   var Klaviyo = window.Klaviyo || [];
   if ("{{ customer.email }}" ) {Klaviyo.identify({"$email" : "{{ customer.email }}"})};
   </script>
   

4. Desde su Admin de Shopify haga click en Tienda Online > Temas. En el desplegable, haga clic en Editar código.
   
5. Busque los archivos a los que desea añadir el fragmento y haga clic para abrirlo en el editor. Puede añadir el fragmento a cualquier plantilla de página en la que desee habilitar los formularios y el seguimiento de Klaviyo en las páginas correspondientes. 
6. Desplácese hasta la parte inferior del archivo y pegue su fragmento debajo del otro código.
   
7. Pulse Guardar.

Pruebe su seguimiento Active on Site

Para comprobar que su seguimiento Active on Site está configurado correctamente, siga estos pasos:

1. Visita el sitio web.
2. En su página de inicio, añada lo siguiente al final de la URL, sustituyendo example@gmail.com con su dirección de correo electrónico:
   ?utm_email=example@gmail.com
   
   
3. Vuelva a cargar la página.
4. Busque en Klaviyo su dirección de correo electrónico.
   

Debería ver que se ha creado un perfil Klaviyo para usted (si no existía ya uno) y que se ha realizado un seguimiento de esta actividad en su feed de actividad.

Ahora que ha instalado Klaviyo.js, podrá utilizar el seguimiento Active on Site, los formularios de inscripción de Klaviyo y mucho más. 

Recursos adicionales

• Primeros pasos con Shopify
• Introducción al seguimiento en el sitio de Klaviyo
• Primeros pasos con los formularios de registro