Cualquier (webshop)

FAQ

Respuestas a preguntas frecuentes sobre integraciones personalizadas

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

Aplicaciones de una sola página #

Estas también se llaman Aplicaciones Web Progresivas (PWA) y generalmente cargan el sitio como una sola página, en lugar de cargar páginas individuales como es habitual.

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

Sin embargo, para aplicaciones de una sola página que usan 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 páginas en la app.

Incluir Clerk.js #

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

Después de esto, la biblioteca estará disponible durante toda la sesión.

Inclúyelo justo antes del </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 -->

Controlar el renderizado #

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 renderizarse.

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

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

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

Cuando el visitante abandone la página, destruye el snippet y vuelve a renderizarlo si el visitante regresa a la misma página.

Esto es para asegurar que Clerk.js no vea el snippet como previamente renderizado, causando que no lo visualice.

Ejemplo:

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

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

Clerk.js también se puede configurar para inicializar automáticamente los Elementos con tus selectores personalizados después de la primera vez que lo renderizas.

Impacto en Pagespeed #

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

A continuación puedes ver cómo impacta en el rendimiento de tu sitio.

Rendimiento #

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

Además, carga los 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 suele provenir de cargar más imágenes que antes, ya que los resultados de búsqueda y recomendaciones de Clerk funcionan mejor cuando son visualmente atractivos.

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

Por ejemplo, si las imágenes de las recomendaciones tienen una resolución de 400x400px en 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 o una 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 muy sencillo insertar resultados de Clerk en cualquier sitio web.

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

Cuando agregamos nuevas funcionalidades de UI o mejoramos las existentes, se incluyen en Clerk.js y deben ser descargadas por el usuario final para poder utilizarlas.

Tener una expiración de caché de 60 minutos significa que cuando lanzamos nuevas funcionalidades estarán disponibles para todos en un máximo de 60 minutos.

Cuanto mayor sea el tiempo de caché, más tiempo tomará para que todos tengan acceso a las nuevas funcionalidades.

Lo importante es que los usuarios finales solo necesitan descargar Clerk.js una vez cuando haya nuevas funcionalidades disponibles.

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

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

El tiempo de expiración de caché de 60 minutos es, por tanto, un equilibrio entre minimizar solicitudes web y ver nuevas funcionalidades y mejoras.

La mayoría de las sesiones duran menos de 60 minutos, por lo que la solicitud solo se realiza una vez por sesión.

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

Impacto en CLS #

El Cumulative Layout Shift (CLS) puede impactar negativamente en el SEO y la experiencia del usuario cuando el contenido inyectado dinámicamente desplaza elementos en 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 guía solo si tu puntuación de CLS es 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 espacio para las recomendaciones de Clerk antes de que Clerk.js las inyecte.

Para hacerlo, debemos agregar una altura mínima basada en la altura esperada del contenido.

Ejemplo de código:

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

Realización de llamadas a la API #

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

Esta función toma 3 argumentos:

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

Solicitudes #

Abajo hay 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 de 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 realices llamadas a la API, puedes utilizar funciones callback para manejar la respuesta de la manera que desees.

Las funciones reciben response como argumento, el cual contiene todos los datos retornados por la API.

Abajo tienes 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 = 'Categorías relacionadas';
          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 diferente para cada plataforma y la funcionalidad puede cambiar según los plugins que uses.

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

Enfoque general #

Algunos botones de añadir al carrito requieren que JavaScript se ejecute para que funcionen.

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

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.

Copia 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 utiliza:

ID del producto
Cantidad del producto

Reemplaza los valores del ID del producto por las variables Liquid para estos datos.

El ID siempre será {{ product.id }} y la cantidad diferirá dependiendo de 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 al carrito después de /cart?add= y el ID del producto se encuentra justo después de &id_product=.

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

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

Con estos cambios, el botón final de añadir al carrito se verá 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 en la consola #

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

Al hacer clic en el enlace del error obtendrás más información sobre lo que salió mal, que puedes usar para solucionar el error tú mismo, o enviar a nuestro equipo de soporte, quienes te ayudarán.

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

Contenido desconocido #

Este error aparecerá si el snippet insertado hace referencia a un Element que no existe, en el atributo data-template.

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

Puedes hacer clic en Edit Element para cualquier Element, para ver cuál debe ser la referencia.

Endpoint de API inválido #

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

Esta clase está reservada para uso de nuestros snippets, ya que Clerk.js utiliza esta clase para identificar los elementos a renderizar.

Para arreglarlo, asegúrate de nombrar la clase de otra manera, como clerk-product.

Argumento de producto inválido #

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

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

Además, recuerda los corchetes alrededor del ID, para que sea 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 incorrecta.

