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

Objetivos de aprendizaje

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

• No necesitas crear el evento Añadido al carro para enviar un flujo de carrito abandonado; el flujo de carrito abandonado Añadido al carro es independiente del flujo de carrito abandonado estándar, que se activa al Iniciar página de pago. 
• Klaviyo BigCommerce integraciones ya registra un evento de Inicio de página de pago cuando un cliente introduce su correo electrónico durante el proceso de página de pago tras añadir artículos a su cesta. 

Antes de empezar

El evento Añadido a la cesta sólo se rastrea para los usuarios previamente cocinados por Klaviyo. 

Ya debes tener instalado el seguimiento de Productos Visualizados para que el evento Añadido al carro funcione correctamente. Normalmente, Klaviyo cliente instala esto durante el proceso de BigCommerce integraciones y las instrucciones se pueden encontrar en nuestro artículo integraciones. 

Añade el fragmento

1. Abre el administrador de BigCommerce y ve a Storefront > Mis Temas.
2. Busca tu tema actual y haz clic en el desplegable Configuración avanzada.
3. Busca el archivo product.html y haz clic para abrirlo.
4. Pega el siguiente fragmento directamente debajo del fragmento de Producto Visto de Klaviyo.

   <script text="text/javascript"> 
    //Inicializa el objeto Klaviyo inmediatamente al cargar la página
   !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>
   < 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, comprueba si necesitas modificar tu fragmento. Para ello, tendrás que comprobar el ID del botón "Añadir a la cesta" de tu sitio y ver si coincide con la variable "Añadir a la cesta" resaltada en el fragmento siguiente, cuyo valor predeterminado es form-action-addToCart.
   
6. Para comprobar el ID del botón, abre una de las páginas de productos de tu sitio, haz clic con el botón derecho en el botón "Añadir al carrito" y selecciona 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 "Añadir a la cesta" resaltado en la consola.
   
8. El ID del botón de 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 tu sitio no es form-action-addToCart, tendrás que cambiar el texto de la variable entre comillas para que coincida con el ID del botón
9. Si tu código fuente no muestra un ID de botón, pasa a la siguiente sección y aprende a utilizar un fragmento alternativo con notación de clase en lugar de notación de botón. 
10. Cuando hayas terminado, guarda tu archivo product.html. 

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

Fragmento alternativo para "Botón Añadir a la cesta" 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 a la cesta".

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

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

   <script text="text/javascript"> 
    //Inicializa el objeto Klaviyo inmediatamente al cargar la página
   !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>
   < 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 tu clase. Compara el nombre de la clase de tu 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 se llama add-to-cart.
   
   
   • Si no coinciden, cambia el fragmento de código para reflejar el nombre de la clase de tu 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. Guarda tu archivo product.html

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

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

Una vez que hayas añadido el fragmento, debería observar el botón "Añadir a la cesta'' y rastrear 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. Puedes ver estos eventos

1. Navegando hasta análisis > métrica en Klaviyo
2. Buscar el evento
3. Hacer clic en Alimentación de actividad
   
   

Si no ves eventos Añadido al carro en tu cuenta, prueba lo siguiente:

• Asegúrate de que funciona tu Klaviyo.js (también conocido como el fragmento con actividad en el Sitio), que es necesario para que Añadido al carro funcione correctamente. Esto debería haberse añadido a tu sitio automáticamente cuando te integraste con Klaviyo, pero puedes 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 BigCommerce integraciones.
• Comprueba que funciona el seguimiento de tu Producto Visto , que también es necesario para que Añadir al Carro funcione correctamente. Este fragmento se añade manualmente, y puedes aprender a añadirlo y probarlo en la sección Producto visto de nuestro artículo sobre integraciones. 

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

Al crear un carrito abandonado flujo (ya sea utilizando Añadido al carrito o Página de inicio de pago) puedes aprovechar Klaviyo SMS además del correo electrónico. Por razones de cumplimiento, asegúrate de enviar sólo un SMS en tu flujo y, si utilizas varios tipos de flujo de carrito abandonado, asegúrate de utilizar sólo SMS en uno de ellos. 

En la sección Esenciales de la biblioteca, encontrarás el flujo estándar de recordatorio de carrito abandonado. Este flujo se activa con el evento Página de pago iniciada.

Para empezar con un carrito abandonado flujo utilizando el evento Añadido al carrito, recomendamos utilizar el flujo prediseñado disponible en Klaviyo's flujo Library que tiene el filtro de flujo adecuado ya configurado. Este flujo tiende a dirigirse a compradores potenciales más ocasionales que aún no han iniciado la página de pago.

El carrito abandonado flujo desencadenado por el evento Añadido al carrito se encuentra en la sección "Evitar ventas perdidas" objetivo. 

Si has implementado el fragmento BigCommerce Añadido al carrito, este flujo estará listo para funcionar con todos los filtros recomendados y el contenido dinámico de correo electrónico listo para impulsar el seguimiento personalizado del carrito por correo electrónico.

¿Estás usando Buy with Prime de Amazon?

Si utilizas Buy with Prime para administrar los pagos y los pedidos de algunos de los productos de tu tienda, haz lo siguiente:

• Integra Buy with Prime con Klaviyo para llevar los datos de Buy with Prime a tu cuenta de Klaviyo.
• En tu flujo de carrito abandonado activado por el evento Añadido al carrito, añade los siguientes filtros de flujo para excluir a los clientes que iniciaron pagos o realizaron compras a través de Buy with Prime, y que no reciban mensajes incorrectos:
  
  • Pago iniciado (Buy with Prime) cero veces desde el inicio de este flujo, Y
  • Pedido realizado (Buy with Prime) cero veces desde que se inició este flujo.

Recursos adicionales

• Crear un carrito abandonado flujo
• Referencia de datos de BigCommerce