Cualquier (webshop)

FAQ

Respuestas a preguntas frecuentes para integraciones personalizadas

¿Tienes problemas con tu integración personalizada? Este FAQ cubre los problemas más comunes y sus soluciones, desde aplicaciones de página única hasta el seguimiento de ventas.

Aplicaciones de página única #

Estas también se conocen como Progressive Web Apps (PWA) y, en general, cargan el sitio como una sola página, en lugar de cargar páginas individuales como de costumbre.

Cuando una página se carga por primera vez, la biblioteca Clerk.js automáticamente dispara una función para renderizar todos Contenido en esa página.

Sin embargo, para aplicaciones de página única que utilizan frameworks como vue.js o next.js, las páginas se renderizan con JavaScript en lugar de una carga de página estándar.

Debido a esto, necesitas controlar el renderizado con Clerk.js para que coincida con la forma en que cargas las páginas en la aplicación.

Incluir Clerk.js #

Clerk.js solo necesita cargarse una vez, cuando el sitio se carga inicialmente.

Después de esto, la biblioteca estará disponible a lo largo de la sesión.

Inclúyelo justo antes de </head> en tu HTML:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Control rendering #

Por defecto, Clerk.js renderiza cualquier elemento que tenga la clase clerk, independientemente de si se inserta durante la carga inicial de la página o cuando el DOM cambia.

Puedes controlar el momento insertando el elemento cuando esté listo para ser renderizado.

Alternativamente, puedes controlar el renderizado con la función Clerk("content", "SELECTOR").

Cada vez que se carga una página, realiza estos pasos en este orden:

Agrega el fragmento de Clerk al HTML con un selector único al que puedas apuntar.
Ejecuta Clerk("content", "SELECTOR") para renderizarla.

Cuando el visitante salga de la página, destruye el fragmento y vuelve a renderizarlo si el visitante regresa a la misma página.

Esto es para asegurar que Clerk.js no vea el fragmento como renderizado previamente, lo que podría impedir su visualización.

Ejemplo:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Clerk.js también puede configurarse para inicializar Contenido automáticamente con tus selectores personalizados después de la primera vez que lo renders.

Impacto en Pagespeed #

La adición de una herramienta externa como Clerk.js aumentará el tiempo de carga de tu sitio, pero es prácticamente insignificante en comparación con las conversiones adicionales que proporcionará.

A continuación puedes ver cómo afecta al rendimiento de tu sitio.

Rendimiento #

La biblioteca Clerk.js tiene un tamaño de solo 37.5kb, por lo que se carga muy rápido.

Además, carga elementos de forma asíncrona, lo que significa que el resto de la página se carga mientras Clerk.js renderiza el contenido.

Un aumento en el tiempo de carga de una página normalmente proviene de cargar más imágenes que antes, ya que los resultados de búsqueda y las recomendaciones de Clerk funcionan mejor cuando son visualmente atractivos.

Para minimizar el tiempo de carga adicional, recomendamos usar imágenes en formato webp que tengan una resolución que coincida con el tamaño que tienen en los elementos de Clerk.

Por ejemplo, si las imágenes en recommendations tienen una resolución de 400x400px en la vista de escritorio, envía imágenes con una resolución máxima de 420x420px o similar.

Google Page Speed #

Si usas Google Page Speed Insights u otra herramienta similar para analizar el rendimiento de tu sitio, podrías ver Clerk.js listado bajo Leverage browser caching.

El propósito de Clerk.js es hacer que sea super simple insertar los resultados de Clerk en cualquier sitio web.

Clerk.js contiene muchas características para manejar el seguimiento y componentes de UI como Instant Search, sliders, popups y más.

Cuando añadimos nuevas características de UI o mejoramos las existentes, están incluidas en Clerk.js y deben ser descargadas por el usuario final para poder usarlas.

Tener una caducidad de caché de 60 minutos significa que cuando lanzamos nuevas características estarán disponibles para todos dentro de un máximo de 60 minutos.

Cuanto más largo sea el tiempo de caché, más tiempo tardará en que todos tengan acceso a las características más recientes.

Lo importante es que los usuarios finales solo tengan que descargar Clerk.js una vez cuando haya características nuevas disponibles.

La expiración de caché de 60 minutos simplemente significa que el navegador del usuario final comprobará con Clerk cada 60 minutos.

Si no se han realizado cambios en Clerk.js, no se descargará nada.

El tiempo de expiración de la caché de 60 minutos es, por tanto, un compromiso entre minimizar las peticiones web y ver nuevas características y mejoras.

