Instalación completa de la plataforma personalizada

Consulta todos los pasos necesarios para instalar Clerk en cualquier plataforma

Platforms:

Custom Platform

Overview

Cuando Clerk no dispone de una extensión o integración prediseñada para una determinada plataforma de tienda online, la denominamos plataforma personalizada.

La mayor diferencia es que las plataformas personalizadas deben sincronizarse con una fuente de datos e insertar los resultados de Clerk 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.

Clerk.js es una biblioteca ligera que permite configurar Clerk utilizando simples snippets 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 realizar llamadas a la API.

Estos son los 4 pasos que seguirás al instalar Clerk:

1. Sincronizar datos
Seguir el comportamiento
1. Visualizar resultados
Añadir resultados al frontend

1. Sincronizar datos

1.1 Configurar una tienda

Cada Clerk se configura en una Tienda en my.clerk.io. Esta contendrá todos los datos que subas, y te permitirá interactuar con ella a través de su clave API pública.
Si necesitas configurar múltiples tiendas web o dominios, cada uno debería tener su propio Store.
Puedes copiar tu configuración a nuevos Stores después de hacer la primera configuración

1.2 Construir un feed JSON

Esta es la principal fuente de datos de la tienda virtual para Clerk. Consulte la especificación para el feed aquí.
- Lo ideal es que el feed se actualice una vez al día.
- El feed debe alojarse en una URL que el importador de Clerks pueda recuperar, por ejemplo https://awesomestore.com/feed/clerk.json.
- Como base, el feed debe contener siempre todos los productos y categorías disponibles, pero también puede contener páginas (entradas de blog / artículos) y datos de clientes.
- En la primera importación, debe incluir todos los pedidos históricos. Después de la primera importación, estos pueden ser eliminados ya que Clerk los mantiene en la base de datos.
- Para productos, aparte de los requeridos, puedes enviar cualquier otro atributo que sea importante para tu negocio, como opiniones, colores, etiquetas, splash-images etc.
- Clerk utiliza los atributos de los productos para buscar, filtrar y estilizar.
Por defecto, Clerk importará el feed 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 concreta.

1.3 Actualizaciones en tiempo real (opcional)

Si la tienda virtual requiere actualizaciones en tiempo real, como la eliminación de productos agotados o la actualización de precios, nuestra API CRUD puede utilizarse para añadir, actualizar o eliminar productos entre importaciones de feeds.

2. Seguimiento del comportamiento

2.1 Instalar Clerk.js

Clerk 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ítica que muestra qué pedidos fueron impactados por Clerk y cuánto más valen
- Personalizar varias recomendaciones en el sitio web
El script Clerk.js debe añadirse con el resto de scripts en la sección <head>, y configurarse con la Public API Key que se encuentra en my.clerk.io.
Esto cargará la librería 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=(d.location.protocol=='https:'?'https':'http')+'://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_PUBLIC_API_KEY_HERE'
    });
  </script>
  <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

2.2 Añadir seguimiento de ventas

Esto debe ser añadido a su página de éxito de pedidos.
Actualiza los marcadores de posición para obtener los datos correctos de los pedidos.
Cada vez que se realice un pedido, Clerk.js utilizará el fragmento para realizar una llamada API a Clerk con la información 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 también registra los productos vistos por los visitantes, para personalizarlos en determinados banners.
Si vas a utilizar la venta cruzada y/o productos alternativos en tus páginas de detalle de producto, Clerk los utilizará para registrar los productos vistos por los visitantes.
Si no, debes incluir este fragmento en la página de detalles del producto para registrar también las vistas del producto:

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

3. Visualizar resultados

Cuando se utiliza Clerk.js, los diseños se pueden manejar de dos maneras:
- Alojados en my.clerk.io utilizando nuestro Design Editor o Liquid code
- Alojados en tu código fuente como resultados incrustados

El alojamiento de diseños en my.clerk.io, ofrece la mayor flexibilidad, ya que puede cambiar diseños, lógicas y filtros sin cambiar su código in situ después de la configuración. El inconveniente es que los diseños se gestionan por tienda.
Alojar los diseños en tu código fuente te da la libertad de compartir diseños entre varias Tiendas, pero el inconveniente es que no puedes utilizar nuestro sistema de contenidos para realizar cambios en los resultados.

4. Añadir fragmentos a frontend

Esto se hace con Fragmentos de contenido en Clerk.js.
Para insertar resultados Clerk, elija un Contenido en my.clerk.io, establecer un diseño que ha creado el diseño que ha creado y copiar el fragmento a la página donde se debe mostrar. Ejemplos:

<!--Best Alternatives Recommendations-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

<!--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>

El fragmento hace referencia a la configuración de Contenido para la lógica del producto, la cantidad de productos a devolver, el diseño, etc. y devuelve un bloque HTML completo que se inserta en el fragmento.
Algunos fragmentos requieren datos adicionales como identificación de producto o identificación de categoría que deben ser añadidos.
Por defecto, las nuevas Tiendas en Clerk vienen con nuestras Mejores Prácticas ya creadas como bloques de Contenido individuales, lo que facilita el comienzo.

Otras opciones

Para un amplio resumen de nuestra plataforma técnica, incluyendo la integración con la API directamente, consulte este artículo

Hay algunos casos en los que una integración con la API del lado del servidor es mejor para usted, por ejemplo cuando:

Sustituir una API existente por Clerk
Gestionar reglas de precios y catálogos de clientes complejos
Crear una aplicación

Si no es tu caso, te recomendamos que utilices Clerk.js.