Cómo integrar una configuración de Magento 2 sin cabeza

Objetivos del artículo

Aprende a integrar Klaviyo con una configuración sin cabeza de Magento 2. Si utilizas Magento 2 para el backend de tu tienda de ecommerce, pero un framework diferente para el frontend (como React.js, Angular, etc.), entonces la siguiente información es relevante para ti.

Esta integraciones requiere 3 pasos:

1. Conecta tu Magento 2 tienda, comercio a través de las integraciones nativas de Klaviyopara sincronizar pedidos, catálogos y datos del suscriptor.
2. Añade manualmente fragmento de código a tu sitio para activar la función de seguimiento in situ.
3. (Si utilizas una estructura de URL personalizada para tu catálogo de productos) Añade reglas de reescritura para las URLS de los productos.

Conecta Klaviyo's integraciones nativas

En primer lugar, conecta tu Magento 2 tienda, comercio a través de Klaviyo's integraciones nativas para sincronizar el pedido, catálogo y datos del suscriptor siguiendo los pasos en primeros pasos con Magento 2.

Gran parte de las integraciones de Klaviyo's Magento 2 se basan en la obtención de datos a través de la interfaz de programación de aplicaciones (API) del servidor de Magento's. Normalmente, esto no se ve afectado por el uso de un frontend desacoplado, y las integraciones nativas rastrearán los siguientes eventos sin más configuración:

• Pedido realizado
• Pedido completado
• Envío Completado
• Pedido cancelado
• Pedido reembolsado
• Pago iniciado

Además, ten en cuenta que:

• Los eventos de página de pago iniciados se sincronizarán siempre que sigas creando presupuestos y asignándoles una dirección de correo electrónico cuando el usuario pague.
• Si has activado la sincronización de suscribirse cliente en la tabla Magento 2 boletín, la sincronización debería funcionar como estaba previsto.

Añadir manualmente fragmento de código

Si utilizas una configuración headless, debes añadir manualmente a tu sitio Klaviyo's "con actividad on Site" JavaScript (también conocido como Klaviyo.js). Klaviyo.js rastrea cuándo los usuarios están con actividad en tu sitio y habilita los formularios de Klaviyo.

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

• Seguimiento de productos vistos
  Rastrea cuándo un usuario ve productos específicos en tu sitio (lo que puede aprovecharse en un flujo de abandono de la navegación).
• Seguimiento de elementos vistos recientemente
  Realiza un seguimiento de los elementos vistos recientemente en el perfil de un usuario.
• Seguimiento de artículos añadidos a la cesta
  Realiza un seguimiento cuando un usuario añade un artículo a su cesta.
• iniciar sesión Seguimiento de usuarios
  Si tienes la funcionalidad de creación de cuentas, realiza un seguimiento cuando un usuario inicie sesión.

con actividad on Site

Añade el siguiente fragmento de Klaviyo.js para que aparezca en todas las páginas de tu sitio web. Esto permitirá con actividad en el Sitio formularios de seguimiento y 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 Klaviyo en cualquier página en la que quieras añadir uno de los siguientes fragmentos (como Producto visto, Añadido al carrito, etc.). El objeto Klaviyo objeto sólo tiene que cargarse una vez por página.

Para cargar el objeto Klaviyo objeto, 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"notificación 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.notificación push([i].concat(o,[function(i){t&&t(i),n(i)}]))}});return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.notificación push=function(){var n;(n=window._klOnsite).notificación push.apply(n,arguments)}}}}(); </script>

Producto visto

Si quieres configurar un flujo de abandono de la navegación o crear un segmento basado en la actividad de navegación por los productos, tendrás que añadir JavaScript de seguimiento de eventos para la métrica Producto visto. Todos los Productos métrica vistos están vinculados al perfil 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("Visto Producto", artículo);
 </script>

Asegúrate 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 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úrate de sustituir item.___ en el fragmento por el objeto item que utilice tu 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>

Se Añadió al Carrito

Si quieres enviar carrito abandonado por correo electrónico a los visitantes que añaden artículos a su carrito, pero no llegan a la página de pago, querrás hacer un seguimiento métrico de Añadido al carrito. Un cliente debe estar identificado (es decir, cocinado) para seguir 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 artículo al carro (Historia de dos ciudades):

<script type="text/javascript">
Klaviyo.track("Añadido a la cesta", {
 " $value": 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",
     "Elementos": [{
         "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 el cliente puede crear una cuenta en tu sitio web, puede que quieras añadir código adicional para identificar y hacer un seguimiento de los usuarios de iniciar 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.identificar({
  "$email" : customer.email,
  "$first_name" : customer.first_name,
  "$last_name" : customer.last_name
});

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

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

La URL de producto por defecto de Magento 2 sigue la siguiente estructura:

https://[TU tienda, comercio]/catálogo/producto/vista/id/[ID PRODUCTO]

Si tu tienda, comercio está utilizando una estructura de URL como:

https://[TU tienda, comercio]/productos/[Nombre del producto]

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

Recursos adicionales