Qué aprenderás
Aprenda cómo integrar Klaviyo con una configuración headless de Magento 2. Si está utilizando Magento 2 para impulsar el backend de su tienda de comercio electrónico, pero un framework diferente para el frontend (como React.js, Angular, etc.), entonces la siguiente información es relevante para usted.
Esta integración requiere 3 pasos:
- Conecte su tienda Magento 2 a través de la integración nativa de Klaviyo para sincronizar los datos de pedidos, catálogos y suscriptores.
- Añada manualmente fragmentos de código a su sitio web para habilitar la funcionalidad de seguimiento in situ.
- (Si está utilizando una estructura de URL personalizada para su catálogo de productos) Añada reglas de reescritura para las URLS de los productos.
Conecte la integración nativa de Klaviyo
En primer lugar, conecte su tienda Magento 2 a través de la integración nativa de Klaviyo para sincronizar los datos de pedidos, catálogos y suscriptores siguiendo los pasos indicados en Introducción a Magento 2.
Gran parte de la integración de Klaviyo en Magento 2 se basa en la obtención de datos a través de la API del lado del servidor de Magento. Normalmente, esto no se ve afectado por el uso de un frontend desacoplado, y la integración nativa rastreará los siguientes eventos sin más configuración:
- Pedido realizado
- Pedido cumplido
- Envío realizado
- Pedido cancelado
- Pedido reembolsado
- Pago iniciado
Además, tenga en cuenta que:
- Los eventos de pago iniciados se sincronizarán siempre que siga creando presupuestos y asignándoles una dirección de correo electrónico cuando el usuario realice el pago.
- Si ha activado la sincronización de los clientes suscritos a la tabla de boletines de Magento 2, la sincronización debería funcionar según lo previsto.
Añadir manualmente fragmentos de código
Si está utilizando una configuración headless, debe añadir manualmente el JavaScript "Activo en el sitio" de Klaviyo (también conocido como Klaviyo.js) a su sitio. Klaviyo.js rastrea cuando los usuarios están activos en su sitio y habilita los formularios Klaviyo.
También proporcionamos fragmentos que le permiten hacer lo siguiente:
-
Seguimiento de productos vistos
Rastree cuándo un usuario ve productos específicos en su sitio (lo que puede aprovecharse en un flujo de abandono de navegación). -
Seguimiento de artículos vistos recientemente
Realice un seguimiento de los artículos vistos recientemente en el perfil de un usuario. -
Seguimiento de artículos añadidos a la cesta
Realice un seguimiento cuando un usuario añada un artículo a su cesta. -
Seguimiento de usuarios registrados
Si dispone de la función de creación de cuentas, realice un seguimiento cuando un usuario inicie sesión.
Activo in situ
Añada el siguiente fragmento de Klaviyo.js para que aparezca en todas las páginas de su sitio web. Esto habilitará el seguimiento Active on Site y los formularios Klaviyo. Asegúrese de sustituir PUBLIC_API_KEY por su clave de API pública de Klaviyo.
<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Después de añadir Klaviyo.js, tendrá que cargar el objeto Klaviyo en cualquier página en la que desee añadir uno de los siguientes fragmentos (como Producto visto, Añadido al carro, etc.). El objeto klaviyo sólo necesita cargarse una vez por página.
Para cargar el objeto klaviyo, instale manualmente el siguiente fragmento en las páginas necesarias:
<script type="text/javascript"> !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>
Producto visto
Si desea configurar un flujo de abandono de navegación o crear segmentos basados en la actividad de navegación por los productos, tendrá que añadir el seguimiento de eventos JavaScript para la métrica Producto visto. Todas las métricas de los productos vistos están vinculadas a los perfiles de los usuarios. En la plantilla de su página de producto, añada el siguiente fragmento.
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
var item = {
"ProductName": item.ProductName,
"ProductID": item.ProductID,
"SKU": item.SKU,
"Categories": item.Categories,
"ImageURL": item.ImageURL,
"URL": item.URL,
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
};
klaviyo.track("Visto Producto", artículo);
</script>Asegúrese de actualizar los valores de las propiedades JSON en el fragmento para que extraigan dinámicamente la información relevante necesaria para esa propiedad.
Artículos vistos recientementeArtículos vistos recientemente
Además, hay otro fragmento que permite añadir entradas a un feed visual de "Elementos vistos recientemente" en el perfil del usuario. El siguiente fragmento puede añadirse directamente debajo del fragmento Producto visto.
Asegúrese de sustituir item.___ en el fragmento por el objeto item que utilice su plataforma para las propiedades del producto.
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
"Título": item.ProductName,
"ItemId": item.ProductID,
"Categorías": item.Categories,
"ImageUrl": item.ImageURL,
"Url": item.URL,
"Metadatos": {
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
}
});
</script>Añadido a la cesta
Si desea enviar correos electrónicos de carrito abandonado a los visitantes que añaden artículos a su carrito, pero no llegan a la página de pago, querrá realizar un seguimiento de una métrica de Añadido al carrito. Un cliente debe estar identificado (es decir, cocinado) para realizar el seguimiento de este evento. He aquí una solicitud de ejemplo en la que el carro ya contenía un artículo (Winnie the Pooh) y se acababa de añadir otro al carro (Historia de dos ciudades):
<script type="text/javascript">
klaviyo.track("Añadido al carrito", {
"$valor": 29.98,
"AddedItemProductName": "Historia de dos ciudades",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["Ficción", "Clásicos", "Niños"],
"AddedItemImageURL": "http://www.example.com/path/to/product/image2.png",
"AddedItemURL": "http://www.example.com/path/to/product2",
"AddedItemPrice": 19.99,
"AddedItemQuantity": 1,
"ItemNames": ["Winnie the Pooh", "Historia de dos ciudades"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"Artículos": [{
"ProductID": "1111",
"SKU": "WINNIEPOOH",
"ProductName": "Winnie the Pooh",
"Quantity": 1,
"ItemPrice": 9.99,
"RowTotal": 9.99,
"ProductURL": "http://www.example.com/path/to/product",
"ImageURL": "http://www.example.com/path/to/product/image.png",
"ProductCategories": ["Fiction", "Children"]
},
{
"ProductID": "1112",
"SKU": "TALEOFTWO",
"ProductName": "A Tale of Two Cities",
"Quantity": 1,
"ItemPrice": 19.99,
"RowTotal": 19.99,
"ProductURL": "http://www.example.com/path/to/product2",
"ImageURL": "http://www.example.com/path/to/product/image2.png",
"ProductCategories": ["Fiction", "Classics"]
}
]
});
</script>Usuarios registrados
Si los clientes pueden crear cuentas en su sitio web, es posible que desee añadir código adicional para identificar y realizar un seguimiento de los usuarios que han iniciado sesión. Este código debe ejecutarse una vez que el usuario haya iniciado la sesión.
Aquí tiene un script de ejemplo para empezar:
klaviyo.identify({
"$email" : customer.email,
"$first_name" : customer.first_name,
"$last_name" : customer.last_name
});
Añadir reglas de reescritura para las URL de los productos
Su catálogo de productos de Magento 2 debería sincronizarse normalmente con Klaviyo a través de nuestra integración nativa, aunque si está utilizando una estructura de URL personalizada tendrá que añadir algunas reglas de reescritura a su código base.
La URL de producto por defecto de Magento 2 sigue la siguiente estructura:
https://[SU TIENDA]/catálogo/producto/vista/id/[ID PRODUCTO]Si su tienda utiliza una estructura de URL como:
https://[SU TIENDA]/productos/[Nombre del producto]A continuación, tendrá que añadir algunas reglas de reescritura a su código base para redirigir los enlaces de producto estándar de Magento 2 a su estructura de URL personalizada
Recursos adicionales