Cómo crear manualmente un evento «Añadido al Carrito» para Shopify

Qué aprenderás

Descubre cómo crear manualmente un evento Añadido al Carrito para Shopify que registre si un cliente añade un artículo al carrito, y úsalo para activar un flujo de carrito abandonado. 

Añadido al Carrito difiere del evento Pago Iniciado de Klaviyo. Pago Iniciado se activa cuando un cliente añade un artículo a su carrito, introduce su correo durante el proceso de pago y se dirige a la página de pago. Esto ocurre más adelante en el embudo, mientras que Añadido al Carrito se activa en cuanto un cliente añade un artículo a su carrito. 

Antes de empezar

• Lee Introducción a Shopify para obtener instrucciones detalladas sobre la integración antes de continuar leyendo este artículo.
• Asegúrate de haber habilitado el seguimiento en el sitio de Klaviyo (incluido el seguimiento de «Producto Visto») para que el evento «Añadido al Carrito» funcione correctamente.
• Ten en cuenta que el evento «Añadido al Carrito» solo registra a los usuarios con cookies de Klaviyo.

Crea el evento «Añadido al Carrito»

El evento Añadido al Carrito se crea en tres pasos: 

1. Elige dónde colocar el fragmento de código.
2. Añade el fragmento a tu tienda.
3. Prueba el fragmento de código.

Dónde pegar el fragmento

Asegúrate de pegar el fragmento tanto en la página de tu producto predeterminado, como en cualquier otra página de producto que puedas tener.

Si en tu tienda hay bloques de Liquid personalizados, debes usar uno para el fragmento 

1. En Shopify, accede a Online Store > Themes (Tienda en línea > Temas).
2. Busca tu tema y haz clic en Customize (Personalizar).
3. En la parte superior de la página, haz clic en el menú desplegable Home page (Página de inicio).
4. Selecciona Products > Default product (Productos > Producto predeterminado) para acceder a la página de tu producto predeterminado.
5. Haz clic en Add section (Añadir sección) en la barra lateral izquierda y selecciona Custom Liquid (Liquid personalizado).
6. Pega el fragmento proporcionado en la casilla.
7. Pulsa Save (Guardar) en la esquina superior derecha.
8. En la barra lateral izquierda, tu nuevo bloque de Liquid personalizado para el evento Añadido al Carrito aparecerá automáticamente debajo de las demás secciones de la página.
   • Si es necesario mover el bloque Añadido al Carrito, sitúa el cursor del ratón encima del bloque y haz clic en los 6 puntos para arrastrarlo debajo de tus otras secciones.
     
     

Si tu tienda no tiene bloques de Liquid personalizados, coloca el fragmento en el archivo theme.liquid

1. En Shopify, accede a Online Store > Themes (Tienda en línea > Temas).
2. Busca tu tema y haz clic en Customize (Personalizar).
3. Haz clic en los tres puntos de la parte superior y selecciona Edit code (Editar código).
4. Abre el archivo theme.liquid.
5. Pega el fragmento proporcionado después del resto del código antes de la etiqueta de cierre </body>.
   
6. Encima del fragmento, añade la siguiente etiqueta de apertura: {% if product %}
   .
7. Directamente después del fragmento, añade la siguiente etiqueta de cierre: {% endif %}.
8. El archivo debe mostrarse así:
   
9. Pulsa Save (Guardar).

Añade el fragmento a tu sitio

El siguiente fragmento Añadido al Carrito debería funcionar en la mayoría de las tiendas de Shopify.

