Cómo crear un evento "Añadido al carrito" para BigCommerce

Qué aprenderás

Descubre cómo crear un evento Añadido al carrito para BigCommerce que registre cuándo un cliente añade un artículo al carrito y pueda activar un flujo de carrito abandonado. Los eventos Añadido al carrito no se registran automáticamente cuando integras con BigCommerce; primero debes añadir (y, posiblemente, modificar) un fragmento de JavaScript (incluido en esta guía) a los archivos del tema de BigCommerce.

• No necesitas crear el evento Added to Cart para enviar un flujo de carrito abandonado; el flujo de carrito abandonado Added to Cart es independiente del flujo de carrito abandonado estándar, que se activa con Started Checkout.
• La integración integrada de BigCommerce de Klaviyo ya registra un evento Started Checkout cuando un cliente introduce su email durante el proceso de pago después de añadir artículos a su carrito.

Antes de empezar

El evento Añadido al carrito solo se registra para los usuarios a los que previamente Klaviyo les ha colocado cookies.

Para que el evento Añadido al carrito funcione correctamente, debes tener ya instalado el seguimiento de Producto visto. Normalmente, los clientes de Klaviyo lo instalan durante el proceso de integración de BigCommerce y puedes encontrar las instrucciones en nuestro artículo sobre integraciones.

Añadir el fragmento

1. Abre el administrador de BigCommerce y ve a Storefront > My Themes.
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 fragmento de código de abajo directamente debajo del fragmento de Klaviyo Viewed Product.

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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>
<script text="text/javascript">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. A continuación, comprueba si necesitas modificar tu fragmento de código. Para ello, tendrás que comprobar el ID del botón «Añadir al carrito» de tu sitio y ver si coincide con la variable «Añadir al carrito» resaltada en el fragmento de código que aparece a continuación, cuyo valor predeterminado es form-action-addToCart.
   

2. Para comprobar el identificador del botón, abre una de las páginas de producto de tu sitio web, haz clic con el botón derecho en el botón «Añadir al carrito» y selecciona Inspeccionar.
   

3. Se abrirá la consola y mostrará el código fuente del botón «Añadir al carrito». La siguiente imagen muestra el ID del botón «Añadir al carrito» resaltado en la consola.
   

4. El ID del botón en la página que se muestra aquí coincide con form-action-addToCart, por lo que no es necesario hacer ningún cambio.
   • Si el ID del botón «Añadir al carrito» 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.
5. Si tu código fuente no muestra un ID de botón, ve a la siguiente sección y aprende a usar un snippet alternativo con notación de clase en lugar de notación de botón.
6. Cuando hayas terminado, guarda tu archivo product.html.

Has terminado de añadir el fragmento y ahora harás el seguimiento del evento Added to Cart.

Fragmento alternativo para el botón «Añadir al carrito» sin un ID de botón

Por motivos de estilo, algunos sitios usan una notación de clase en lugar de un ID de botón para los botones de «Añadir al carrito».

Si el botón «Añadir al carrito» no tiene un ID de botón (que puedes determinar siguiendo los pasos de la sección anterior) y, en su lugar, usa una notación de clase, debes usar el fragmento de código alternativo que aparece a continuación para habilitar el evento Añadido al carrito.

1. Si tu botón se define mediante notación de clase, pega el siguiente fragmento alternativo al final de tu archivo product.html:

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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>
<script text="text/javascript">
//Viewed Product
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>

1. Es probable que sea necesario 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 estos dos no coinciden, cambia el fragmento de código para reflejar el nombre de clase de tu botón.

2. Por ejemplo, el fragmento de código de abajo se ha modificado con el valor classname btn product-form_cart-submit btn--secondary-accent rodeado de comillas dobles.
   

3. Guarda tu archivo product.html

Cuando guardes, habrás terminado de añadir el fragmento y ya podrás hacer el seguimiento del evento Added to Cart.

Solución de problemas de tu fragmento «Añadido al carrito»

Después de añadir el fragmento de código, debería supervisar el botón "Añadir al carrito'' y hacer un seguimiento de un evento Añadido al carrito cada vez que un visitante con cookies 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 carrito activará un nuevo evento. Puedes ver estos eventos haciendo lo siguiente:

1. Ve a Análisis > Métricas en Klaviyo
2. Buscar el evento
3. Al hacer clic en Fuente de actividad
   
   

Si no ves eventos Added to Cart en tu cuenta, prueba lo siguiente:

• Asegúrate de que tu Klaviyo.js (también conocido como el fragmento Active on Site) funciona, lo cual es necesario para que Añadido al carrito funcione correctamente. Esto debería haberse añadido a tu sitio automáticamente cuando integraste con Klaviyo, pero puedes comprobar que funciona siguiendo los pasos de la sección de confirmación de la instalación del seguimiento en el sitio de nuestro artículo sobre integraciones de BigCommerce.
• Comprueba que el seguimiento de Viewed Product funciona, lo cual también es necesario para que Added to Cart funcione correctamente. Este fragmento se añade manualmente, y puedes aprender a añadirlo y probarlo en la sección Viewed Product de nuestro artículo sobre integraciones.

Si sigues teniendo problemas con tu fragmento de Añadido al Carrito, podría deberse a un problema al identificar el botón «Añadir al carrito». En este caso, ponte en contacto con el servicio de asistencia de Klaviyo.

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

Al crear un flujo de carrito abandonado (ya sea con Añadido al carrito o Inicio del pago), puedes aprovechar Klaviyo SMS además de email. Por motivos de cumplimiento, asegúrate de enviar solo un SMS en tu flujo y, si utilizas varios tipos de flujos de carrito abandonado, asegúrate de usar SMS solo en uno de ellos.

En la sección Essentials de la biblioteca, encontrarás el flujo estándar de recordatorio de carrito abandonado. Este flujo se activa mediante el evento Started Checkout.

Para empezar a usar un flujo de carrito abandonado con el evento Added to Cart, recomendamos usar el flujo predefinido disponible en la biblioteca de flujos de Klaviyo, que ya tiene configurados los filtros de flujo adecuados. Este flujo suele dirigirse a compradores potenciales más ocasionales que aún no han iniciado el proceso de pago.

El flujo de carrito abandonado activado por el evento Añadido al carrito se puede encontrar en la sección de objetivos «Prevenir la pérdida de ventas».

Si has implementado el fragmento de código Added to Cart de BigCommerce, este flujo estará listo para usarse con todos los filtros recomendados y contenido de email dinámico para impulsar emails personalizados de seguimiento del carrito.

Pasos a seguir si utilizas Buy with Prime de Amazon

Si utilizas Buy with Prime de Amazon para pagos y para completar pedidos de cualquiera de los productos de tu tienda, haz lo siguiente:

• Integra Buy with Prime con Klaviyo para llevar los datos 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 que los clientes que iniciaron una compra o realizaron compras a través de Buy with Prime no reciban mensajes incorrectos:
  
  • Ha iniciado el proceso de pago (Buy with Prime) cero veces desde el inicio de este flujo Y
  • Pedido Realizado (Buy with Prime) cero veces desde el inicio de este flujo.

Recursos adicionales