Instalación completa de Clerk.io en JTL

Mira cómo hacer una instalación completa de Clerk.io en JTL en menos de 10 minutos.

IMPORTANTE: Debe haber instalado el plugin (S360 CLerk) en su backend JTL en Plugins.

Esta documentación le guiará a través de los siguientes pasos:

Añadir una tienda en my.clerk.io

Cada tienda en Clerk.io es un entorno aislado con sus propios datos, claves API y panel de control. Lo primero que tendrás que hacer al configurar tu cuenta de Clerk.io, es crear tu primera Tienda:

Cómo se ve la pantalla de creación de tienda](storecreation.PNG)

Después de esto, la Guía de Configuración te guiará a través del resto de la configuración.

***Tenga en cuenta que cada vez que se cree una tienda, se enviará un correo electrónico con las claves pública y privada al propietario de la cuenta de la empresa. Esto se utiliza para crear un acceso seguro entre Clerk y JTL.

Instalación de los dos scripts de seguimiento

Con el plugin S360 Clerk, puede activar los scripts de seguimiento de visitantes y pedidos que se inyectarán en partes de la tienda web:

  • El script de seguimiento de visitantes, que inicializa Clerk.io. Debe inyectarse en la cabecera de la tienda web.

  • El script Order Tracking, que permite el seguimiento de los pedidos en tiempo real. Suele instalarse en la página de confirmación del pedido.

Puede habilitarlos dentro del plugin JTL en la sección ALLGEMEIN:

Dentro del plugin clerk si se desplaza un poco hacia abajo](jtl-tracking.PNG)

Cuando ambos scripts estén insertados, Clerk.io se inicializará.

Sincronizar tu tienda JTL con Clerk.io

Para mostrar resultados, Clerk.io debe sincronizarse con los productos, categorías, ventas, páginas y clientes de JTL en un feed de datos generado.

Esto se hace configurando un feed de datos que permita acceder a los datos regularmente. Esto se explica con más detalle en esta guía Creación de feeds de datos en JTL.

Cuando el feed de datos ha sido generado y añadido a su configuración de sincronización de datos en Estado del Sistema en su backend my.clerk.io.

Añadir búsqueda y recomendaciones

Los elementos frontales de Clerk.io constan de dos partes:

  • Un Diseño que controla la presentación visual de los productos. Esto se puede cambiar para que coincida con cualquier estilo que desee o puede utilizar algunas de nuestras plantillas de diseño estándar Plantilla de diseño a utilizar en Clerk.

  • La mayoría de las veces utilizará 3 diseños: Uno para la Búsqueda Instantánea, la página de Búsqueda y Recomendaciones.

Ejemplo de un slider de recomendaciones utilizando nuestro editor de diseño

  • Un Contenido con un embedcode adjunto que muestra los productos. Cada contenido tiene un nombre específico en su embedcode que desea agregar a los respectivos campos nombre Clerk TemplateName. Esto se utiliza para comunicarse entre su tienda virtual y el contenido del empleado respectivo.

La Guía de Configuración le guiará a través de donde cada elemento debe ser colocado en la mayoría de las configuraciones JTL.

Al final de su configuración, los ajustes en el plugin deben tener este aspecto. Las siguientes imágenes son sólo para fines de demostración.

Credenciales (plugin_01.png)

OptionMeaning
Clave API: Su clave API recibida de Clerk.
Clave privada: Su clave API privada heredada proporcionada por Clerk. Necesaria para restringir el acceso a la fuente de datos.
Idioma: Idioma de la fuente de datos.
Grupo de clientes: Precios para el grupo de clientes.
MonedaMoneda en el feed de datos
Diseño de facetas Diseño de las facetas

Configuración de seguimiento y búsqueda (plugin_02.png)

