Cómo crear un evento "Added to Cart" para BigCommerce

Qué aprenderás

Aprenda a crear un evento Añadido al carrito para BigCommerce que rastree cuando un cliente añade un artículo a su carrito y pueda activar un flujo de carrito abandonado. Los eventos de Añadido al carro no se rastrean automáticamente cuando se integra con BigCommerce; primero debe añadir (y potencialmente modificar) un fragmento de JavaScript (incluido en esta guía) a los archivos de su tema de BigCommerce.

• No es necesario crear el evento Añadido al carro para enviar un flujo de carro abandonado; el flujo de carro abandonado Añadido al carro es independiente del flujo de carro abandonado estándar, que se activa al iniciar la compra. 
• La integración incorporada de BigCommerce de Klaviyo ya rastrea un evento de Pago Iniciado cuando un cliente ingresa su correo electrónico durante el proceso de pago después de agregar artículo(s) a su carrito. 

Antes de empezar

El evento Añadido al carro sólo se rastrea para los usuarios previamente cocinados por Klaviyo. 

Para que el evento Añadido al carro funcione correctamente, ya debe tener instalado el seguimiento de Productos vistos. Normalmente, los clientes de Klaviyo instalan esto durante el proceso de integración de BigCommerce y las instrucciones se pueden encontrar en nuestro artículo de integración. 

Añada el fragmento

1. Abra su administrador de BigCommerce y navegue a Storefront > Mis Temas.
2. Busque su tema actual y haga clic en el menú desplegable Configuración avanzada.
3. Busque el archivo product.html y haga clic para abrirlo.
4. Pegue el fragmento de abajo directamente debajo del fragmento de Producto Visto de Klaviyo.

   <script text="text/javascript"> 
   //Inicializar el objeto Klaviyo inmediatamente al cargar la página
   !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=nuevo 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 text="text/javascript">
   //Añadir al carrito
   var klaviyo = window.klaviyo || [];
   document.getElementById("form-action-addToCart").addEventListener('click',function (){
      klaviyo.track("Added to Cart", item);
   });
   </script>

5. A continuación, compruebe si necesita modificar su fragmento. Para ello, tendrá que comprobar el ID del botón "Añadir a la cesta" de su sitio y ver si coincide con la variable "Añadir a la cesta" resaltada en el siguiente fragmento, cuyo valor predeterminado es form-action-addToCart.
   
6. Para comprobar el ID del botón, abra una de las páginas de productos de su sitio, haga clic con el botón derecho del ratón en el botón "Añadir al carro" y seleccione Inspeccionar.
   
7. Se abrirá la consola, mostrando el código fuente del botón "Añadir a la cesta". La siguiente imagen muestra el ID del botón "Add to Cart" resaltado en la consola.
   
8. El ID del botón en la página que se muestra aquí coincide con form-action-addToCart, por lo que no es necesario realizar ningún cambio.
   • Si el ID del botón "Añadir a la cesta" de su sitio no es form-action-addToCart, deberá cambiar el texto de la variable entre comillas para que coincida con el ID del botón
9. Si su código fuente no muestra un ID de botón, pase a la siguiente sección y aprenda a utilizar un fragmento alternativo con notación de clase en lugar de notación de botón. 
10. Cuando haya terminado, guarde su archivo product.html. 

Ha terminado de añadir el fragmento y ahora realizará el seguimiento del evento Añadido al carro. 

Fragmento alternativo para el botón "Add to Cart" sin ID de botón

Por razones de estilo, algunos sitios utilizan una notación de clase en lugar de un ID de botón para los botones "Añadir al carro".

Si su botón " Añadir a la cesta " no tiene un ID de botón (que puede determinar siguiendo los pasos de la sección anterior) y en su lugar utiliza una notación de clase, deberá utilizar el fragmento de código alternativo que aparece a continuación para activar el evento " Añadido a la cesta ". 

1. Si su botón se define mediante notación de clase, pegue el siguiente fragmento alternativo en la parte inferior de su archivo product.html:

   <script text="text/javascript"> 
   //Inicializar el objeto Klaviyo inmediatamente al cargar la página
   !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=nuevo 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 text="text/javascript">
   //Producto visto
   var klaviyo = window.klaviyo || [];
   var classname = document.getElementsByClassName("add-to-cart");
   var addToCart = function() {
      klaviyo.track("Added to Cart", item);
   }; 
   for (var i = 0; i < classname.length; i++) {
      classname[i].addEventListener('click', addToCart, false);
   }
   </script>
   

