Cómo integrar una configuración headless de Magento 2

Qué aprenderás

Aprende a integrar Klaviyo con una configuración headless de Magento 2. Si utilizas Magento 2 para gestionar el backend de tu 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 ti.

Esta integración requiere 3 pasos:

1. Conecta tu tienda de Magento 2 mediante la integración nativa de Klaviyo para sincronizar los datos de pedidos, catálogo y suscriptores.
2. Añade fragmentos de código manualmente a tu sitio para habilitar la funcionalidad de seguimiento en el sitio.
3. (Si usas una estructura de URL personalizada para tu catálogo de productos) Añade reglas de reescritura para las URL de producto.

Conecta la integración nativa de Klaviyo

Primero, conecta tu tienda Magento 2 a través de las integraciones nativas de Klaviyo para sincronizar los datos de pedidos, de catálogo y de suscriptores siguiendo los pasos de Primeros pasos con Magento 2.

Una gran parte de la integración de Magento 2 de Klaviyo se basa en obtener 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 hará un seguimiento de los siguientes eventos sin necesidad de configuración adicional:

• Pedido Realizado
• Pedido Procesado
• Envío Completado
• Pedido Cancelado
• Pedido Reembolsado
• Pago iniciado

Además, ten presente lo siguiente:

• Los eventos Started Checkout se sincronizarán, siempre que sigas creando presupuestos y asignándoles una dirección de email cuando el usuario finalice la compra.
• Si has habilitado la sincronización de clientes suscritos a la tabla de newsletters de Magento 2, la sincronización debería funcionar según lo previsto.

Añade fragmentos de código manualmente

Si usas una configuración headless, debes añadir manualmente a tu sitio el JavaScript «Active on Site» de Klaviyo (también conocido como Klaviyo.js). Klaviyo.js realiza un seguimiento de cuándo los usuarios están activos en tu sitio y habilita los formularios de Klaviyo.

También proporcionamos fragmentos que te permiten hacer lo siguiente:

• Seguimiento de producto visto
  Haz un seguimiento de cuándo un usuario ve productos específicos en tu sitio (lo que se puede aprovechar en un flujo de abandono de navegación).
• Seguimiento de artículos vistos recientemente
  Haz el seguimiento de los artículos vistos recientemente en el perfil de un usuario.
• Seguimiento de añadido al carrito
  Realiza un seguimiento de cuándo un usuario añade un artículo a su carrito.
• Seguimiento de usuarios que han iniciado sesión
  Si tienes la funcionalidad de creación de cuentas, haz un seguimiento de cuándo un usuario inicia sesión.

Actividad en el Sitio

Añade el siguiente fragmento de Klaviyo.js para que aparezca en todas las páginas de tu sitio web. Esto habilitará el seguimiento de Activo en el sitio y los formularios de Klaviyo. Asegúrate de sustituir PUBLIC_API_KEY por tu 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ás que cargar el objeto de Klaviyo en cualquier página donde quieras añadir uno de los siguientes fragmentos (como Producto visto, Añadido al carrito, etc.). El objeto klaviyo solo necesita cargarse una vez por página.

Para cargar el objeto klaviyo, instala 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]=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>

Producto visto

Si quieres configurar un flujo de abandono de navegación o crear segmentos basados en la actividad de navegación por los productos, tendrás que añadir el seguimiento de eventos de JavaScript para la métrica Viewed Product. Todas las métricas Viewed Product están vinculadas a los perfiles de usuario. En la plantilla de tu página de producto, añade 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("Viewed Product", item);
 </script>

Asegúrate de actualizar los valores de las propiedades JSON en el fragmento para que se extraigan dinámicamente de la información relevante necesaria para esa propiedad.

Artículos vistos recientemente

Además, hay otro fragmento que permite añadir entradas a un feed visual de «Artículos vistos recientemente» en el perfil del usuario. El siguiente fragmento se puede añadir directamente debajo del fragmento Producto visto.

Asegúrate de reemplazar item.___ en el fragmento con el objeto de artículo que use tu plataforma para las propiedades del producto.

<script type="text/javascript">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
     "Title": item.ProductName,
     "ItemId": item.ProductID,
     "Categories": item.Categories,
     "ImageUrl": item.ImageURL,
     "Url": item.URL,
     "Metadata": {
       "Brand": item.Brand,
       "Price": item.Price,
       "CompareAtPrice": item.CompareAtPrice
     }
   });
 </script>

Añadido al Carrito

Si quieres enviar emails de carrito abandonado a los visitantes que añadan artículos al carrito, pero no lleguen a la página de pago, tendrás que hacer seguimiento de una métrica «Añadido al carrito». Se debe identificar a un cliente (es decir, con cookies) para hacer seguimiento de este evento. Este es un ejemplo de solicitud en el que el carrito ya contenía un artículo (Winnie the Pooh) y se acaba de añadir otro artículo al carrito (A Tale of Two Cities):

<script type="text/javascript">
klaviyo.track("Added to Cart", {
     "$value": 29.98,
     "AddedItemProductName": "A Tale of Two Cities",
     "AddedItemProductID": "1112",
     "AddedItemSKU": "TALEOFTWO",
     "AddedItemCategories": ["Fiction", "Classics", "Children"],
     "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", "A Tale of Two Cities"],
     "CheckoutURL": "http://www.example.com/path/to/checkout",
     "Items": [{
         "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 con la sesión iniciada

Si los clientes pueden crear cuentas en tu sitio web, quizá quieras añadir código adicional para identificar y hacer un seguimiento de los usuarios que han iniciado sesión. Este código debe ejecutarse una vez que el usuario haya iniciado sesión.

Aquí tienes un script de ejemplo para empezar:

klaviyo.identify({
  "$email" : customer.email,
  "$first_name" : customer.first_name,
  "$last_name" : customer.last_name
});

Añade reglas de reescritura para las URL de los productos

Tu catálogo de productos de Magento 2 debería sincronizarse con normalidad con Klaviyo a través de nuestras integraciones nativas, aunque, si estás usando una estructura de URL personalizada, tendrás que añadir algunas reglas de reescritura a tu base de código.

La URL de producto predeterminada de Magento 2 sigue la siguiente estructura:

https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]

Si tu tienda utiliza una estructura de URL como:

https://[YOUR STORE]/products/[Product Name]

Después, tendrás que añadir algunas reglas de reescritura a tu base de código para redirigir los enlaces de producto estándar de Magento 2 a tu estructura de URL personalizada

Recursos adicionales