Cualquier (webshop)

FAQ

Respuestas a preguntas frecuentes sobre integraciones personalizadas

¿Tienes 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 Progressive Web Apps (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 utilizan frameworks como vue.js o next.js, las páginas se renderizan con JavaScript en vez de una carga estándar de página.

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

Incluir Clerk.js #

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

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, sin importar 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 carga una página, haz estos pasos en orden:

Añade el snippet de Clerk al HTML con un selector único que puedas utilizar como objetivo.
Ejecuta Clerk("content", "SELECTOR") para renderizarlo.

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

Esto garantiza que Clerk.js no vea el snippet como antes renderizado, lo que haría que no se 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 puede configurarse para inicializar Elementos automáticamente con tus selectores personalizados después de la primera vez que lo renderices.

Impacto en Pagespeed #

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

A continuación puedes ver cómo impacta 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ápidamente.

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 incremento en el tiempo de carga de una página suele venir 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 de carga extra, recomendamos usar imágenes en formato webp que tengan una resolución acorde al tamaño que tendrán en los elementos de Clerk.

Por ejemplo, si las imágenes en 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 facilitar la inserción de resultados de Clerk en cualquier sitio web.

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

Cuando agregamos nuevas funciones de UI o hacemos mejoras en 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 funciones estarán disponibles para todos en un máximo de 60 minutos.

Cuanto mayor es el tiempo de caché, más tarda todo el mundo en tener acceso a las últimas características.

Lo importante es que los usuarios finales solo tienen que descargar Clerk.js una vez cuando hay nuevas funciones disponibles.

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

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

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

La mayoría de las sesiones duran menos de 60 minutos y por lo tanto la solicitud solo se hará una vez por sesión.

Como puedes ver en la captura de pantalla, esto es una práctica normal que (además de Clerk) es usada por Google Analytics, Facebook, Trustpilot y muchos más.

Impacto en CLS #

Cumulative Layout Shift (CLS) puede afectar negativamente al SEO y a la experiencia de usuario cuando el contenido inyectado dinámicamente desplaza elementos en una página.

En algunos casos, entre otros factores, Clerk puede contribuir al puntaje de CLS.

Puedes leer más sobre CLS aquí.

Sigue esta guía solo si tu puntaje de CLS es superior a 0.2 y los elementos de Clerk están above the fold.

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 añadir una altura mínima basada en la altura esperada del contenido.

Ejemplo de código:

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

Realizando 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 API
Un diccionario JSON de parámetros
Una función de callback para gestionar la respuesta

Requests #

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);
    }
  );
}

Response #

__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 gestionar la respuesta como desees.

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

A continuación un ejemplo que crea una lista de elementos HTML que enlazan a categorías coincidentes 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 de manera diferente para cada plataforma y la funcionalidad puede cambiar dependiendo de los plugins que uses.

Como 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 que JavaScript se ejecute para funcionar.

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

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

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

El código normalmente será un elemento <div> o <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 usa:

ID de producto
Cantidad de producto

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

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

Para este ejemplo puede ser {{ product.qty }}.

Pega tu código en el HTML de tu Diseño y prueba 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 ID de producto se encuentra justo después de &id_product=.

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

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

Con estos cambios, el botón de añadir al carrito final 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 de error obtendrás más información sobre lo que salió mal, la cual puedes usar para depurarlo tú mismo, o para enviar 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 aparece si el snippet que insertaste referencia un Element que no existe, en el atributo data-template.

Para solucionarlo, asegúrate de que el nombre en el código incrustado coincida con el bloque Element que creaste en my.clerk.io.

Puedes hacer clic en Editar Element para cualquier Element y ver cómo debe ser la referencia.

Endpoint de API no válido #

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

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

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

Argumento de producto no vá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 incrustado.

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 no vá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 incrustado de la 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 snippet de forma manual, asegúrate de seleccionar tu sistema de tienda en el desplegable Choose your platform antes de copiar el snippet.

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

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

Clave API incorrecta #

Este error aparecerá si la clave pública de API que proporcionaste 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 seguimiento Clerk.js directamente en el código o en la configuración de tu integración, dependiendo de tu plataforma.

Datos de ventas POS/ERP #

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

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

Clerk no diferencia entre pedidos de diversas fuentes—siempre que puedas proporcionar un ID, una marca de tiempo y una lista de productos vendidos, pueden ser subidos a Clerk.

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

Implementando estas llamadas API, puedes enviar datos de pedidos 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 usar pedidos offline para mejorar tus recomendaciones y resultados de búsqueda online.

Alternativamente, puedes subir un archivo CSV de forma manual, sin necesidad de programar nada.

Puedes leer más sobre archivos CSV aquí.

Conversión de moneda #

