Cómo crear un evento "Se añadió al carrito" para BigCommerce

Objetivos del artículo

Aprende a crear un evento Se añadió 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 Se añadió al carrito no se registran automáticamente cuando integras BigCommerce; primero debes añadir (y, posiblemente, modificar) un fragmento de JavaScript (incluido en esta guía) en los archivos de tema de BigCommerce.

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

Antes de empezar

El evento Añadido al carrito solo se rastrea para usuarios que anteriormente recibieron cookies de Klaviyo.

Ya debes tener instalado el seguimiento de Producto Visto para que el evento Se añadió al carrito funcione correctamente. Normalmente, los clientes de Klaviyo instalan esto durante el proceso de integración con BigCommerce y las instrucciones se pueden encontrar en nuestro artículo de integración.

Añade el fragmento de código

1. Abre el panel de administración de BigCommerce y ve a Storefront > My Themes.
2. Encuentra el tema actual y haz clic en el menú desplegable Configuración avanzada.
3. Busca el archivo product.html y haz clic para abrirlo.
4. Pega el fragmento de código a continuación directamente debajo del fragmento de código Viewed Product de Klaviyo.

<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, revisa si necesitas modificar tu snippet. Para hacerlo, tendrás que comprobar el ID del botón "Add to Cart" en tu sitio y ver si coincide con la variable "Add to Cart" resaltada en el fragmento de abajo, cuyo valor predeterminado es form-action-addToCart.
   

2. Para verificar el ID del botón, abre una de las páginas de producto del sitio, haz clic derecho en el botón "Agregar al carrito" y selecciona Inspeccionar.
   

3. Se abrirá la consola, que muestra 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, así que no es necesario hacer cambios.
   • Si el ID del botón "Agregar al carrito" en tu sitio no es form-action-addToCart, tendrás que cambiar el texto de la variable dentro de las comillas para que coincida con el ID del botón.
5. Si el código fuente no muestra un ID de botón, salta 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 termines, guarda el archivo product.html.

Terminaste de agregar el fragmento de código y ahora rastrearás el evento Added to Cart.

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

Por razones de estilo, algunos sitios usan una notación de clase en lugar de un ID de botón para los botones de “Agregar al carrito”.

Si el botón “Agregar al carrito” no tiene un ID de botón (que puedes determinar si sigues 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 a continuación para habilitar el evento Agregado al carrito.

1. Si tu botón se define por notación de clase, pega el siguiente fragmento alternativo en la parte inferior del 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 este código deba modificarse con el nombre de la clase. Compara el nombre de la clase del 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 que refleje el nombre de clase de tu botón.

2. Por ejemplo, el fragmento de código que aparece a continuación se modificó con el valor de classname btn product-form_cart-submit btn--secondary-accent entre comillas dobles.
   

3. Guarda el archivo product.html

Una vez que guardes, habrás terminado de agregar el fragmento de código y ahora podrás rastrear el evento Added to Cart.

Solución de problemas de tu fragmento de código "Se añadió al carrito"

Después de agregar el fragmento, debe monitorear el botón "Agregar al carrito" y registrar un evento Added to Cart cada vez que un visitante con cookies haga clic en este botón.

Este evento funciona de forma similar al evento Viewed Product. Cada artículo que alguien agregue a su carrito activará un nuevo evento. Puedes ver estos eventos de la siguiente manera:

1. Navegar a Análisis > Métrica en Klaviyo
2. Buscar el evento
3. Al hacer clic en Fuente de actividades
   
   

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

• Asegúrate de que Klaviyo.js (también conocido como el fragmento Con actividad en el sitio) esté funcionando, lo cual es necesario para que Se añadió al carrito funcione correctamente. Esto debería haberse agregado al sitio automáticamente cuando hiciste la integración con Klaviyo, pero puedes comprobar que funciona siguiendo los pasos en la sección de confirmación de la instalación del seguimiento en el sitio de nuestro artículo de integración de BigCommerce.
• Comprueba que el seguimiento de Producto visto funciona, lo cual también es necesario para que Agregado al carrito funcione correctamente. Este fragmento se agrega de forma manual, y puedes aprender cómo agregarlo y probarlo en la sección Producto visto de nuestro artículo sobre integraciones.

Si todavía tienes problemas con el fragmento de Se añadió al carrito, podría deberse a un problema para identificar el botón “Añadir al carrito”. En ese caso, ponte en contacto con el equipo de asistencia de Klaviyo.

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

Al crear un flujo de carrito abandonado (ya sea con Added to Cart o Started Checkout), puedes aprovechar Klaviyo SMS además del correo electrónico. Por razones de cumplimiento, asegúrate de enviar solo un SMS en el flujo y, si usas 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 con el evento Started Checkout.

Para empezar con un flujo de carrito abandonado usando el evento Added to Cart, recomendamos usar el flujo prediseñado disponible en la biblioteca de flujos de Klaviyo, que ya tiene el filtro de flujo correcto configurado. 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 que se activa con el evento Added to Cart se encuentra en la sección de objetivo "Evitar ventas perdidas".

Si implementaste el fragmento de código de BigCommerce Se añadió al carrito, este flujo estará listo para usarse con todos los filtros recomendados y el contenido dinámico de correo electrónico listo para impulsar correos electrónicos personalizados de seguimiento del carrito.

¿Estás usando Buy with Prime de Amazon?

Si usas 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 trasladar los datos de Buy with Prime a tu cuenta de Klaviyo.
• En tu flujo de carrito abandonado activado por el evento "Se Añadió al Carrito", añade los siguientes filtros de flujo para excluir a los clientes que iniciaron procesos de pago o realizaron compras a través de Buy with Prime. Así, no recibirán mensajes inadecuados:
  
  • Proceso de 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