En la mayoría de los casos ocurre si el placeholder en el código insertado de la categoría no se ha reemplazado por un ID real:

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

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

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

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

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

Si tu plataforma no aparece listada, necesitas agregar manualmente la lógica para seleccionar el ID correcto de categoría según la funcionalidad de tu tienda online.

API key incorrecta #

Este error aparecerá si la clave pública de API proporcionada 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 agregar a tu script de seguimiento de Clerk.js directamente en el código o en la configuración para 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 aparte de la tienda web.

Por ejemplo, si deseas optimizar el algoritmo en base a ventas de una tienda física o tienda B2B.

Clerk no diferencia entre pedidos de varias fuentes—mientras puedas proporcionar un ID, un timestamp y una lista de productos comprados, se pueden cargar en Clerk.

El enfoque recomendado es usar la CRUD API ya que permite automatizar completamente la tarea.

Al implementar estas llamadas a la API, puedes enviar los datos del pedido directamente a tu Store en Clerk.

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

Alternativamente, puedes cargar un archivo CSV manualmente, sin necesidad de programar nada.

Puedes leer más sobre archivos CSV aquí.

Conversión de divisas #

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

A continuación se describe una forma simple de hacerlo funcionar.

Enviar objetos de precios #

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

La forma más sencilla de hacer esto es enviarlos como un objeto JSON codificado como cadena de precios formateados, con el 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 un formateador #

En Clerk.js puedes definir funciones JavaScript que se pueden usar con tus Diseños.

Aquí puedes definir una función que tome tu diccionario de precios como argumento y devuelva el precio para una divisa específica, según la lógica frontend que prefieras.

Asegúrate de reemplazar currency por la moneda seleccionada actualmente 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 el formateador #

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

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

Precios específicos por cliente #

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

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

Este método se puede usar si puedes consultar precios desde tu servidor, directamente desde una función JavaScript, en el frontend, en base a un ID de producto y un ID de cliente.

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

Abajo un ejemplo de un evento simple.

<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 como argumento data, que es la respuesta completa que Clerk envía desde la API.

Precios individuales por cliente #

Si necesitas mostrar precios totalmente únicos según el cliente que ha iniciado sesión, necesitas configurar un Event que inserte el precio correcto después de que los productos sean renderizados.

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

Este enfoque asume que puedes consultar precios desde tu servidor con una llamada AJAX en el frontend, por ejemplo, en base a un ID de producto y un ID de cliente.

Lo mejor es primero crear un contenedor de precio placeholder en tu diseño y luego reemplazarlo con el precio devuelto desde tu llamada AJAX.

Un ejemplo:

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

Luego puedes usar el evento de Clerk para esperar a que los productos se hayan renderizado, hacer una solicitud a tu servidor de precios usando el ID del producto y el ID del cliente, antes de reemplazarlo en el HTML.

Aquí tienes un ejemplo de cómo hacerlo:

<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 un cliente que ha iniciado sesión con INSERT_CUSTOMER_ID y que tienes una función como FETCH_PRICE_FROM_SERVER que devuelve el precio del producto basándose en el cliente.

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

Finalmente reemplaza el texto interno, “Cargando precio…” en este ejemplo, por el precio devuelto desde tu llamada AJAX.

Precios por grupo de clientes #

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

Incluir los diferentes precios en el feed de datos.
Incluir una variable global que obtenga el ID del grupo de clientes actual.
Crear una función para obtener el precio relevante.
Mostrar el precio en el Diseño.

Incluir objetos de precio #

Comienza agregando un atributo a todos los productos que contenga todas las opciones de precios, asegurando correlacionar cada precio a un grupo de clientes en particular.

Esto debe ser enviado como un objeto JSON. Por ejemplo:

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

Variable de grupo de cliente #

Agrega una variable global dinámica a Clerk.js que obtenga el ID del grupo de clientes actual y lo agregue como valor.

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

Por ejemplo, un usuario que debe ver el precio del grupo 2, entonces el ID debe ser “GROUP2”.

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

Obtener precio #

Ahora puedes crear un Formatter, que tome como argumento el customer_group y devuelva el precio relevante.

Haz esto escribiendo una función que obtenga el precio del grupo de clientes específico como clave en el diccionario de precios, según el ID de customer_group.

Agrega esto en la configuración de Clerk.js. Abajo un ejemplo llamado getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (prices, customer_group) {
      return prices[customer_group];
    }
  }
});

Mostrar el precio #

Cuando el formateador getPrice haya sido creado, puedes llamarlo directamente en tu Diseño junto con la lista 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.customer_group_prices | getPrice customer_group }}
	</div>
</li>

Autenticación HTTP #

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