Añade el siguiente fragmento a tu tienda de Shopify en el lugar que elegiste previamente.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   fetch(`${window.location.origin}/cart.js`)
   .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    if (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
      return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  for (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

Cuando hayas terminado, prueba el evento siguiendo las instrucciones descritas en la siguiente sección.

Prueba tu evento «Añadido al Carrito»

Es importante tener en cuenta que Klaviyo solo registra los «navegadores conocidos» o aquellos que se han añadido a las cookies (haciendo clic en un correo electrónico, rellenando un formulario, etc.). Por este motivo, es posible que los eventos Añadido al Carrito no empiecen a aparecer en tu cuenta tan rápido como esperarías. Para obtener más información sobre a quién registra Klaviyo, consulta nuestro artículo sobre el seguimiento en el sitio. 

Para probar un evento Añadido al Carrito, debes añadir manualmente tu dirección de correo electrónico a las cookies. Sigue estos pasos:

1. Accede a tu sitio web.
2. En la página de inicio, añade lo siguiente al final de la URL, sustituyendo testing.email@gmail.com por tu dirección de correo electrónico:
   ?utm_email=testing.email@gmail.com
   
   
3. Vuelve a cargar la página.
4. Accede a la página de un producto en tu sitio web y haz clic en el botón Añadir al carrito.
5. Busca tu dirección de correo electrónico en Klaviyo.
   

Deberías ver que se ha creado un perfil de Klaviyo para ti (si no tenías ya uno) y que se ha registrado el evento Añadido al Carrito en tu fuente de actividad.

Qué hacer si no puedes registrar el evento «Añadido al Carrito» con este fragmento

Si no consigues registrar el evento Añadido al Carrito con este fragmento, prueba los dos fragmentos siguientes, a los que nos referiremos como Fragmento 2 y Fragmento 3. Antes de probar un nuevo fragmento, asegúrate de eliminar primero el que no ha funcionado.

Decide qué fragmento de reemplazo quieres probar

¿Utiliza tu tienda un ID de botón para definir el botón Añadir al carrito? Si la respuesta es afirmativa, prueba con el Fragmento 2. Si, por el contrario, a tu botón Añadir al carrito lo define una notación de clase, usa el Fragmento 3. A continuación explicamos cómo averiguar si tu tienda utiliza un ID de botón o una notación de clase:

1. 1. Abre una de las páginas de producto de tu sitio web. 
   2. Haz clic con el botón derecho del ratón en «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» en la pestaña Elementos de la consola.
   4. En la pestaña Elementos, el código puede mostrarse así:
      
   5. Observa que este botón «Añadir al carrito» no tiene un ID de botón (que incluiría id = "button_ID_name" o similar); en su lugar, se hace referencia a él mediante una notación de clase (class= "btn product-form_cart-submit btn–secondary-accent").

Fragmento 2

Si al botón Añadir al carrito lo define un ID de botón, añade el fragmento que aparece a continuación a tu tienda de Shopify en el lugar que decidiste en la sección «Dónde pegar el fragmento», junto con las etiquetas que sean necesarias.

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

Es probable que sea necesario modificar este fragmento, ya que la variable Añadir al Carrito del fragmento debe coincidir con el ID del botón que estás usando en tu sitio.

La variable Añadir al Carrito, cuyo nombre predeterminado es AddToCart, aparece resaltada en el siguiente fragmento:

Para comprobar el ID del botón, sigue los mismos pasos que utilizaste para comprobar la presencia de un ID de botón en tu sitio: 

1. Abre alguna de las páginas de producto de tu sitio web.
2. Haz clic con el botón derecho del ratón en el botón «Añadir al carrito» y selecciona Inspeccionar.
3. La consola se abrirá y mostrará el código fuente de tu botón «Añadir al carrito». La siguiente imagen muestra el ID del botón «Añadir al carrito» resaltado en la consola.
   
   El ID del botón de la página que se muestra aquí (addToCart-product-template) es diferente de la variable del fragmento predeterminado (AddToCart). 
4. Si no coinciden, modifica el fragmento para que coincida con el ID de tu botón. El fragmento modificado de nuestro ejemplo es así:
   

Fragmento 3

Si a tu botón Añadir al carrito lo define la notación de clase, añade el fragmento siguiente a tu tienda de Shopify en el lugar que hayas determinado en la sección «Dónde pegar el fragmento», junto con las etiquetas que sean necesarias.

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

Es probable que sea necesario modificar este fragmento, ya que la variable Añadir al Carrito del fragmento debe coincidir con la clase que estás usando en tu sitio.

1. Abre alguna de las páginas de producto de tu sitio web.
2. Haz clic con el botón derecho del ratón en el botón «Añadir al carrito» y selecciona Inspeccionar.
3. La consola se abrirá y mostrará el código fuente de tu botón «Añadir al carrito». La siguiente imagen muestra el ID de la clase «Añadir al carrito» resaltada en la consola.
   
4. Compara el código de tu botón entre comillas, resaltado en el ejemplo anterior, con el contenido entre paréntesis después de getElementsByClassName en el fragmento de código anterior. Por ejemplo, la clase que aparece en la captura de pantalla es btn product-form_cart-submit btn--secondary-accent y la variable que aparece en el fragmento es add-to-cart.
5. Si no coinciden, modifica el fragmento para que coincida con la case de tu botón. El fragmento modificado de nuestro ejemplo es así:
   

Si no consigues realizar el seguimiento de Añadido al Carrito después de probar estas opciones, podría deberse a un problema de identificación del botón Añadido al carrito. En este caso, ponte en contacto con el servicio de asistencia de Klaviyo.

Siguiente paso: habilitar el flujo de carrito abandonado activado por el evento «Añadido al Carrito»

El flujo de carrito abandonado predeterminado de Klaviyo se activa a través del evento Pago Iniciado, mientras que el flujo de carrito abandonado activado por el evento Añadido al Carrito se dirige a compradores más ocasionales que aún no han iniciado el pago.

Para habilitar este flujo, recomendamos usar el flujo prediseñado disponible en el repositorio de flujos de Klaviyo:

1. Accede al repositorio de flujos de Klaviyo.
2. Haz clic en la sección «Evitar la pérdida de ventas».
3. Selecciona un flujo Activador de «Añadido al Carrito», Recordatorio de carrito abandonado. Hay dos opciones: solo correo electrónico, o correo electrónico y SMS.
   
4. Si has creado el evento Añadido al Carrito, este flujo podrá usarse con todos los filtros recomendados. El contenido de correo electrónico dinámico estará listo para enviar mensajes 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 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 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
  • Ha realizado un pedido (Buy with Prime) cero veces desde el inicio de este flujo.

Resultado 

Has creado y probado un evento de Añadido al Carrito de Shopify, y has habilitado un flujo de carrito abandonado activado por el evento Añadido al Carrito. 

Recursos adicionales

• Introducción al flujo de carrito abandonado
• Referencia de datos de Shopify
• Solución de problemas de la integración con Shopify