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 términos de seguimiento y llamadas a la API.

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

Clerk.js es una biblioteca ligera que permite configurar Clerk utilizando simples fragmentos de HTML en el código fuente. Clerk.js escaneará la página en busca de fragmentos con la clase “clerk” y los utilizará para hacer llamadas a la API.

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

1. Sincronizar datos #

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

Crear Tienda #

Cada configuración de Clerk se configura en una Tienda en my.clerk.io. Esto contendrá todos los datos que subas y te permitirá interactuar con ellos a través de su clave de API pública.

Si necesitas configurar múltiples tiendas en línea o dominios, cada uno debe tener su propia Tienda.

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

Construir Feeds #

Esta es la fuente principal de datos de la tienda en línea 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 de tu parte.
  • Deberían estar alojados en una URL desde donde el importador de Clerk.io pueda recuperarlos. p.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 páginas (publicaciones de blog / artículos) y datos de clientes.
  • Clerk utiliza atributos de producto para buscar, filtrar y dar estilo.
  • 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 requeridos, puedes enviar cualquier otro atributo que sea importante para tu negocio, como reseñas, colores, etiquetas, imágenes de presentación, etc.
  • Por defecto, Clerk importará los feeds al menos una vez al día.
  • Puedes configurar una ventana dentro de 1 hora (p. ej., entre 2:59-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 en línea requiere actualizaciones en tiempo real, como eliminar productos fuera de stock o actualizar precios, se puede utilizar nuestra API CRUD para agregar, 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. Rastrear este comportamiento es crucial para que la IA haga predicciones precisas y para mostrar las estadísticas que demuestran qué tan bien 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 los pedidos son mejorados por Clerk.
  • Personalizar varias Recomendaciones en todo el sitio.

El script de Clerk.js debe añadirse con tus otros scripts en la sección <head>, y configurarse con la Clave de API Pública que se encuentra en my.clerk.io.

Esto cargará la biblioteca que genera IDs de visitantes anónimos sin cookies y rastreará clics en cualquier producto mostrado por Clerk a través de los fragmentos.

<!-- Inicio de la herramienta de personalización de comercio electrónico de Clerk.io - 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>
<!-- Fin de la herramienta de personalización de comercio electrónico de Clerk.io - www.clerk.io -->

Agregar Seguimiento de Ventas #

Esto debe añadirse a tu página de éxito de pedido. Siempre que se realice un pedido, Clerk.js utilizará el fragmento para hacer una llamada a la API que contenga la información del pedido, incluyendo en qué ha hecho clic el visitante en 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 vistos por los visitantes, para personalizar ciertos banners.

Si vas a utilizar productos de Cross-Sell y/o Alternativos en tus páginas de detalles de productos, Clerk los utilizará para registrar el/los producto(s) vistos por los visitantes.

Si no, debes incluir este fragmento en la página de detalles del producto para registrar también las vistas de productos:

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

3. Visualizar resultados #

Al usar Clerk.js, los diseños se pueden manejar de dos maneras:

Alojamiento en Clerk.io #

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

Incrustar resultados #

Alojar diseños en tu código fuente te da la libertad de compartir diseños entre múltiples Tiendas. La desventaja es que no puedes utilizar nuestro sistema de Contenido para hacer cambios en los resultados.

4. Agregar Fragmentos #

Esto se hace con fragmentos asociados a tu Contenido.

Insertar en el Frontend #

Para insertar resultados de Clerk, elige un Contenido en my.clerk.io, configúralo para usar un diseño que creaste y copia el fragmento a una 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 de datos para hacer llamadas a la API.

Hace referencia a la configuración de tu Contenido, incluyendo el endpoint de API / lógica de contenido, 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 productos o ID de categoría que deben configurarse según la lógica de tu tienda en línea para obtener datos.

Un ejemplo de esto es el fragmento de Recomendaciones de Mejores Alternativas, que requiere que se agregue un ID de producto al fragmento:

<!--Recomendaciones de Mejores Alternativas-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

Otros simplemente requieren que el fragmento se agregue a la página, con algunas opciones de configuración menores según cómo debería comportarse.

Un ejemplo es el fragmento de Búsqueda Instantánea, que requiere un selector CSS para la entrada de búsqueda y el número de sugerencias y categorías a mostrar:

<!--Búsqueda Instantánea-->
<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 Tiendas en Clerk vienen con nuestras Mejores Prácticas ya creadas como bloques de Contenido individuales, facilitando el inicio.

El fragmento cambiará dependiendo de la Lógica de Producto elegida para el Contenido, por lo que siempre podrás ver qué atributos de datos son necesarios para que configures.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.