La mayoría de las sesiones son menores a 60 minutos y, por tanto, la solicitud se realizará solo una vez por sesión.

Como se puede ver en la captura de pantalla, esto es una práctica normal que, al igual que Clerk, es utilizada por Google Analytics, Facebook, Trustpilot y muchos otros.

Impacto CLS #

Desplazamiento acumulativo de diseño (CLS) puede afectar negativamente al SEO y a la experiencia del usuario cuando el contenido dinámico desplaza los elementos de una página.

En algunos casos, entre otros factores, Clerk puede contribuir a la puntuación de CLS.

Puedes leer más sobre CLS aquí.

Sigue esta pauta solo en el caso de que tu puntuación CLS sea mayor que 0.2 y los elementos de Clerk estén por encima del pliegue.

Para evitar que el contenido se desplace, es necesario reservar un marcador de posición para Clerk recommendations antes de que Clerk.js injete los mismos.

Para hacerlo, debemos añadir una altura mínima basada en la altura de contenido esperada.

Ejemplo de código:

.clerk-slider-wrapper {
    min-height: 300px; /* Ajusta según la altura esperada del contenido */
    width: 100%;
}

Haciendo llamadas a la API #

Puedes usar Clerk.js para hacer llamadas a la API, utilizando la función integrada Clerk("call").

Esta función toma 3 argumentos:

Un endpoint de API
Un diccionario JSON de parámetros
Una función de callback para manejar la respuesta

Solicitudes #

A continuación se muestra un script de ejemplo que solicita los 10 productos más populares y registra la respuesta en la consola.

La respuesta contiene un objeto JavaScript con el estado de la llamada a la API y el resultado.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Home Page / Bestsellers"]
    },
    function(response){
      console.log(response);
    },
    function(response){
      console.error(response);
    }
  );
}

Respuesta #

