Cómo crear manualmente un evento «Added to Cart» para Shopify

Qué aprenderás

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

Añadido a la cesta 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 continúa 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 nuestro artículo 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 debo 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 Personalizar.
3. En la parte superior de la página, haz clic en el menú desplegable Página de inicio.
4. Selecciona Productos > Producto predeterminado para acceder a la página de tu producto predeterminado.
5. Haz clic en Añadir sección en la barra lateral izquierda y selecciona Liquid personalizado.
6. Pega el fragmento proporcionado en la casilla.
7. Pulsa Guardar en la esquina superior derecha.
8. En la barra lateral izquierda, tu nuevo bloque de Liquid personalizado para 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 Personalizar.
3. Haz clic en los tres puntos de la parte superior y selecciona 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 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 decidiste 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 saber más sobre a quién registra Klaviyo, consulta nuestro artículo sobre el seguimiento in situ. 

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 con 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 este evento Añadido al carrito en tu canal de actividad.

¿No consigues registrar Añadido al carrito con este fragmento?

Si no consigues registrar 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 seguridad 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 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" 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 algo como id = "button_ID_name); 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 debo colocar 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:

Sigue los mismos pasos para comprobar el ID del botón que 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 debo colocar 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 abandonado de "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 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 la biblioteca de flujos de Klaviyo:

1. Accede a la biblioteca 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.

¿Utilizas Amazon Buy con Prime?

Si utilizas Comprar con Prime (Buy with Prime) para permitir el pago y la consecución de cualquiera de los productos de tu tienda, haz lo siguiente:

• Integra Comprar con Prime con Klaviyo para llevar los datos de Comprar con Prime a tu cuenta de Klaviyo.
• En tu flujo de "Añadido al carrito" abandonado, añade los siguientes filtros de flujo para que los clientes que iniciaron una compra o realizaron compras a través de Comprar con Prime no reciban mensajes incorrectos:
  
  • Ha iniciado el proceso de pago (Comprar con Prime) cero veces desde el inicio de este flujo Y
  • Ha realizado un pedido (Comprar con 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 Añadido al carrito abandonado. 

Recursos adicionales

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