Get Started

Cuando Clerk no tiene una extensión o integración preconstruida para una plataforma de tienda online específica, 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 complejo en cuanto a seguimiento y llamadas API.

Si prefieres configurar Clerk.io usando nuestra API, consulta este artículo en su lugar.

Clerk.js es una biblioteca ligera que permite configurar Clerk mediante fragmentos HTML simples 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 API.

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

1. Sincronizar datos #

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

Crear Store #

Cada configuración de Clerk se realiza en un Store en my.clerk.io. Este 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 propio Store.

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

Construir Feeds #

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

Data Feeds #

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

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

• Idealmente, deberían actualizarse una vez al día en tu lado.
• Deberían estar alojados en una URL donde el importador de Clerk.io pueda acceder. 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 datos de pages (entradas de blog / artículos) y customer.
• Clerk utiliza los atributos de los productos para búsquedas, filtros y estilos.
• En la primera importación, debes incluir todas las órdenes históricas. Después de la primera importación, estas pueden ser eliminadas, 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 reviews, colors, labels, 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 las 3:59) si quieres que el importador se ejecute en un horario específico.

AI Integration #

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

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 usada para añadir, actualizar o eliminar productos entre importaciones de feeds.

2. Rastrear comportamiento #

La IA de Clerk.io aprende sobre el comportamiento del cliente a través de pedidos y actividad en el sitio web. El seguimiento de este comportamiento es crucial para que la IA haga 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 los pedidos.
• Analíticas que muestran cómo Clerk mejora los pedidos.
• Personalizar diversas Recommendations a lo largo del 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 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 Contexto #

Utiliza Clerk Context para informar 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 comprender qué página de producto o categoría se está visualizando. También puedes pasar el contexto del carrito a Chat para que comprenda qué productos están en el carrito.

Añade el siguiente fragmento a la plantilla de la página después de que Clerk.js se haya cargado. Sustituye los valores de ejemplo con 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ñadir Seguimiento de Ventas #

Esto debe añadirse a tu página de éxito de pedido. Cada vez que se realiza un pedido, Clerk.js usará el fragmento para hacer una llamada API que contiene la información del pedido, incluyendo en qué ha hecho clic el visitante durante 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 visualizados 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 el/los producto(s) visualizados por los visitantes.

Si no es así, 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 usas Clerk.js, los diseños pueden manejarse de dos formas:

• Alojarse en my.clerk.io usando nuestro Design Editor o Liquid code.

• Alojarse en tu código fuente como embedded results

Alojar en Clerk.io #

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

Insertar 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 utilizar nuestro sistema de Element para editar los resultados.

4. Añadir Elements #

Esto se hace con fragmentos asociados a tu Element.

Insertar en el Frontend #

Para insertar los 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 una 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 API.

Hace referencia a la configuración de tu Element, incluyendo el endpoint API / lógica del elemento, diseño, número de productos a devolver, etc., y devuelve 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 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 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 que se añada el fragmento a la página, con algunas opciones de configuración menores según cómo deba comportarse.

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

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.