Cualquier (webshop)

Get Started

Clerk.js

Cuando Clerk no tiene una extensión o integración preconstruida para una determinada plataforma de tienda online, la llamamos 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 cuanto a seguimiento y llamadas a la 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 de 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 seguirás al instalar Clerk.

1. Sincronizar datos #

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

Crear Store #

Cada configuración de Clerk se realiza en una Store en my.clerk.io. Aquí se almacenarán todos los datos que subas y te permitirá interactuar con ellos a través de su clave de API Pública.

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 hacer la primera configuración.

Crear Feeds #

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

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

  • Idealmente, deben actualizarse una vez al día desde tu lado.
  • Deben estar alojados en una URL donde el importador de Clerk.io pueda obtenerlo. 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 contener datos de páginas (posts de blog / artículos) y 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, se pueden eliminar, ya que Clerk las mantiene en la base de datos.
  • Para los productos, además de los obligatorios, puedes enviar cualquier otro atributo importante para tu negocio, como reseñas, colores, etiquetas, imágenes destacadas, 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 deseas que el importador se ejecute a una hora específica.

Usar Sincronización en Tiempo Real #

Esto es opcional, pero recomendado.

Si la tienda online requiere actualizaciones en tiempo real, como eliminar productos sin stock o actualizar precios, nuestra API CRUD puede usarse para agregar, actualizar o eliminar productos entre importaciones de feeds.

2. Seguimiento del Comportamiento #

La IA de Clerk.io aprende sobre el comportamiento del cliente mediante los pedidos y la actividad en el sitio web. Registrar este comportamiento es crucial para que la IA realice predicciones precisas y para mostrar las estadísticas que demuestran cómo funciona.

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 los pedidos.
  • Analíticas que muestran cómo Clerk mejora los pedidos.
  • Personalizar diversas Recommendations en todo el sitio.

El script de Clerk.js debe añadirse junto con tus otros scripts en la sección <head>, y configurarse con la clave de API Pública encontrada 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 -->

Añadir Seguimiento de Ventas #

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

Asegúrate de actualizar los placeholders 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 ciertos banners.

Si vas a usar 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 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 #

Al utilizar Clerk.js, los diseños pueden gestionarse de dos maneras:

Alojamiento 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. El inconveniente es que los diseños se gestionan por Store.

Embebido de resultados #

Alojar los diseños en tu código fuente te da la libertad de compartir diseños entre varias Stores. El inconveniente es que no puedes utilizar nuestro sistema de Element para realizar cambios en los resultados.

4. Añadir Snippets #

Esto se realiza 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 cualquier fragmento con la clase clerk y utiliza los data-attributes para hacer llamadas a la API.

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

Configurar #

Algunos fragmentos requieren datos adicionales como IDs de producto o ID de categoría que deben configurarse en función de la lógica de obtención de datos de tu tienda online.

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

<!--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 según cómo deba comportarse.

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 ya vienen con nuestras Best Practice creadas como bloques individuales de Element, facilitando el inicio.

El fragmento cambiará en función de la lógica de productos 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.