ComponentOptionMeaning
GeneralmenteUsar rastreo sin cookiesRastreo sin uso de cookies
¿Utilizar seguimiento del carrito de la compra?Informa a Clerk de los cambios en la cesta de la compra (seguimiento general de la cesta de la compra)
Anonimizar correos electrónicosLas direcciones de correo electrónico se transmiten a Clerk de forma anónima (como hash).
Búsqueda en vivo (Encabezado)¿Activar búsqueda en vivo?Si se desactiva, la búsqueda en vivo de Clerk no se mostrará en el frontend.
Selektor LivesearchSelector de búsqueda en vivo independiente de Clerk
Clerk TemplateName LivesuchePlantilla para la búsqueda en vivo (Clerk Backend → Search → Content → Live search → Insert into website → En el código el valor de “data-template="@WERT’”).
Número de sugerencias de búsqueda en la búsqueda en vivoNúmero de sugerencias de búsqueda que se mostrarán
Número de sugerencias de categoría Número de sugerencias de categoría que se mostrarán
Número de sugerencias de página Número de sugerencias de página que se mostrarán
PositionPosition of the live search result in relation to the selector
Búsqueda (página de resultados)¿Activar página de resultados?Si se desactiva, la página de resultados de Clerk no se mostrará en el frontend.
Clerk TemplateName SearchPlantilla para la búsqueda en vivo (Clerk Backend → Search → Content → Search → Insert into website → En el código el valor de “data-template="@WERT’”).
Posición de las facetasPosición de las facetasPosición de las facetas
Mostrar las facetas en la URLMostrar las facetas en la URL
Atributo de facetas del empleado Lista separada por comas de facetas disponibles (características JTL)
Clerk Facets Attributes Multiple ValuesLista separada por comas de facetas disponibles con valores múltiples (características JTL para filtrado OR)

Ajustes de alimentación de datos y Recomendación

ComponentOptionMeaning
Alimentación de datosProcesamiento de cronCómo debe activarse el cron para generar la alimentación de datos (se explica con más detalle en la sección Posibilidades de creación de alimentación de datos)
Tamaño del loteTamaño del lote de los productos del feed (se explica con más detalle en la sección Tamaño del lote)
Página de producto¿Activar el deslizador de la página de producto?Si se desactiva, el deslizador de la página de producto no se mostrará en el frontend.
Selector de artículos sliderSelector para el slider de artículos independiente de Clerk
Clerk TemplateName ArticleNombres de las plantillas del slider a emitir. Se pueden especificar múltiples nombres de plantillas como una lista separada por comas.
Método de inserción del deslizadorCómo añadir el deslizador al selector (After, Append, Before, Prepand, ReplaceWith)
Filtro de duplicadosImpide que los deslizadores posteriores contengan productos de deslizadores anteriores (por defecto: Sí)
Página de la cesta de la compra¿Activar el deslizador de la cesta de la compra?Si se desactiva, el deslizador de la página del carrito de la compra no se mostrará en el frontend.
Selector de cesta de la compra deslizanteSelector para el deslizador de la cesta de la compra independiente de Clerk
Clerk TemplateName Shopping CartNombres de las plantillas de slider a emitir. Se pueden especificar múltiples nombres de plantillas como una lista separada por comas.
Método de inserción del deslizadorCómo añadir el deslizador al selector (After, Append, Before, Prepand, ReplaceWith)
Filtro de duplicadosEvita que los deslizadores siguientes contengan productos de deslizadores anteriores (por defecto: Sí)
Powerstep¿Activar Powerstep Slider?Si está desactivado, el deslizador del power step no se reproduce en el frontend.
Selector de PowerstepSelector para el Slider de Powerstep independiente de Clerk
Clerk TemplateName PowerstepNombres de las plantillas del deslizador a emitir. Se pueden especificar múltiples nombres de plantillas como una lista separada por comas.
Método de inserción de PowerstepCómo añadir el deslizador al selector (After, Append, Before, Prepand, ReplaceWith)
Filtrar duplicadosEvita que los deslizadores posteriores contengan productos de los deslizadores anteriores (por defecto: Sí)

Categoría y configuración de la intención de salida

ComponentOptionMeaning
Página de categoría¿Activar el deslizador de la página de categoría?Si se desactiva, el deslizador de la página de categoría no se mostrará en el frontend.
Kategorie Selektor SliderSelector para el slider de categoría independiente de Clerk
Clerk TemplateName Shopping CartNombres de las plantillas de slider a emitir. Se pueden especificar múltiples nombres de plantillas como una lista separada por comas.
Método de inserción del deslizadorCómo añadir el deslizador al selector (After, Append, Before, Prepand, ReplaceWith)
Filtro de duplicadosImpide que los deslizadores posteriores contengan productos de deslizadores anteriores (por defecto: Sí)
Intención de salida¿Habilitar el deslizador de intención de salida?Si se desactiva, la intención de salida no se muestra en el frontend.
Plantilla para la intención de salida.