Existen múltiples formas de trabajar con la conversión de moneda en Clerk.

A continuación se muestra una forma sencilla de hacerlo funcionar.

Envía objetos de precios #

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

La forma más sencilla de hacer esto es enviarlos como un objeto JSON en formato de 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,
    // Ejemplos de JSON en formato de cadena
    "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,
    // Ejemplo de JSON en formato de cadena
    "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 usarse con tus Diseños.

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

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

Luego de definir el formateador, puedes usarlo en tu diseño con la siguiente sintaxis:

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

Precios específicos para clientes #

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

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

Este método es posible si puedes buscar precios desde tu servidor, directamente desde una función JavaScript en el frontend, basándote en un ID de producto y un ID de cliente.

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

A continuación 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 toda la respuesta que Clerk envía desde la API.

Precios individuales de cliente #

Si necesitas mostrar precios completamente únicos en función de qué cliente haya iniciado sesión, debes configurar un Evento 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 muestre productos.

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

Lo más recomendable es primero crear un contenedor de precio placeholder 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>

Luego puedes usar el evento de Clerk para esperar a que los productos se rendericen, 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 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 un cliente logueado con INSERT_CUSTOMER_ID y que tienes una función como FETCH_PRICE_FROM_SERVER que devuelve el precio del producto basado en el cliente.

price_container se usa para apuntar al producto correcto basado en el ID disponible en data-clerk-product-id, que es agregado a todos los productos por Clerk.js.

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

Precios por grupo de clientes #

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

Incluir los distintos precios en el data feed.
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 precio #

Comienza añadiendo un atributo a todos los productos que contenga todas las opciones de precios, asegurándote de relacionar cada precio con un grupo de clientes particular.

Esto debe ser enviado como un objeto JSON. 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 del grupo de clientes del cliente actual y lo añada como valor.

El valor de Customer Group ID debe ser equivalente a la clave de su precio correspondiente en el Data Feed.

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

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

Obtener precio #

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

Hazlo escribiendo una función que obtenga el precio del grupo de clientes concreto como clave del price-dict según el ID de customer_group.

Agrégalo en la configuración de Clerk.js. A continuación un ejemplo llamado getPrice:

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

Mostrar precio #

Cuando el formateador getPrice esté creado, puedes nombrarlo 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 suele usarse en sitios en staging para evitar visitantes no deseados.

Esto, en muchos casos, también bloqueará el importador de Clerk y típicamente mostrará un error 401 Unauthorized en el log 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 combinan en una sola página de Orders.

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

Sin embargo, algunas configuraciones en una tienda 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 de Clerk.js y ver cuáles son los problemas y soluciones más comunes.

Antes de empezar #

Asegúrate de que has instalado:

El script de seguimiento 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 se usa Clerk.js.

Revisar logs #

En la mayoría de los casos, el rastreo de ventas falla debido a errores en los IDs de visitantes o IDs de producto de la llamada de venta que se envía a Clerk tras completar una compra.

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

Sin embargo, en algunos casos puede estar relacionado con el propio script de rastreo de ventas y puede depurarse mirando los registros en my.clerk.io > Developers > Logs.

Si el rastreo falla por un error en tu script, a menudo podrás ver el error en esta página.

Haz clic en Details para ver más detalles.

Si no ves errores en los registros, la manera más fácil de identificar otros problemas de rastreo de ventas es hacer un pedido de prueba.

Depuración de pedido de prueba #

En este ejemplo utilizamos Chrome para mostrar cómo depurar el rastreo de ventas con un pedido de prueba, pero otros navegadores tienen funciones similares.

En tu tienda online, añade algunos productos al carrito.
Procede a Checkout.
Antes de hacer el pedido, abre la Consola de tu navegador.
Busca la sección Network y busca “clerk”.
Realiza el pedido, para ver la página de confirmación de pedido.
Haz clic en la llamada que comienza por sale (normalmente sale?key=…).

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

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

A continuación errores comunes asociados al rastreo de ventas.

Sintaxis no vá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 rastreo de la venta, pero estás usando enteros en Clerk o viceversa.
La lista de IDs de producto contiene caracteres de formato de texto en vez 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 de datos necesarios en el rastreo de ventas.

No se realizó una llamada #

Si no ves la llamada a sale incluso teniendo ambos scripts instalados, entonces algo hizo que el script Clerk.js se cargara incorrectamente.

Prueba esto siguiendo estos pasos:

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

Uncaught ReferenceError: Clerk is not defined

Si es el caso, revisa tu configuración 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 JavaScript.

Sin impacto de Clerk #

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

Primero asegúrate 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 incluya este producto.
Entra en my.clerk.io y ve a Orders.
Espera a que aparezca el pedido.

Si 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 el pedido que hiciste, las siguientes secciones muestran errores comunes que pueden causar esto.

