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

Objetivos del artículo

Obtén información sobre cómo integrar Klaviyo con una configuración headless de Magento 2. Si usas Magento 2 para impulsar el backend de la tienda de ecommerce, pero un framework diferente para el frontend (como React.js, Angular, etc.), entonces la siguiente información es relevante.

Esta integración requiere 3 pasos:

1. Conecta tu tienda de Magento 2 mediante las integraciones nativas de Klaviyo para sincronizar datos de pedidos, catálogo y suscriptor.
2. Agrega manualmente fragmentos de código al sitio para habilitar la funcionalidad de seguimiento en el sitio.
3. (Si usas una estructura de URL personalizada para tu catálogo de productos) Agrega reglas de reescritura para las URL de productos.

Conecta la integración nativa de Klaviyo

Primero, conecta la tienda de Magento 2 mediante la integración nativa de Klaviyo para sincronizar datos de pedidos, catálogo y suscriptores siguiendo los pasos en Primeros pasos con Magento 2.

Una gran parte de la integración de Klaviyo con Magento 2 se basa en obtener datos mediante la interfaz de programación de aplicaciones (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á seguimiento de los siguientes eventos sin configuración adicional:

• Pedido realizado
• Pedido completado
• Envío Completado
• Pedido Cancelado
• Pedido Reembolsado
• Proceso de Pago Iniciado

Además, ten en cuenta lo siguiente:

• Los eventos Started Checkout se sincronizarán siempre que sigas creando cotizaciones y asignándoles una dirección de correo electrónico cuando el usuario finalice la compra.
• Si habilitaste la sincronización de clientes suscritos a la tabla de boletines de Magento 2, la sincronización debería funcionar como se espera.

Agregar fragmentos de código manualmente

Si usas una configuración headless, debes agregar manualmente el JavaScript “Active on Site” de Klaviyo (también conocido como Klaviyo.js) a tu sitio. Klaviyo.js hace seguimiento de cuándo los usuarios están con actividad en tu sitio y habilita los formularios de Klaviyo.

También proporcionamos fragmentos de código que te permiten hacer lo siguiente:

• Seguimiento de Producto visto
  Haz seguimiento de cuándo un usuario ve productos específicos en tu sitio (lo que se puede aprovechar en un flujo de abandono de la navegación).
• Seguimiento de artículos vistos recientemente
  Haz seguimiento de artículos vistos recientemente en el perfil de un usuario.
• Seguimiento de Se añadió al carrito
  Rastrea cuándo un usuario añade un artículo a su carrito.
• Seguimiento de usuarios que iniciaron sesión
  Si tienes una función de creación de cuentas, haz seguimiento de cuándo un usuario inicia sesión.

Con Actividad en el Sitio

Agrega el siguiente fragmento de código de Klaviyo.js para que aparezca en todas las páginas de tu sitio web. Esto habilitará el seguimiento de con actividad en el sitio y los formularios de Klaviyo. Asegúrate de reemplazar PUBLIC_API_KEY con la 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 agregar Klaviyo.js, tendrás que cargar el objeto de Klaviyo en cualquier página en la que quieras agregar uno de los siguientes fragmentos (como Viewed Product, Added to Cart, etc.). El objeto Klaviyo solo se debe cargar 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 la navegación o crear segmentos en función de la actividad de navegación de productos, tendrás que agregar el seguimiento de eventos de JavaScript para la métrica Viewed Product. Todas las métricas Viewed Product están vinculadas a perfiles de usuario. En la plantilla de tu página de producto, agrega 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 obtengan dinámicamente de la información relevante necesaria para esa propiedad.

Artículos vistos recientemente

Además, hay otro fragmento de código que permite agregar entradas a un feed visual de “Artículos vistos recientemente” en el perfil del usuario. El siguiente fragmento de código se puede agregar directamente debajo del fragmento de Producto visto.

Asegúrate de reemplazar item.___ en el fragmento con el objeto item 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>

Se Añadió al Carrito

Si quieres enviar correos electrónicos de carrito abandonado a los visitantes que agregan artículos al carrito, pero no llegan a la página de pago, debes hacer seguimiento de una métrica Added to Cart. Se debe identificar a un cliente (es decir, con cookie) para hacer seguimiento de este evento. Aquí tienes un ejemplo de solicitud en la que el carrito ya contenía un artículo (Winnie the Pooh) y otro artículo se acaba de agregar 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 sesión iniciada

Si los clientes pueden crear cuentas en tu sitio web, es posible que quieras agregar código adicional para identificar y hacer un seguimiento de los usuarios que iniciaron sesión. Este código debe ejecutarse una vez que el usuario haya iniciado sesión.

Aquí tienes un ejemplo de script para que puedas empezar:

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

Agrega reglas de reescritura para las URL de los productos

El catálogo de productos de Magento 2 debería sincronizarse normalmente con Klaviyo a través de nuestra integración nativa, aunque si usas una estructura de URL personalizada, tendrás que agregar algunas reglas de reescritura a tu base de código.

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

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

Si tu tienda está usando una estructura de URL como:

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

Luego tendrás que agregar algunas reglas de reescritura a la base de código para redirigir los enlaces de productos estándar de Magento 2 a tu estructura de URL personalizada

Recursos adicionales