Esto, en muchos casos, también bloquea el importador de Clerk y normalmente muestra un error 401 Unauthorized en el registro de sincronización.

Puedes solucionar esto 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

Sin pedidos rastreados #

En my.clerk.io, Tracked Orders y Order Details se han fusionado en una sola página de Orders.

Clerk necesita seguir rastreando ventas de la tienda online para mantener los resultados actualizados con el comportamiento de tus clientes.

Sin embargo, algunas configuraciones en una tienda online pueden hacer que el rastreo de ventas falle.

A continuación, puedes ver cómo depurar el rastreo de ventas cuando usas una configuración Clerk.js y ver cuáles son los problemas más comunes y sus soluciones.

Antes de empezar #

Asegúrate de haber instalado:

El script de seguimiento Clerk.js en todas las páginas.
El script de seguimiento de ventas en tu página de orden completada.

Estos son necesarios para rastrear ventas en general cuando utilizas Clerk.js.

Revisa los registros #

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

Para depurarlo, deberás realizar una orden de prueba.

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

Si el rastreo de ventas falla por un error en tu script, normalmente podrás ver el error en esta página.

Haz clic en Details para ver más.

Si no puedes ver errores en los registros, la forma más sencilla de identificar otros problemas de seguimiento de ventas es realizar una orden de prueba.

Depuración mediante orden de prueba #

En este ejemplo usamos Chrome para mostrar cómo depurar el seguimiento de ventas con una orden de prueba, pero otros navegadores tienen funciones similares.

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

Aquí verás los datos enviados y recibidos por el endpoint de la API de seguimiento de ventas.

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

A continuación se presentan errores frecuentes asociados al seguimiento de ventas.

Sintaxis inválida de productos #

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

Los errores más comunes son:

Los IDs de producto están codificados como string en el seguimiento de ventas, pero usas enteros 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"\\\].

Argumento faltante #

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

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

No se realizó la llamada #

Si no puedes ver la llamada a sale incluso teniendo ambos scripts instalados, entonces algo ha hecho que Clerk.js se cargue de manera incorrecta.

Prueba lo siguiente:

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, debes 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 otras funcionalidades de JavaScript.

Bloqueo por Iubenda #

Si usas iubenda para el consentimiento de cookies (especialmente con bloqueo automático) y un visitante rechaza las cookies, iubenda puede bloquear los scripts o solicitudes de Clerk.

Normalmente esto significa que:

La solicitud sale nunca se envía, por lo que el pedido no se rastrea o no se atribuye en Clerk.
Los elementos de Clerk pueden no renderizarse en absoluto, o Clerk.js puede registrar un error de consola acerca de cargarse varias veces (porque iubenda reescribe/difiere scripts).

Solución: incluya Clerk.io en la lista de permitidos de iubenda #

En iubenda, agrega Clerk a la lista de permitidos para que no se bloquee cuando el visitante rechace las cookies.

Como mínimo, asegúrate de que estos dominios estén permitidos:

cdn.clerk.io (Clerk.js)
api.clerk.io (solicitudes de seguimiento y ventas)

Las etiquetas exactas en la interfaz pueden variar en iubenda, pero esto habitualmente se encuentra en la Cookie Solution de tu proyecto de iubenda para Automatic blocking (allowlist/whitelist/ignore list).

Para la guía oficial de iubenda, revisa su artículo sobre bloqueos excesivos en el modo de bloqueo automático: https://www.iubenda.com/en/help/153445-what-to-do-when-the-automatic-blocking-mode-is-blocking-too-much/.

Verifica la solución #

Después de actualizar la configuración de iubenda:

Carga la tienda online, rechaza cookies y abre la consola del navegador.
Confirma que Clerk.js está disponible (por ejemplo, typeof Clerk no debe ser "undefined").
Ejecuta Clerk("debug"), realiza una prueba de pedido y confirma que se envía una solicitud sale a Clerk y devuelve status: "ok".

Sin impacto de Clerk #

Si rastreas con éxito las ventas en my.clerk.io, pero ninguna aparece como impactada por Clerk, puede que tengas un error en tu configuración de visitor-tracking / click-tracking.

Comienza asegurándote de que el visitor-tracking funciona siguiendo estos pasos:

Haz clic en cualquier producto a través de Search o Recommendations de Clerk.
Procede a realizar una orden con ese producto.
Inicia sesión en my.clerk.io y ve a Orders.
Espera a que la orden aparezca.

Si el visitor-tracking funciona, verás el valor añadido por Clerk en los detalles del pedido en la página Orders:

Si no ves valor añadido en la orden que realizaste, las siguientes secciones presentan errores habituales que pueden causar esto.