__clerk_cb_1(
  {
    "status":"ok",
    "count":72,
    "facets":null,
    "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Callbacks #

Cuando haces llamadas a la API, puedes usar funciones callback para manejar la respuesta como te parezca.

Las funciones toman response como argumento, que contiene todos los datos devueltos por la API.

A continuación se muestra un ejemplo que crea una lista de elementos HTML que enlazan a categorías que coinciden con la consulta “men”.

Clerk("call",
  "search/categories",
  {
      'query': "men",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Related Categories';
          document.querySelector('#your-target').append(heading);
      }
      for (var index in cat) {
          var clerkName = cat[index].name;
          var clerkUrl = cat[index].url;
          let link = document.createElement('a');
          link.href = clerkUrl;
          link.textContent = clerkName;
          document.querySelector('#your-target').append(link);
      }
  }
)

Botones de añadir al carrito #

Estos botones funcionan de forma diferente según la plataforma y la funcionalidad puede cambiar según los plugins que uses.

Porque los diseños de Clerk consisten en HTML & CSS, normalmente puedes agregar esta funcionalidad si entiendes cómo funciona en tu sitio.

Enfoque general #

Algunos botones de añadir al carrito requieren JavaScript para funcionar.

En estos casos, puedes añadir la funcionalidad al método existente de Clerk de cart.

Consulta cómo hacerlo en nuestra documentación para desarrolladores aquí.

Inspecciona el botón de añadir al carrito para identificar el código asociado, por ejemplo, en una página de categoría.

El código normalmente será un <div> o un elemento button.

Copia todo el HTML del botón.

Copiá y pega este código en tu Diseño.

Ahora necesitas identificar las variables en el código.

La mayoría de las veces, necesitas encontrar dónde el código usa:

Product ID
Product quantity

Reemplaza los valores del product ID por las variables Liquid correspondientes a estos datos.

El ID siempre será {{ product.id }} y la cantidad variará según cómo envíes los datos.

Para este ejemplo podría ser {{ product.qty }}.

Pega tu código en el HTML de tu Diseño y pruébalo para asegurarte de que funciona.

Ejemplo #

El botón de añadir al carrito a continuación es un <div> que tiene la clase button-container:

La cantidad se encuentra dentro del enlace del carrito después de /cart?add= y el Product ID se encuentra justo después de &id_product=.

El Product ID también se hace referencia en data-id-product, y la cantidad del producto se referencia en .data-minimal_quantity.

Estos valores deben reemplazarse con etiquetas Liquid en el Diseño para que se usen los IDs y las cantidades de producto apropiados en la salida HTML.

Con estos cambios, el botón final de añadir al carrito quedará así:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Add to Cart" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Errores de consola #

Clerk.js registra muchos errores en la consola, que puedes usar para depurar problemas.

Al hacer clic en el enlace de error obtendrás más información sobre qué salió mal, la cual puedes usar para depurar el error tú mismo, o para enviarlo a nuestro equipo de soporte que te ayudará.

A continuación encontrarás una lista de los errores más comunes.

Contenido desconocido #

Este error aparecerá si el fragmento que insertaste está haciendo referencia a un Content que no existe, en el atributo data-template.

Para solucionarlo, asegúrate de que el nombre en el código de inserción coincida con un bloque Content que hayas creado en my.clerk.io.

Puedes hacer clic en Editar Contenido para cualquier Content, para ver cómo debería ser la referencia.

Endpoint de API inválido #

Este error ocurre si has utilizado la clase clerk en tu HTML en algún lugar.

Esta clase está reservada para su uso con nuestros fragmentos, ya que Clerk.js usa esta clase para identificar los elementos a renderizar.

Para solucionarlo, asegúrate de que nombres la clase de otra forma, como clerk-product.

Argumento de producto inválido #

Este error significa que el ID proporcionado para un producto tiene un tipo o sintaxis incorrectos.

Por ejemplo, si tus IDs de producto son enteros también deben serlo en el código de inserción.

También, recuerda los corchetes alrededor del ID, para hacerlos una lista.

<span 
  class="clerk" 
  data-template="@product-page" 
  data-products="[123]">
</span>

Argumento de categoría inválido #

Este error significa que el ID proporcionado para una categoría tiene un tipo o sintaxis incorrectos.

En la mayoría de los casos, sucede si el placeholder en el código de inserción de categoría no ha sido reemplazado por un ID real:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="INSERT_CATEGORY_ID">
</span>

La salida del código debe contener el ID de la categoría:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Si copiaste el fragmento manualmente, asegúrate de seleccionar tu sistema de tienda en el desplegable Choose your platform antes de copiar el fragmento.

Luego cambiará para incluir la lógica de tu plataforma y seleccionar el ID de categoría correcto.

Si tu plataforma no está listada, tendrás que añadir manualmente la lógica para seleccionar el ID de categoría correcto en función de la funcionalidad de tu webshop.

Clave API incorrecta #

Este error aparecerá si la clave API pública que has proporcionado no coincide con ninguna cuenta en Clerk.

Para solucionarlo, inicia sesión en my.clerk.io y ve a Developers > API Keys.

Aquí puedes encontrar la Public API Key que luego puedes añadir a tu script de tracking de Clerk.js ya sea directamente en el código, o en la configuración de tu integración, dependiendo de tu plataforma.

Datos de ventas de POS/ERP #

Para algunas tiendas online, es relevante subir datos de ventas de otros sistemas distintos a la tienda real.

Por ejemplo, si quieres optimizar el algoritmo basándote en ventas de una tienda física, o de una tienda B2B.

Clerk no diferencia entre pedidos de distintas fuentes; mientras puedas proporcionar un ID, una marca de tiempo y una lista de productos que se compraron, pueden subirse a Clerk.

El enfoque recomendado es usar el CRUD API ya que te permite automatizar la tarea por completo.

Implementando estas llamadas a la API, puedes enviar datos de pedido directamente a tu Store en Clerk.

Simplemente crea una llamada POST al endpoint /orders en tu sistema ERP o tienda, ejecuta el trabajo a intervalos regulares, por ejemplo, una vez al mes, y podrás usar pedidos offline para impulsar tus recomendaciones y resultados de búsqueda en línea.

Alternativamente, puedes subir un archivo CSV manualmente, sin necesidad de codificar nada.

Puedes leer más sobre archivos CSV aquí.

Conversión de divisas #

Existen varias formas de trabajar con conversión de divisas en Clerk.

Una forma sencilla de que funcione está descrita a continuación.

Enviar objetos de precios #

Clerk necesita conocer los precios de cada producto en las diferentes monedas.

La forma más fácil de hacerlo es enviarlos como un objeto JSON codificado en una cadena de precios formateados, con la ISO de la moneda como clave, en tu Data Feed.

"products": [
  {
    "id": 1,
    "name": "Cheese",
    "description": "A nice piece of cheese.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "on_sale": true,
    // String-encoded JSON examples
    "prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
    "list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"  
  },
  {
    "id": 2,
    "name": "A pound of nuts",
    "description": "That's a lot of nuts!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "on_sale": false,
    // String-encoded JSON example
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Crear formateador #

En Clerk.js puedes definir funciones JavaScript, que pueden utilizarse con tus Diseños.

Aquí puedes definir una función que tome tu diccionario de precios (price-dict) como argumento, y devuelva el precio para una moneda específica, basada en la lógica de frontend de tu elección.

Asegúrate de reemplazar currency por la moneda actualmente elegida desde el frontend.

Clerk('config', {
  key: 'Your_API_Key',
  formatters: {
      currency_selector: function (price_list) {
      const currency = "EUR";
      price_groups_obj = JSON.parse(price_list)
        return price_groups_obj[currency];
      }
  }
});

Usar formateador #

Después de definir el formateador, se puede usar en tu diseño con la sintaxis siguiente:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Precios específicos por cliente #

Para mostrar precios completamente únicos en función de qué cliente ha iniciado sesión, crea un Evento en Clerk que inserte el precio correcto antes de que los productos sean renderizados.

Eventos son funciones de JavaScript que se ejecutan antes o después de que Clerk muestre los productos.

Este enfoque es posible de usar si puedes buscar precios desde tu servidor, directamente desde una función de JavaScript, en el frontend basada en un product ID y un customer ID.

Para mostrar precios individuales por cliente, el código debe ejecutarse justo después de la respuesta.

A continuación se muestra un ejemplo de un simple evento.

<span class="clerk" data-template="@home-page-popular"></span>

<script>
  Clerk('on', 'response', function(content, data) {
     console.log(data.result);
  });
</script>

La función toma el argumento data que es la respuesta completa que Clerk envía de vuelta desde la API.

Precios por cliente individual #

Si necesitas mostrar precios completamente únicos en función de qué cliente ha iniciado sesión, necesitas configurar un Evento que inserte el precio correcto después de que los productos sean renderizados.

Los Eventos son funciones de JavaScript que se ejecutan antes o después de que Clerk muestre los productos.

Este enfoque supone que puedes buscar precios desde tu servidor con una llamada AJAX en el frontend basada, por ejemplo, en un product ID y un customer ID.

La mejor forma es primero crear un contenedor de precio provisional en tu diseño, y luego reemplazarlo con el precio devuelto por tu llamada AJAX.

Un ejemplo:

<div class="clerk-price-container">
   <span class="clerk-price">
      Loading price...
   </span>
</div>

Luego puedes usar el evento Clerk para esperar a que se rendericen los productos, hacer una solicitud a tu servidor de precios usando el product ID y el customer ID, antes de reemplazarlo en el HTML.

Aquí tienes un ejemplo de hacer esto:

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, data){
    for (i = 0; i < data.product_data.length; i++) {
        var product = data.product_data[i];
          var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
          let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
          price_container.innerText = custom_price;
      }
  })
  </script>

El código anterior asume que puedes identificar a un cliente conectado con INSERT_CUSTOMER_ID y que tienes una función como FETCH_PRICE_FROM_SERVER que devuelve el precio del producto en función del cliente.

price_container se usa para apuntar al producto correcto según el ID que está disponible en data-clerk-product-id, que Clerk.js añade a todos los productos.

Finalmente reemplaza el texto interno, “Loading price…” en este ejemplo, por el precio devuelto de tu llamada AJAX.

Precios por grupo de clientes #

La configuración de los precios por grupo de clientes consta de 4 pasos:

Incluir los distintos precios en el data feed.
Incluir una variable que obtenga el actual customer group ID.
Crear una función para obtener el precio relevante.
Mostrar el precio en el Diseño.

Incluir objetos de precio #

Comienza añadiendo un atributo a todos los productos que contenga todas las distintas opciones de precios, asegurándote de correlacionar cada precio con un grupo de clientes específico.

Esto debe enviarse como un objeto JSON codificado en cadena. Por ejemplo:

"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"

Variable de ID de cliente #

Añade una variable global dinámica a Clerk.js que obtenga el ID de grupo de cliente del cliente actual y lo agregue como valor.

El valor del ID de grupo de cliente debe ser equivalente a la clave de su precio correspondiente en el Data Feed.

Por ejemplo, un usuario que debería ver el precio para el grupo 2, entonces el ID debería ser “GROUP2”.

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

Obtener precio #

Ahora puedes crear un Formatter, que toma el customer_group como argumento y devuelve el precio relevante.

Hazlo escribiendo una función que recupere el precio del grupo de clientes específico como la clave en el price-dict basado en el customer_group ID.

Añade esto en la configuración de Clerk.js. A continuación se muestra un ejemplo llamado getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

Mostrar precio #

Cuando se haya creado el formateador getPrice, puedes llamarlo directamente en tu Diseño, junto con la lista de customer_group_prices que creaste en el paso 1:

<li style="text-align: center; width: 180px;">
	<a href="{{ product.url }}">
		<img src="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product | getPrice }}
	</div>
</li>

Precios específicos por cliente #

Eventos son funciones de JavaScript que se ejecutan antes o después de Clerk muestra los productos.

Este enfoque supone que puedes buscar precios desde tu servidor con una llamada AJAX en el frontend basada, por ejemplo, en un product ID y un customer ID.

La mejor forma es primero crear un contenedor de precio provisional en tu diseño, y luego reemplazarlo con el precio devuelto por tu llamada AJAX.

Un ejemplo:

<div class="clerk-price-container">
   <span class="clerk-price">
      Cargando precio...
   </span>
</div>

Aquí tienes un ejemplo de hacer esto:

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, data){
    for (i = 0; i < data.product_data.length; i++) {
        var product = data.product_data[i];
          var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
          let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
          price_container.innerText = custom_price;
      }
  })
  </script>