2. Es probable que haya que modificar este código con el nombre de su clase. Compare el nombre de la clase de su botón entre comillas, resaltado en el siguiente ejemplo, con el contenido entre paréntesis después de getElementsByClassName en el fragmento de código anterior. Por ejemplo, el nombre de la clase en la captura de pantalla es btn product-form_cart-submit btn--secondary-accent y la clase en el fragmento de código se llama add-to-cart.
   
   
   • Si estos dos no coinciden, cambie el fragmento de código para reflejar el nombre de la clase de su botón.
3. Por ejemplo, el fragmento de código siguiente se ha modificado con el valor classname btn product-form_cart-submit btn--secondary-accent rodeado de comillas dobles.
   
4. Guarde su archivo product.html

Una vez guardado, habrá terminado de añadir el fragmento y ya podrá realizar el seguimiento del evento Añadido al carro. 

Solución de problemas de su "Añadido a la cesta" snippet

Una vez que haya añadido el fragmento, debería vigilar el botón "Añadir a la cesta'' y realizar un seguimiento de un evento Añadido a la cesta cada vez que un visitante cocinado haga clic en este botón. 

Este evento funciona de forma similar al evento Producto visto. Cada artículo que alguien añada a su cesta desencadenará un nuevo evento. Puede consultar estos eventos en:

1. Navegando a Analytics > Métricas en Klaviyo
2. Búsqueda del acontecimiento
3. Haciendo clic en Activity Feed
   
   

Si no ve eventos de Añadido a la cesta en su cuenta, pruebe lo siguiente:

• Asegúrese de que su Klaviyo.js (también conocido como el fragmento Activo en el sitio) está funcionando, lo cual es necesario para que Añadido al carro funcione correctamente. Esto debería haberse añadido a su sitio automáticamente cuando se integró con Klaviyo, pero puede comprobar que funciona siguiendo los pasos de la sección de confirmación de la instalación de seguimiento in situ de nuestro artículo de integración de BigCommerce.
• Compruebe que funciona el seguimiento de Productos vistos , que también es necesario para que Añadir al carro funcione correctamente. Este fragmento se añade manualmente, y puede aprender a añadirlo y probarlo en la sección Producto visto de nuestro artículo sobre integración. 

El "Añadido al carro" flujo de carro abandonado

Al crear un flujo de carrito abandonado (ya sea utilizando Añadido al carrito o Pedido iniciado) puede aprovechar Klaviyo SMS además del correo electrónico. Por razones de cumplimiento, asegúrese de enviar sólo un SMS en su flujo y si está utilizando varios tipos de flujos de carritos abandonados, asegúrese de utilizar sólo SMS en uno de ellos. 

En la sección Esenciales de la biblioteca, encontrará el flujo estándar de recordatorio de carrito abandonado. Este flujo se desencadena con el evento Pago iniciado.

Para empezar con un flujo de carrito abandonado utilizando el evento Añadido al carrito, recomendamos utilizar el flujo pre-construido disponible en la Biblioteca de Flujos de Klaviyo que tiene los filtros de flujo adecuados ya configurados. Este flujo tiende a dirigirse a compradores potenciales más ocasionales que aún no han iniciado la compra.

El flujo de carritos abandonados activado por el evento Añadido al carrito se encuentra en la sección de objetivos "Prevenir la pérdida de ventas". 

Si ha implementado el fragmento de BigCommerce Añadido al carro, este flujo estará listo para funcionar con todos los filtros recomendados y el contenido de correo electrónico dinámico listo para impulsar los correos electrónicos de seguimiento del carro personalizados.

¿Utiliza Amazon Buy con Prime?

Si está utilizando Comprar con Prime para impulsar el pago y el cumplimiento de cualquiera de los productos de su tienda, debería hacerlo:

• Integre Buy with Prime con Klaviyo para llevar los datos de Buy with Prime a su cuenta de Klaviyo.
• Para su flujo de "abandonado Añadido a la cesta", añada los siguientes filtros de flujo para excluir a los clientes que iniciaron la compra o realizaron compras a través de Comprar con Prime de la recepción de mensajes incorrectos:
  
  • Ha iniciado el proceso de pago (Comprar con Prime) cero veces desde el inicio de este flujo Y
  • Pedido realizado (Comprar con Prime) cero veces desde el inicio de este flujo.

Recursos adicionales

• Crear un flujo de carritos abandonados
• Referencia de datos de BigCommerce