Get Started

Cuando Clerk no tiene una extensión o integración preconstruida para una plataforma de tienda online, lo denominamos 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 método 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 biblioteca ligera que permite configurar Clerk utilizando 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 a la API.

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

1. Sincroniza los datos #

Primero, necesitas enviar datos al sistema para que la IA de Clerk.io entienda tu tienda y pueda empezar a predecir resultados.

Crear tienda #

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

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

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

Construir Feeds #

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

Data Feeds #

Esta es la fuente principal 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 por tu parte.
• Deben estar alojados en una URL desde donde el importador de Clerk.io pueda acceder. Por ejemplo, https://awesomestore.com/feed/clerk.json
• Como línea 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 búsquedas, filtrados y estilos.
• En la primera importación, debes incluir todos los pedidos históricos. Después de la primera importación, estos 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 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 2:59-3:59) si deseas que el importador se ejecute en un momento específico.

AI Integration #

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

Usar sincronización en tiempo real #

Esto es opcional pero recomendado.

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

2. Seguimiento de comportamiento #

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

Instalar Clerk.js #

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

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

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

Esto cargará la biblioteca que genera IDs de visitante anónimos y sin cookies y permitirá 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ñadir contexto #

Utiliza 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é página de producto o categoría se está visualizando. También puedes pasar el contexto de la cesta a Chat para que comprenda 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. Sustituye los valores de ejemplo por los identificadores relevantes de producto, categoría o página, y utiliza 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 agregarse en la página de éxito de pedido. Cuando se realiza un pedido, Clerk.js utilizará el fragmento para hacer una llamada a la API que contenga la información del pedido, incluyendo en qué productos ha hecho clic el visitante durante la sesión.

Asegúrate de actualizar los placeholders para extraer los datos correctos del pedido.

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

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

Si no es así, debes incluir este fragmento en la página de detalle del producto también, para registrar 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 se pueden gestionar de dos formas:

• Alojados en my.clerk.io usando nuestro Editor de Diseño o código Liquid.

• Alojados en tu código fuente como resultados embebidos

Alojar en Clerk.io #

Alojar los diseños en my.clerk.io ofrece la mayor flexibilidad, ya que puedes cambiar los diseños, lógicas y filtros sin modificar tu código in situ tras la configuración. El inconveniente es que los diseños se tratan de forma individual por Store.

Empotrar 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 podrás usar nuestro sistema de Element para hacer cambios en los resultados.

4. Añadir Elements #

Esto se realiza mediante 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 creado por ti y copia el fragmento a la página donde deban mostrarse los resultados.

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

Hace referencia a tu configuración de 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 datos adicionales como IDs de producto o ID de categoría que deben configurarse según la lógica de tu tienda para obtener datos.

Un ejemplo de esto es el fragmento de Best Alternatives Recommendations, que requiere añadir el 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 menores de configuración según el comportamiento deseado.

Un ejemplo es el fragmento de Instant Search, que requiere un selector CSS para la caja 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 Stores nuevas en Clerk vienen con nuestra Best Practice ya creada como bloques de Element individuales, facilitando el inicio.

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.