price_container se usa para apuntar al producto correcto según el ID que está disponible en data-clerk-product-id, que Clerk.js añade a todos los productos.

Finalmente reemplaza el texto interno, “Loading price…” en este ejemplo, por el precio devuelto de tu llamada AJAX.

Precios por grupo de clientes #

La configuración de precios por grupo de clientes consta de 4 pasos:

Incluir los distintos precios en el data feed.
Incluir una variable que obtenga el actual customer group ID.
Crear una función para obtener el precio relevante.
Mostrar el precio en el Diseño.

Incluir objetos de precio #

Comienza añadiendo un atributo a todos los productos que contenga todas las distintas opciones de precios, asegurándote de correlacionar cada precio con un grupo de clientes específico.

Esto debe enviarse como un objeto JSON codificado en cadena. Por ejemplo:

"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"

Variable de ID de cliente #

Añade una variable global dinámica a Clerk.js que obtenga el ID de grupo de cliente del cliente actual y lo añada como valor.

El valor del ID de grupo de cliente debe ser equivalente a la clave de su precio correspondiente en el Data Feed.

Por ejemplo, un usuario que debería ver el precio para el grupo 2, entonces el ID debería ser “GROUP2”.

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

Obtener precio #

Ahora puedes crear un Formatter, que toma el customer_group como argumento y devuelve el precio relevante.

