Cualquier (webshop)

Get Started

Clerk.js

Cuando Clerk no tiene una extensión o integración preconstruida para una plataforma de tienda en línea determinada, 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 utilizando Clerk.js. Este es el enfoque recomendado ya que se encarga de gran parte del trabajo pesado en cuanto a seguimiento y llamadas API.

Si prefieres configurar Clerk.io usando 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 usará para realizar llamadas API.

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

1. Sincronizar datos #

Primero, necesitas obtener datos de entrada para que la IA de Clerk.io comprenda tu tienda en línea y pueda comenzar a predecir resultados.

Crear Store #

Cada configuración de Clerk se organiza en un Store en my.clerk.io. Aquí se almacenarán todos los datos que subas y te permitirá interactuar con ellos usando su clave de API Pública.

Si necesitas configurar varias tiendas 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.

Crear Feeds #

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

Estas son nuestras mejores prácticas para la creación de los feeds:

  • Idealmente, deberían actualizarse una vez al día desde tu lado.
  • Deberían alojarse en una URL desde donde el importador de Clerk.io pueda obtenerla, ej. https://awesomestore.com/feed/clerk.json
  • Como base, los feeds siempre deben contener todos los productos y categorías disponibles, pero también pueden incluir páginas (entradas de blog / artículos) y datos de clientes.
  • Clerk utiliza los atributos de producto para la 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, aparte de los requeridos, puedes enviar cualquier otro atributo que sea importante para tu negocio, como opiniones, colores, etiquetas, imágenes destacadas, etc.
  • Por defecto, Clerk importará los feeds al menos una vez al día.
  • Puedes configurar una ventana dentro de una hora (por ejemplo, entre 2:59-3:59) si deseas que el importador se ejecute en un horario específico.

Usar sincronización en tiempo real #

Esto es opcional, pero recomendable.

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

2. Rastrear el comportamiento #

La IA de Clerk.io aprende sobre el comportamiento del cliente a través de las órdenes y la actividad en el sitio web. Rastrear este comportamiento es crucial para que la IA realice predicciones precisas y para mostrar las estadísticas que demuestran su efectividad.

Instalar Clerk.js #

Clerk.io rastrea 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 las órdenes.
  • Analíticas que muestran cómo Clerk mejora las órdenes.
  • Personalizar varias Recommendations en el sitio.

El script de Clerk.js debe agregarse con tus otros scripts en la sección <head>, y configurarse con la Clave de API Pública que encontrarás en my.clerk.io.

Esto cargará la biblioteca que genera IDs de visitantes anónimos 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 -->

Agregar seguimiento de ventas #

Esto debe añadirse a tu página de éxito de pedido. Cada vez que se realiza una orden, Clerk.js usará el fragmento para hacer una llamada API que contiene la información de la orden, incluyendo en qué ha hecho clic el visitante durante la sesión previa.

Asegúrate de actualizar los campos para obtener los datos correctos desde las órdenes.

 <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 ciertos banners.

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

En caso contrario, debes incluir este fragmento en la página de detalle de producto para registrar también las visualizaciones de productos:

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

3. Visualizar resultados #

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

Alojar en Clerk.io #

Alojar los diseños en my.clerk.io ofrece mayor flexibilidad, ya que puedes cambiar diseños, lógicas y filtros sin modificar el código del sitio una vez finalizada la configuración. El inconveniente es que los diseños se gestionan por Store.

Integrar resultados #

Alojar los diseños en tu código fuente te da libertad para compartirlos entre varios Stores. El inconveniente es que no puedes usar nuestro sistema de Element para hacer cambios en los resultados.

4. Agregar fragmentos #

Esto se hace con fragmentos asociados a tu Element.

Insertar en el frontend #

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

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

Hace referencia a la configuración de tu Element incluyendo el endpoint de la API / lógica del elemento, diseño, número de productos a devolver, etc., y retorna un bloque HTML completo que se inserta en el fragmento.

Configurar #

Algunos fragmentos requieren información adicional como ID de producto o ID de categoría, que deben configurarse según la lógica de tu tienda para obtener datos.

Un ejemplo es el fragmento de Recommendations de Mejores Alternativas, que requiere añadir un ID de producto al fragmento:

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

Otros solo requieren que el fragmento se agregue a la página, con algunas opciones menores de configuración según el comportamiento deseado.

Un ejemplo es el fragmento de Instant Search, que requiere un selector CSS para el input 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 individuales de Element, facilitando el comienzo.

El fragmento cambiará dependiendo de la lógica de producto elegida para el Element, por lo que siempre podrás ver qué data-attributes necesitas 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.