Configuración API #

Si configuras Clerk con una integración personalizada directamente con la API, necesitas activar el seguimiento de visitantes.

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

IDs de producto incorrectos #

Para que visitor-tracking funcione, el click-tracking y sales-tracking 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 sobre el ID de una orden que hayas realizado.
Si Clerk no puede identificar el producto, verás un ID y un placeholder de imagen.
Ve a Data > Products y busca el nombre del producto que agregaste. Aquí podrás ver el ID esperado para el producto.

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

Cambios en el Visitor ID #

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

Debido a esto, los IDs deben permanecer iguales durante toda la sesión (al menos), y preferiblemente entre varias sesiones.

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

Este error es poco común, pero puedes comprobar el visitor ID siguiendo estos pasos:

Abre la configuración de Network en el navegador y filtra los resultados por “clerk”.
Comienza revisando cualquiera de las llamadas undefined que estén relacionadas con search o recommendations.
En payload puedes verificar el Visitor ID actual. 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 tu Red nuevamente 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 para el cambio de los Visitor IDs puede ser si regeneras los IDs para cada nueva página que se carga.

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

Upgrade to 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, dado que las dos versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar correctamente.

Las dos diferencias principales en Clerk.js 2 son:

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

Crear diseños #

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

Puedes crear tus Diseños de Clerk.js 2 rehaciéndolos en el Design Editor, o convirtiendo tus antiguos Diseños de código a Liquid, lo cual se explica a continuación.

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

Opción del Design Editor #

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona un tipo de diseño diferente a Blank y asígnale un nombre. Recomendamos añadir “V2” para que sea obvio que estás usando diseños de Clerk.js 2.
En el Design Editor, haz clic en cualquiera de los elementos existentes como el nombre, la imagen, el botón, etc. para editarlo o agrega nuevos elementos al Diseño.
Haz clic en Publish Design cuando termines y dirígete al Step 2 en la guía.
Ve a Recommendations/Search > Elements y cambia tu Clerk Element para usar tu nuevo Diseño, luego haz clic en Update Element.
Esto hará que temporalmente no se muestren en tu tienda online, hasta que hayas insertado Clerk.js 2 como se describe más adelante en esta guía.

Conversión de diseños #

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

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona Blank > Code y asígnale un nombre. Recomendamos añadir “V2” para que sea obvio que estás utilizando diseños de Clerk.js 2.
Haz clic en Create Design.
Esto te dará un diseño en blanco con Product HTML y CSS que puedes usar.
Vuelve a la vista general de diseños y haz clic en Edit Design para tu Diseño de Clerk.js 1. Recomendamos hacer esto en una nueva pestaña para que puedas copiar fácilmente el código.
Copia el antiguo Diseño de Clerk.js 1 a tu nuevo Diseño de Clerk.js 2.
- Notarás que no hay Container Code en el nuevo.
- Esto es porque Liquid utiliza for loops para renderizar todos los productos.
- Copia tu antiguo Product HTML dentro del for-loop, tu antiguo Container Code alrededor de él y copia también el CSS.
Convierte el Diseño a la sintaxis de Liquid. La principal diferencia es que los Diseños antiguos utilizaban 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 sentencias {{#if}} o {{#is}}, estas 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 de Clerk.js 2 ya que ya no son compatibles.
A continuación se muestra un ejemplo de un diseño Clerk.js 1 y la 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 Update Design para guardar los cambios.
Ve a Recommendations/Search > Elements y cambia tu bloque Element para usar tu nuevo Diseño.
Haz clic en Update Element. Esto hará que temporalmente no se muestren en tu tienda online, hasta que termines con el Step 2. Elige el nuevo Diseño para todos los Elements que deban ser actualizados.

Reemplazar script #

Ubica el archivo de plantilla que se usa para mostrar todas las páginas de la tienda web y donde se encuentra el script original de Clerk.js cerca de la parte inferior.
Elimina el antiguo script de Clerk.js del archivo. Se verá 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. Aquí encontrarás 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 utilizando la configuración de Clerk.js 2, mucho más mejorada!

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

Manejo de require.js #

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

En algunas configuraciones, Require.js impide que Clerk.js se cargue, lo que significa que no se mostrarán sliders ni resultados de búsqueda.

Cuando esto ocurre, se mostrará el siguiente error en la consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos formas de manejar Require.js. Ambas requieren que realices cambios en el tracking-script que has insertado en la parte inferior 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() {}); en la parte inferior del tracking script:

Ignorar Require.js #

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

Puedes hacer esto insertando window.__clerk_ignore_requirejs = true; en la parte superior del tracking script:

Después de utilizar uno de estos enfoques, Require.js ahora 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.