Haz esto escribiendo una función que recupere el precio del grupo de clientes específico como la clave en el price-dict basado en el customer_group ID.

Añade esto en la configuración de Clerk.js. A continuación se muestra un ejemplo llamado getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

Mostrar precio #

Cuando se haya creado el formateador getPrice, puedes llamarlo directamente en tu Diseño, junto con la lista de customer_group_prices que creaste en el paso 1:

<li style="text-align: center; width: 180px;">
	<a href="{{ product.url }}">
		<img src="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product | getPrice }}
	</div>
</li>

Precios específicos por cliente #

Eventos son funciones de JavaScript que se ejecutan antes o después de Clerk muestra los productos.

Este enfoque asume que puedes buscar precios desde tu servidor con una llamada AJAX en el frontend basada en, por ejemplo, un product ID y un customer ID.

La mejor forma es primero crear un contenedor de precio provisional en tu diseño, y luego reemplazarlo con el precio devuelto por tu llamada AJAX.

Un ejemplo:

<div class="clerk-price-container">
   <span class="clerk-price">
      Cargando precio...
   </span>
</div>

Aquí tienes un ejemplo de hacer esto:

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, data){
    for (i = 0; i < data.product_data.length; i++) {
        var product = data.product_data[i];
          var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
          let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
          price_container.innerText = custom_price;
      }
  })
  </script>

price_container se usa para apuntar al producto correcto según el ID que está disponible en data-clerk-product-id, que Clerk.js añade a todos los productos.

Finalmente reemplaza el texto interno, “Loading price…” en este ejemplo, por el precio devuelto de tu llamada AJAX.

Precios por grupo de clientes #

La configuración de precios por grupo de clientes consta de 4 pasos:

Incluir los distintos precios en el data feed.
Incluir una variable que obtenga el actual customer group ID.
Crear una función para obtener el precio relevante.
Mostrar el precio en el Diseño.

Incluir objetos de precio #

Comienza añadiendo un atributo a todos los productos que contenga todas las distintas opciones de precios, asegurándote de correlacionar cada precio con un grupo de clientes específico.

