Cualquier (webshop)

Get Started

Clerk.js

Cuando Clerk no tiene una extensión o integración preconstruida para una determinada plataforma de tienda online, nos referimos a ella como una plataforma personalizada.

La mayor diferencia es que las plataformas personalizadas deben sincronizarse con un Data Feed e insertar los resultados de Clerk.io en el frontend.

Esta guía explica cómo instalar Clerk en una plataforma personalizada usando Clerk.js. Este es el enfoque recomendado ya que se encarga de gran parte del trabajo pesado en términos de seguimiento y llamadas a la API.

Si prefieres configurar Clerk.io utilizando nuestra API, consulta este artículo.

Clerk.js es una biblioteca ligera que permite configurar Clerk usando simples fragmentos HTML en el código fuente. Clerk.js escaneará la página en busca de cualquier fragmento con la clase “clerk” y los utilizará para hacer llamadas a la API.

A continuación se muestran los pasos que deberás seguir al instalar Clerk.

1. Sincronizar datos #

Primero, necesitas introducir datos en Clerk.io para que la IA entienda tu tienda online y pueda empezar a predecir resultados.

Crear Store #

Cada configuración de Clerk se lleva a cabo en un Store en my.clerk.io. Este contendrá todos los datos que subas y te permitirá interactuar con ellos mediante su clave de API pública.

Si necesitas configurar varias tiendas online o dominios, cada uno debe tener su propio Store.

Puedes copiar tu configuración a nuevos Stores después de realizar la primera configuración.

Construir Feeds #

Esta es la fuente principal de datos desde la tienda online hacia Clerk. Consulta la especificación de los feeds aquí.

Estas son nuestras mejores prácticas para crear los feeds:

  • Idealmente deben actualizarse una vez al día de tu lado.
  • Deben estar alojados en una URL desde donde el importador de Clerk.io pueda obtenerlos. Por ejemplo: https://awesomestore.com/feed/clerk.json
  • Como base, los feeds siempre deben contener todos los productos y categorías disponibles, pero también pueden contener páginas (entradas de blog / artículos) y datos de clientes.
  • Clerk utiliza los atributos de producto para búsqueda, filtrado y estilo.
  • En la primera importación, debes incluir todas las órdenes históricas. Después de la primera importación, estas pueden eliminarse ya que Clerk las mantiene en la base de datos.
  • Para los productos, además de los obligatorios, puedes enviar otros atributos importantes para tu negocio, como reseñas, colores, etiquetas, splash-images, etc.
  • Por defecto, Clerk importará los feeds al menos una vez al día.
  • Puedes configurar una ventana dentro de 1 hora (por ejemplo, entre las 2:59 y 3:59) si deseas que el importador se ejecute a una hora específica.

Usar Sincronización en Tiempo Real #

Esto es opcional pero recomendable.

Si la tienda online requiere actualizaciones en tiempo real, como eliminar productos sin stock o actualizar precios, nuestra CRUD API puede ser utilizada para añadir, actualizar o eliminar productos entre importaciones del feed.

2. Rastrear Comportamiento #

La IA de Clerk.io aprende sobre el comportamiento de los clientes a través de pedidos y la actividad en el sitio web. El seguimiento de este comportamiento es crucial para que la IA realice predicciones precisas y para mostrar las estadísticas que demuestran su eficacia.

Instalar Clerk.js #

Clerk.io realiza el seguimiento de clics, búsquedas y pedidos desde el frontend por tres razones clave:

  • Permitir que la IA aprenda sobre el comportamiento del cliente en tiempo real a través de los pedidos.
  • Analíticas que muestran cómo Clerk mejora los pedidos.
  • Personalizar varias Recommendations en el sitio.

El script de Clerk.js debe agregarse junto con tus otros scripts en la sección <head>, y configurarse con la Public API Key encontrada en my.clerk.io.

Esto cargará la biblioteca que genera IDs de visitantes anónimos y sin cookies y rastreará los clics en cualquier producto mostrado por Clerk a través de los fragmentos.

<!-- 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_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Añadir seguimiento de ventas #

Esto debe agregarse en tu página de éxito de pedido. Cada vez que se realiza un pedido, Clerk.js utilizará el fragmento para hacer una llamada a la API que contiene la información del pedido, incluyendo en qué productos ha hecho clic el visitante en la sesión previa al pedido.

Asegúrate de actualizar los marcadores de posición para obtener los datos correctos de los pedidos.

 <span
    class="clerk"
    data-api="log/sale"
    data-sale="123456"
    data-email="luke@skywalker.me"
    data-customer="7890"
    data-products='[{"id": 12, "quantity": 1, "price": 99.95}, {"id": 54, "quantity": 2, "price": 9.50}...]'>
</span>

Clerk.io también registra los productos vistos por los visitantes, para personalizar en ciertos banners.

Si vas a utilizar Cross-Sell y/o productos Alternativos en tus páginas de detalle de producto, Clerk utilizará estos para registrar los productos vistos por los visitantes.

Si no, debes incluir este fragmento en la página de detalle del producto para registrar también las visualizaciones de producto:

<span 
    class="clerk"
    data-api="log/product"
    data-product="INSERT_PRODUCT_ID">
</span>

3. Visualizar resultados #

Cuando usas Clerk.js, los diseños pueden gestionarse de dos formas:

Alojado en Clerk.io #

Alojar los diseños en my.clerk.io ofrece la mayor flexibilidad, ya que puedes cambiar diseños, lógicas y filtros sin modificar tu código onsite después de la configuración. La desventaja es que los diseños se gestionan por tienda.

Incrustar resultados #

Alojar los diseños en tu código fuente te da la libertad de compartir diseños entre varios Stores. La desventaja es que no puedes usar nuestro sistema Content para hacer cambios en los resultados.

4. Añadir fragmentos #

Esto se hace con fragmentos asociados a tu Content.

Insertar en el frontend #

Para insertar resultados de Clerk, elige un Content en my.clerk.io, configúralo para usar un diseño que hayas creado y copia el fragmento en la página donde quieras mostrar los resultados.

Clerk.js escanea el código fuente en busca de cualquier fragmento con la clase clerk y utiliza los data-attributes para realizar llamadas a la API.

Hace referencia a la configuración de tu Content, incluyendo el endpoint de API / lógica de contenido, diseño, número de productos a mostrar, etc., y devuelve un bloque HTML completo que se inserta en el fragmento.

Configurar #

Algunos fragmentos requieren datos adicionales como product IDs o category ID que deben configurarse según la lógica de tu tienda online para obtener datos.

Un ejemplo de esto es el fragmento de Best Alternatives Recommendations, que requiere que se añada un product ID al fragmento:

<!--Best Alternatives Recommendations-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

Otros simplemente requieren que el fragmento se añada a la página, con algunas opciones menores de configuración según cómo deba funcionar.

Un ejemplo es el fragmento Instant Search, que requiere un selector CSS para el campo de búsqueda y el número de sugerencias y categorías a mostrar:

<!--Instant Search-->
<span 
    class="clerk"
    data-template="@live-search"
    data-instant-search="INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE"
    data-instant-search-suggestions="6"
    data-instant-search-categories="6"
    data-instant-search-pages="6"
    data-instant-search-positioning="right">
</span>

Por defecto, los nuevos Stores en Clerk ya vienen con nuestra Best Practice creada como bloques de Content individuales, lo que facilita el comienzo.

El fragmento cambiará dependiendo de la lógica de producto elegida para el Content, así que siempre puedes ver qué data-attributes debes configurar.

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