Cualquier (webshop)

Get Started

Cuando Clerk no tiene una extensión o integración preconstruida para una determinada plataforma de tienda online, la denominamos una plataforma personalizada.

La principal diferencia es que las plataformas personalizadas deben sincronizarse mediante 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 la mayor parte del trabajo pesado en cuanto a seguimiento y llamadas a la API.

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

Clerk.js es una librería ligera que permite configurar Clerk utilizando simples fragmentos de 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 hacer llamadas a la API.

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

1. Sincroniza los datos #

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

Crea una Store #

Cada configuración de Clerk se realiza en una Store en my.clerk.io. Esto contendrá todos los datos que subas y te permitirá interactuar con ellos a través de su Public API key.

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

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

Construye los Feeds #

Hay dos maneras de conectar los datos de tu tienda con Clerk.io.

Data Feeds #

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

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

Idealmente, se deben actualizar una vez al día de tu parte.
Deben alojarse en una URL donde el importador de Clerk.io pueda acceder. Por ejemplo: https://awesomestore.com/feed/clerk.json
Como regla básica, los feeds siempre deben contener todos los productos y categorías disponibles, pero también pueden contener datos de páginas (entradas de blog / artículos) y clientes.
Clerk utiliza los atributos de los productos para búsqueda, filtrado y estilo.
En la primera importación, debes incluir todos los pedidos históricos. Tras esto, pueden eliminarse ya que Clerk los mantiene en la base de datos.
Para productos, además de los obligatorios, puedes enviar cualquier otro atributo relevante para tu negocio, como reseñas, colores, etiquetas, imágenes especiales, etc.
Por defecto, Clerk importará los feeds al menos una vez al día.
Puedes configurar una ventana de 1 hora (por ejemplo, entre las 2:59 y las 3:59) si quieres que el importador se ejecute a una hora específica.

AI Integration #

Si tu plataforma de tienda online expone una API a la que puedas acceder, puedes usar una AI Integration para conectar Clerk.io directamente a la API. Lee la guía de AI Integration bajo Ask Clerk.io para más información.

Usa la Sincronización en Tiempo Real #

Esto es opcional pero recomendable.

Si la tienda requiere actualizaciones en tiempo real, como eliminar productos sin stock o actualizar precios, nuestra CRUD API se puede usar para añadir, actualizar o eliminar productos entre las importaciones de feeds.

2. Rastrea el comportamiento #

La IA de Clerk.io aprende sobre el comportamiento de los clientes a través de los pedidos y de la actividad en el sitio web. Rastrear este comportamiento es crucial para que la IA haga predicciones precisas y para mostrar estadísticas que prueban su efectividad.

Instala Clerk.js #

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

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

El script de Clerk.js debe añadirse 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 librería que genera IDs de visitante anónimos, sin cookies y rastreará clics en cualquier producto mostrado por Clerk mediante 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ñade Contexto #

Usa Clerk Context para indicar a Clerk.js qué producto, categoría o página está viendo el visitante. Esto puede personalizar las recomendaciones de productos y ayudar a Chat a entender qué producto o categoría está viendo el usuario. También puedes pasar el contexto de la cesta a Chat para que entienda qué productos están en la cesta.

Agrega el siguiente fragmento a la plantilla de la página después de que Clerk.js se haya cargado. Reemplaza los valores de ejemplo por los identificadores relevantes de producto, categoría o página, y usa null cuando un tipo de contexto no aplique.

<script>
  Clerk('context', {
    product: 123,
    category: 456,
    page: 789
  });
</script>

Añade el seguimiento de ventas #

Esto debe añadirse a 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, incluido lo que el visitante ha hecho clic durante la sesión antes del pedido.

Asegúrate de actualizar los campos 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 usará estos para registrar los productos vistos.

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

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

3. Visualiza los resultados #

Al usar Clerk.js, los diseños pueden gestionarse de dos formas:

Alojados en my.clerk.io usando nuestro Design Editor o código Liquid.
Alojados en tu código fuente como resultados embebidos

Clerk.io Design Editor showing a recommendation design

Alojado en Clerk.io #

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

Incrusta los resultados #

Alojar los diseños en tu código fuente te da la libertad de compartir diseños entre diferentes Stores. La desventaja es que no podrás usar nuestro sistema Element para realizar cambios en los resultados.

4. Añade Elements #

Esto se hace con fragmentos asociados a tu Element.

Inserta al Frontend #

Para insertar resultados de Clerk, elige un Element en my.clerk.io, configúralo para usar un diseño creado por ti y copia el fragmento a la página donde deberían mostrarse los resultados.

Clerk.js escanea el código fuente en busca de fragmentos con la clase clerk y utiliza los atributos data para hacer llamadas a la 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.

Configura #

Algunos fragmentos requieren datos adicionales como IDs de producto o ID de categoría que deben configurarse según la lógica de tu tienda online para obtener los datos.

Un ejemplo de esto es el fragmento de Best Alternatives Recommendations, 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 simplemente requieren añadir el fragmento a la página, con algunas opciones menores de configuración basadas en su comportamiento.

Un ejemplo es el fragmento 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, las nuevas Stores en Clerk vienen con nuestras Best Practice ya creadas como bloques individuales de Element, lo que facilita el inicio.

El fragmento cambiará dependiendo de la Product Logic elegida para el Element, así que siempre podrás ver qué atributos de datos 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.