Esto debe enviarse como un objeto JSON codificado en cadena. Por ejemplo:

"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"

Variable de ID de cliente #

Añade una variable global dinámica a Clerk.js que obtenga el ID de grupo de cliente del cliente actual y lo añada como valor.

El valor del ID de grupo de cliente debe ser equivalente a la clave de su precio correspondiente en el Data Feed.

Por ejemplo, un usuario que debería ver el precio para el grupo 2, entonces el ID debería ser “GROUP2”.

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

Obtener precio #

Ahora puedes crear un Formatter, que toma el customer_group como argumento y devuelve el precio relevante.

Haz esto escribiendo una función que recupere el precio del grupo de clientes específico como la clave en el price-dict basado en el customer_group ID.

Añade esto en la configuración de Clerk.js. A continuación se muestra un ejemplo llamado getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

Mostrar precio #

Cuando se haya creado el formateador getPrice, puedes nombrarlo directamente en tu Diseño, junto con la lista de customer_group_prices que creaste en el paso 1:

<li style="text-align: center; width: 180px;">
	<a href="{{ product.url }}">
		<img src="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product | getPrice }}
	</div>
</li>

Autenticación HTTP #

La autenticación HTTP se usa a menudo en sitios de staging para evitar visitantes no deseados.

Esto, en muchos casos, bloqueará también al importador de Clerk y típicamente mostrará un error 401 Unauthorized en el registro de sincronización.

Puedes solucionarlo insertando la información de autenticación en la URL de importación.

En my.clerk.io > Data > Configuration, actualiza tu URL de importación así:

http://USER:PASS@www.ewoksRus.com/JSONFEED

No hay pedidos rastreados #

En my.clerk.io, Pedidos rastreados y Detalles de pedido se fusionan en una única página Pedidos.

Clerk necesita rastrear continuamente las ventas desde la tienda online para mantener los resultados actualizados con el comportamiento de tus clientes.

Sin embargo, algunas configuraciones en una tienda online pueden hacer fallar el seguimiento de ventas.

A continuación puedes averiguar cómo depurar el seguimiento de ventas cuando se usa una configuración de Clerk.js y ver cuáles son los problemas y soluciones más comunes.

Antes de empezar #

Asegúrate de haber instalado:

El script de seguimiento de Clerk.js en todas las páginas.
El script de seguimiento de ventas en tu Página de éxito de pedido.

Estos son necesarios para rastrear ventas en general cuando usas una configuración de Clerk.js.

Revisar los registros #

En la mayoría de los casos, el seguimiento de ventas falla debido a errores en los IDs de visitante o de producto de la llamada de venta que se envía a Clerk después de que se haya completado una compra.

Para depurarlo, tendrás que hacer un pedido de prueba.

Sin embargo, en algunos casos podría estar relacionado con el propio script de seguimiento de ventas y se puede depurar mirando los registros en my.clerk.io > Developers > Logs.

Si el seguimiento de ventas falla debido a un error en tu script, a menudo podrás ver el error en esta página.

Haz clic en Details para ver más.

Si no puedes ver ningún error en los registros, la forma más fácil de identificar otros problemas de seguimiento de ventas es realizar un pedido de prueba.

Depuración de pedido de prueba #

En este ejemplo, usamos Chrome para mostrar cómo depurar el seguimiento de ventas con un pedido de prueba, pero otros navegadores tienen características similares.

En tu tienda online, añade un par de productos al carrito.
Procede a Checkout.
Antes de realizar el pedido, abre la Consola de tu navegador.
Localiza Network, y busca “clerk”.
Realiza el pedido, para que veas la página de confirmación del pedido.
Haz clic en la llamada que empieza con sale (normalmente sale?key=…).

Aquí verás los datos que se envían y reciben por el endpoint de la API de seguimiento de ventas.

Haz clic en Preview para identificar cualquier error que pueda hacer que las ventas no se rastreen.

A continuación se muestran errores comunes asociados con el seguimiento de ventas.

Sintaxis de productos inválida #

Este error ocurre si los product IDs que envías tienen una sintaxis incorrecta.

Los errores más comunes son:

Los product-IDs están string-encoded en el seguimiento de ventas, pero estás usando Integers en Clerk o viceversa.
La lista de IDs de producto contiene caracteres de formato de texto en lugar de JSON puro: "products":\[\\"id"\\:\\"123-m"\\\].

Falta de argumento #

Esto significa que no estás enviando todos los datos que Clerk necesita para rastrear la venta.