Configuraciones 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 API.

IDs de producto incorrectos #

Para que visitor-tracking funcione, el seguimiento de clics y ventas debe seguir los mismos IDs de producto que recibimos en el importador.

Normalmente esto no funciona porque rastreas IDs de variante en vez de IDs de padre o el SKU en vez 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 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 añadido. Aquí podrás ver el ID esperado para el producto.

Usa esto para configurar tu rastreo de ventas para usar los IDs correctos de producto.

Cambios de ID de visitante #

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

Por esto, los IDs deben permanecer igual al menos durante toda la sesión, y preferiblemente durante varias.

Este visitor ID se crea automáticamente usando Clerk.js para la configuración, pero si usas una integración API, o personalizas tus visitor IDs, puedes cambiarlos accidentalmente.

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

Abre la configuración Network en tu navegador y filtra los resultados por “clerk”.
Primero revisa cualquier llamada undefined relacionada con search o recommendations.
En payload puedes comprobar el visitor ID actual. Podrás verlo para todas las llamadas asociadas a Clerk.
Haz clic en el producto y realiza un pedido con este producto.
En la página de éxito del pedido, revisa de nuevo Network y busca la llamada a sale?.
Asegúrate de que el campo visitor en el payload coincida con el Visitor ID visto en el paso 3.

Si los IDs visitor no coinciden, debes averiguar la razón del cambio.

Una causa común de cambio de visitor IDs puede ser si regeneras los IDs en cada página cargada.

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

Actualiza a Clerk.js 2 #

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

Hace que la instalación de Clerk en cualquier tienda sea más sencilla.

Sin embargo, como las dos versiones funcionan de forma ligeramente diferente, debes seguir estos pasos para actualizar correctamente.

Las dos principales diferencias con Clerk.js 2 son:

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

Crear diseños #

Ya que Clerk.js 2 tiene un enfoque diferente para los Diseños, necesitarás crear nuevos.

Puedes crear tus Diseños Clerk.js 2 rehaciéndolos en el Editor de Diseño, o convirtiendo tu código antiguo a Liquid, lo que explica la guía a continuación.

A continuación se describe cómo convertir tus antiguos diseños 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 distinto a Blank y asígnale un nombre. Recomendamos agregar “V2” para que sea obvio que estás usando diseños de Clerk.js 2.
En el Editor de Diseño, haz clic en cualquiera de los elementos existentes como el nombre, imagen, 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 en la guía.
Dirígete a Recommendations/Search > Elements y cambia tu Elemento Clerk 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.

Convertir diseños #

Como Clerk.js 2 utiliza el lenguaje de plantillas Liquid, que es 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 agregar “V2” para que sea obvio que estás usando diseños de Clerk.js 2.
Haz clic en Crear Diseño.
Esto te dará un diseño en blanco con el HTML y CSS de Producto que puedes usar.
Vuelve a la vista general de diseños y haz clic en Editar Diseño para tu Diseño Clerk.js 1. Recomendamos hacerlo en una nueva pestaña para que puedas copiar fácilmente el código.
Copia el antiguo Diseño Clerk.js 1 en tu nuevo Diseño Clerk.js 2.
- Notarás que no hay Código de Contenedor en el nuevo.
- Esto se debe a que Liquid utiliza bucles for para mostrar todos los productos.
- Copia tu antiguo HTML de Producto dentro del bucle for, tu antiguo Código de Contenedor alrededor y también copia el CSS.
Convierte el Diseño a la sintaxis de Liquid. La principal diferencia es que los antiguos Diseños 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 estás usando 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 se admite.
Abajo tienes un ejemplo de un diseño Clerk.js 1, y la versión convertida por completo:

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 Element al nuevo Diseño.
Haz clic en Update Element. Esto causará que temporalmente no se muestren en tu tienda online hasta que termines el Paso 2. Elige el nuevo Diseño para todos los Elementos que deban actualizarse.

Reemplazar el script #

Ubica el archivo de plantilla que se usa para mostrar todas las páginas de la tienda online, 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á parecido a esto:

<!-- 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í se encuentra el código de Clerk.js 2.
Copia este código, insértalo justo antes de la etiqueta </head> en la plantilla, y luego guárdalo.

¡Felicidades! Ahora estás usando la nueva y mejorada configuración de Clerk.js 2.

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

Compatibilidad con require.js #

Esta sección solo aplica cuando se utiliza 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, el siguiente error se mostrará en tu consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos formas de manejar Require.js. Ambos métodos requieren que realices cambios en el tracking-script que has insertado al final de todas las páginas.

Incluir en Require.js #

La mejor forma es intentar que Require.js reconozca Clerk.

Puedes hacerlo 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 uno de estos métodos, 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.