Asegúrate de incluir todos los atributos de datos en el seguimiento de ventas.

No se realizó la llamada #

Si no puedes ver la llamada a sale incluso con ambos scripts instalados, entonces algo ha provocado que el script de Clerk.js se cargue incorrectamente.

Prueba esto siguiendo estos pasos:

Abre la Consola en tu navegador.
Escribe “Clerk”.
Si Clerk.js no se ha cargado correctamente, verás un ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Si este es el caso, necesitas revisar tu configuración de Clerk.js:

Asegúrate de que Clerk.js esté instalado en todas las páginas.
Asegúrate de que no esté bloqueado por otra funcionalidad de JavaScript.

Sin impacto de Clerk #

Si consigues rastrear ventas en my.clerk.io, pero ninguna de ellas aparece como impactada por Clerk, podrías tener un error en tu configuración de visitor-tracking / click-tracking.

Comienza asegurándote de que visitor-tracking funciona, haciendo lo siguiente:

Haz clic en cualquier producto a través de Search o Recommendations de Clerk.
Procede a hacer un pedido que contenga este producto.
Inicia sesión en my.clerk.io y ve a Órdenes.
Espera a que aparezca el Pedido.

Si visitor-tracking está funcionando, verás el valor agregado por Clerk en los detalles del pedido en la página de Órdenes:

Si no ves ningún valor agregado en el pedido que realizaste, las siguientes secciones muestran errores comunes que podrían causarlo.

Configuraciones de API #

Si configuraste Clerk con una integración personalizada directamente con la API, necesitas habilitar activamente el visitor-tracking.

Lee cómo hacerlo en este artículo de API.

IDs de producto incorrectos #

Para que el visitor-tracking funcione, el click- y el seguimiento de ventas deben rastrear los mismos IDs de producto que recibimos en el importador.

Normalmente si esto no funciona es porque estás rastreando IDs de variante en lugar de IDs padres o el SKU en lugar del ID.

Para comprobar si este es el problema, haz lo siguiente:

En my.clerk.io, ve a Data > Orders y haz clic en el ID de un pedido que realizaste.
Si Clerk no puede identificar el producto, verás un marcador de ID e imagen.
Ve a Data > Products y busca el nombre del producto que añadiste. Aquí podrás ver el ID esperado para el producto.

Utiliza esto para configurar tu seguimiento de ventas para usar los IDs de producto correctos.

Cambios de Visitor ID #

Clerk utiliza un Visitor ID para identificar cada sesión individual, incluidos los productos en los que hacen clic y compran.

Debido a esto, los IDs deben permanecer iguales al menos durante toda la sesión, y preferiblemente a través de varias sesiones.

Este Visitor ID se crea automáticamente al usar Clerk.js para la configuración, pero si usas una configuración de API, o personalizas tus visitor IDs, podrías cambiarlo accidentalmente.

Este error es raro, pero puedes comprobar el Visitor ID siguiendo estos pasos:

Abre las configuraciones de Network en el navegador y limita los resultados a “clerk”.
Comienza comprobando cualquiera de las llamadas undefined relacionadas con búsqueda o recomendaciones.
En payload puedes verificar el actual Visitor ID. Podrás hacer esto para todas las llamadas asociadas con Clerk.
Procede a hacer clic en el producto y realiza un pedido con este producto.
En la página de Order Success, revisa de nuevo tu Network y encuentra la llamada a sale?.
Asegúrate de que visitor en el payload coincida con el Visitor ID que viste en el paso 3.

Si los IDs de visitor no coinciden, debes averiguar por qué cambian.

Una causa común de cambios en los Visitor IDs podría ser si vuelves a generar los IDs para cada nueva página que se carga.

Actualiza tu código para usar el mismo Visitor ID en cada página.

Actualización a Clerk.js 2 #

Clerk.js 2 es una versión más rápida y flexible de nuestra biblioteca de JavaScript.

Facilita la instalación de Clerk en cualquier tienda online.

Sin embargo, como las dos versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar con éxito.

Las dos principales diferencias en Clerk.js 2 son:

Los Diseños en my.clerk.io usan el Liquid, pero también se pueden crear fácilmente utilizando el Design Editor.
El script debe insertarse justo antes de la etiqueta </head> en la plantilla de tu tienda online.

Crear diseños #

Dado que Clerk.js 2 tiene un enfoque diferente para los Diseños, necesitas crear nuevos.

Puedes crear tus Diseños de Clerk.js 2 ya sea rehaciéndolos en el Editor de Diseño, o convirtiendo tus Diseños antiguos de código a Liquid, como explica la guía a continuación.

A continuación se describe cómo convertir tus Diseños antiguos de código a Liquid.

Opción del Editor de Diseño #

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona un tipo de diseño que no sea Blank y ponle un nombre. Recomendamos añadir “V2” para que quede claro que estás usando Clerk.js 2 diseños.
En el Editor de Diseño, haz clic en cualquiera de los elementos existentes como el nombre, la imagen, el botón, etc. para editarlo, o añade nuevos elementos al Diseño.
Haz clic en Publicar Diseño cuando hayas terminado, y ve a Paso 2 de la guía.
Ve a Recommendations/Search > Elements y cambia tu Clerk Content para usar tu nuevo Diseño, luego haz clic Update Content.
Esto hará que temporalmente no aparezcan en tu tienda en línea, hasta que hayas insertado Clerk.js 2 como se describe más abajo en esta guía.

Conversión de diseños #

Como Clerk.js 2 utiliza el lenguaje de plantillas más flexible Liquid, necesitas convertir los Diseños a este lenguaje.

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona Blank > Code y ponle un nombre. Recomendamos añadir “V2” para que quede claro que estás usando Clerk.js 2 diseños.
Haz clic en Crear Diseño.
Esto te dará un diseño en blanco con HTML de Producto y CSS que puedes usar.
Vuelve a la vista general del diseño y haz clic en Editar Diseño para tu Clerk.js 1 Design. Recomendamos hacer esto en una pestaña nueva para que puedas copiar fácilmente el código.
Copia tu antiguo Clerk.js 1 Design a tu nuevo Clerk.js 2 Design.
- Notarás que no hay Container Code en el nuevo.
- Esto se debe a que Liquid usa for loops para renderizar todos los productos.
- Copia tu antiguo Product HTML inside the for-loop, tu antiguo Container Code around él y copia también el CSS.
Convierte el Diseño a la sintaxis de Liquid. La diferencia principal es que los diseños antiguos usaban la sintaxis {{ formatter attribute }} mientras que la sintaxis de v2 es {{ product.attribute | formatter }}.
Revisa todos tus atributos y cámbialos al nuevo formato.
Si usas declaraciones {{#if}} o {{#is}}, también deben convertirse. Usa la sintaxis {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" y la clase :target del código del contenedor en la versión Clerk.js 2, ya que ya no son compatibles.
A continuación se muestra un ejemplo de un Clerk.js 1 Design y su versión completamente convertida:

Clerk.js 1 Design #

// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Clerk.js 2 Design #

<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

Haz clic en Actualizar Diseño para guardar los cambios.
Ve a Recommendations/Search > Elements y cambia tu bloque de Contenido para usar tu nuevo Diseño.
Haz clic en Actualizar Contenido. Esto hará que temporalmente no aparezcan en tu tienda en línea, hasta que termines con Paso 2. Elige el nuevo Diseño para todo el Contenido que deba actualizarse.

Reemplazar el script #

Localiza el archivo de plantilla que se usa para mostrar todas las páginas de la tienda en línea, y dónde se encuentra el script original de Clerk.js cerca del final.
Elimina el script antiguo de Clerk.js del archivo. Se verá aproximadamente así:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Ve a my.clerk.io > Developers > Tracking Code. Esto contiene el código de Clerk.js 2.
Copia este código, insértalo justo antes de la etiqueta </head> en la plantilla, y guárdalo.

¡Felicidades! Ahora estás usando una configuración de Clerk.js 2 mucho más avanzada.

Puedes ver la documentación completa de Clerk.js 2 aquí.

Manejo de require.js #

Esta sección solo se aplica cuando se usa Clerk.js 1.

En algunos entornos, Require.js impide que Clerk.js se cargue, lo que significa que no se mostrarán deslizadores ni resultados de búsqueda.

Cuando esto sucede, se mostrará el siguiente error en tu consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos formas de manejar Require.js. Ambos enfoques requieren que hagas cambios en el tracking-script, que has insertado al final de todas las páginas.

Incluir en Require.js #

El mejor enfoque es intentar que Require.js reconozca Clerk.

Puedes hacer esto insertando require(['clerk'], function() {}); al final del script de seguimiento:

Ignorar Require.js #

Si la solución anterior no funciona, es posible ignorar Require.js.

Puedes hacerlo insertando window.__clerk_ignore_requirejs = true; en la parte superior del script de seguimiento:

Después de usar alguno de estos enfoques, Require.js será compatible con Clerk.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.