Cualquier (webshop)

Clerk.js

Integra Clerk.io en cualquier frontend con una biblioteca JS ligera.

Descripción general #

Clerk.js es una biblioteca de JavaScript que simplifica la integración de nuestra API con el frontend. Con solo 37.7kb, es una solución extremadamente ligera.

Hay tres beneficios en utilizar Clerk.js:

Es robusta, ya que se carga de manera asíncrona. Esto significa que el resto de la página no depende de una respuesta de API antes de cargarse.
Suele ser más rápida, ya que tu servidor puede empezar a renderizar la página en paralelo mientras Clerk.js realiza llamadas y muestra resultados.
El seguimiento de visitantes y clics se gestiona automáticamente para cualquier resultado mostrado por Clerk. Esto no requiere cookies, ya que generamos un valor hasheado de la IP del visitante y del useragent, combinado con una sal única que rota cada 30 días.

Clerk.js se carga con un script de inicialización agregado en el header del sitio web:

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

Esto carga la biblioteca desde nuestro CDN y permite acceder a sus funcionalidades mediante el objeto Clerk, y configura Clerk.js con la clave de API para que ya sepa para qué tienda está haciendo las llamadas a la API.

Fragmentos #

Cuando se carga la página, Clerk.js la escanea en busca de cualquier fragmento con la clase “clerk”.

Luego utiliza los atributos del fragmento para construir una llamada a la API obteniendo la clave de API desde la configuración del script de inicialización.

<span
  class="clerk"
  data-api="recommendations/popular"
  data-limit="10"
  data-template="@clerk-product-template">
</span>

El diseño visual es gestionado por el Design, el cual también es referenciado por el fragmento.

Clerk.js utiliza diseños Liquid para renderizar HTML con los datos que retorna la API. Estos se formatean como scripts, referenciados por su ID en data-template en tu fragmento.

<span class="clerk"
     data-api="search/search"
     data-query="jedi"
     data-limit="20"
     data-template="#clerk-template">
</span>

<script type="text/x-template" id="clerk-template">
  <h1>Resultado de búsqueda para {{ query }}.</h1>
  {% for product in products %}
    <div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Comprar ahora</a>
    </div>
  {% endfor %}

  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Cargar más resultados</a>
</script>

Los fragmentos también pueden simplificarse para solo incluir una referencia a un bloque Element, usando la sintaxis data-template="@element-block-id":

<span class="clerk"
     data-template="@product-page-alternatives"
     data-products="[12352]">
</span>

Los diseños luego se gestionan con el Editor de Diseños o con código Liquid HTML de forma intuitiva desde my.clerk.io.

Tus fragmentos solo necesitarán contener la clase clerk, cualquier información específica de la página como los ID de producto, y una referencia al ID de un bloque Element en data-template.

Inyección #

La inyección es una funcionalidad que permite insertar fragmentos de contenido en tu sitio web sin tener que añadirlos manualmente. En su lugar, simplemente eliges un Selector CSS donde inyectar el fragmento y Clerk.js lo añadirá automáticamente al cargar la página.

Lee más sobre Inyección aquí.

Configuración #

Clerk.js permite una variedad de configuraciones que modifican su funcionamiento.

IDs de Visitantes #

Por defecto, Clerk.js genera IDs de visitante anónimos, usados para rastrear las sesiones.

Si los clientes aceptan cookies, Clerk.js puede configurarse para colocar una cookie persistente con el ID del visitante, lo que permite el seguimiento a largo plazo.

Si prefieres gestionar manualmente los IDs de sesión, puedes configurar el parámetro visitor que Clerk utiliza en las llamadas a la API. Alternativamente, puedes desactivar el seguimiento de sesiones completamente estableciendo visitor en null.

// ID persistente de visitante
Clerk('config', {
  visitor: 'persistent'
});

// ID personalizado de visitante
Clerk('config', {
  visitor: 'ABC123'
});

// Desactivar seguimiento de visitantes
Clerk('config', {
  visitor: null
});

Contexto de la Página #

Configura Clerk.js con el contexto de la página que el visitante está visualizando actualmente. Esto sirve para enriquecer los datos de seguimiento en funcionalidades de personalización como Email Triggers, segmentación de Audience y contexto de Chat.

Clerk('context', {
  product: null,  // Coloca el ID del producto en páginas de producto, por ejemplo 12345 o null
  category: null, // Coloca el ID de la categoría en páginas de categoría, por ejemplo 67 o null
  page: null      // Coloca el ID o el tipo de la página en otras páginas, por ejemplo 'homepage' o null
});

Idioma #

Configura Clerk.js con el idioma escrito del sitio web. Esto se utiliza para que Clerk.io gestione correctamente las reglas gramaticales en Search, y para obtener las traducciones correctas cuando usas feeds multilingües.

Clerk('config', {
  language: 'italian'
});

Los valores aceptados se encuentran en Idiomas soportados.

Reemplaza los valores de ejemplo por la lógica de tu plataforma para obtener los IDs dinámicamente. Cada valor debe establecerse según el tipo de página en la que se encuentre el visitante:

product: El ID del producto que se visualiza en páginas de producto. Establece como null en páginas que no sean de producto.
category: El ID de la categoría que se visualiza en páginas de categoría. Establece como null en páginas que no sean de categoría.
page: Un identificador o string tipo de página en otras páginas como la página de inicio, carrito o checkout. Establece como null si no aplica.

Si tu plataforma no tiene un ID específico disponible para un tipo de página, deja el valor como null. Solo establece valores para los tipos de página relevantes.

Funciones de Diseño #

Clerk.js soporta Formatters y Globals, los cuales pueden usarse para crear funcionalidades personalizadas en JavaScript para tus diseños.

Formatters #

Estos se utilizan para influenciar o modificar atributos. Por ejemplo, puedes querer mostrar solo los primeros 40 caracteres de una descripción o calcular un descuento específico según el tipo de cliente que haya iniciado sesión.

Globals #

Estos se destinan a usarse con datos del frontend a los que quieras acceder en los diseños. Algunos ejemplos pueden ser el monto restante para lograr el envío gratis, el nombre del cliente autenticado, un símbolo de moneda o una tasa de conversión.

A continuación, un ejemplo de configuración de formatters y globals.

Configuración #

Clerk('config', {
  formatters: {
    uppercase: function(string) {
        return string.toUpperCase();
    }
  },
  globals: {
    currency_symbol: '$'
  }
});

Diseño #

<div class="name">{{ product.name | uppercase }}</div>
<div class="price">{{ currency_symbol }}{{ product.price }}</div>

Salida #

<div class="name">GREEN LIGHT SABER</div>
<div class="price">$1999.99</div>

Seguimiento de Email #

Clerk.js puede recopilar emails automáticamente en la sesión del cliente para personalizar recomendaciones en el email incluso si todavía no realizó una compra.

Activa collect_email en tu configuración de Clerk.js:

<script type="text/javascript">
  Clerk('config', {
    key: 'insert_api_key',
    collect_email: true
  });
</script>

Con esto habilitado, Clerk.js monitorea los campos de email y envía automáticamente log/email cuando un visitante ingresa una dirección de correo.

Si quieres registrar un email manualmente, también puedes añadir un fragmento como este:

<span class="clerk" data-api="log/email" data-email="EMAIL@EXAMPLE.COM"></span>

Cómo funciona la asociación #

Cuando se registra un email, Clerk envía tanto el ID del visitante como el email a la API para que puedan asociarse.

Así, Clerk puede identificar lo que ese visitante ha hecho en su historial de sesión (por ejemplo, productos vistos, clics y búsquedas) y asociar ese comportamiento con la dirección de correo.

Con esa asociación, los mismos datos de comportamiento pueden utilizarse en emails (como campañas disparadas o personalizadas) y para personalización onsite en recomendaciones para clientes autenticados.

Renderizado Personalizado #

Esto se utiliza principalmente con aplicaciones de página única (SPA), aplicaciones web progresivas (PWA) y otras aplicaciones que no utilizan cargas de página tradicionales.

Clerk.js renderiza cualquier elemento con la clase clerk, pero pueden usarse otras clases para personalizar el renderizado como selectores personalizados.

Por defecto, Clerk requiere que ejecutes Clerk("content", "SELECTOR") para renderizar contenido cada vez que debe mostrarse.

Agregando auto_init_custom_selectors: true a la configuración, Clerk.js inicializará automáticamente cualquier selector personalizado cuando el DOM cambie, siempre y cuando ya haya sido renderizado con Clerk("content", "SELECTOR") al menos una vez.

Este comportamiento continúa hasta que ocurre una recarga completa de la página.

Depuración #

Clerk.js tiene un modo de depuración integrado que registra información de diagnóstico en la consola del navegador. Su configuración persiste en sessionStorage bajo la clave __clerk_debug, manteniendo el modo activo durante la navegación en la misma sesión del navegador.

Por defecto, el modo de depuración está habilitado con level en warn y collect en true.

Métodos de activación #

Hay tres formas de activar el modo de depuración.

Atajo de consola

La forma más sencilla es llamar a Clerk('debug') desde la consola del navegador. Acepta varios formatos de argumento:

Clerk('debug');              // Habilitar con valores por defecto
Clerk('debug', true);        // Habilitar
Clerk('debug', false);       // Deshabilitar
Clerk('debug', 'on');        // Habilitar
Clerk('debug', 'off');       // Deshabilitar
Clerk('debug', 'warn');      // Establecer nivel de logueo directamente
Clerk('debug', {             // Enviar un objeto de configuración completo
  enable: true,
  level: 'log',
  group: true
});

Vía configuración

El modo de depuración también puede configurarse mediante la llamada estándar de configuración:

Clerk('config', 'debug', {
  enable: true,
  level: 'log',
  collect: true,
  group: true,
  collapsed: false
});

Hash en la URL

El modo de depuración puede activarse añadiendo un fragmento hash a la URL. Esto es útil para compartir enlaces de depuración con colegas:

https://yourwebsite.com/#clerkjs:debug.enable=true&debug.level=warn

Cuando se activa vía hash de URL, la configuración también se guarda en sessionStorage bajo la clave __clerk_tmp_config.

Opciones de configuración #

Opción	Descripción	Tipo	Predeterminado
`enable`	Habilita o deshabilita los mensajes de depuración en la consola del navegador.	`bool`	`true`
`level`	Define el nivel de logueo. Valores aceptados: `log`, `warn` o `error`.	`string`	`warn`
`collect`	Si es `true`, los mensajes son almacenados en el almacenamiento del navegador. Si es `false`, se utiliza almacenamiento temporal.	`bool`	`true`
`group`	Agrupa mensajes relacionados en la consola para una lectura más sencilla.	`bool`	—
`collapsed`	Si es `true`, los mensajes de consola agrupados aparecen colapsados por defecto. Solo aplica cuando `group` está habilitado.	`bool`	—
`clear`	Borra todos los mensajes almacenados en los logs.	`bool`	—

Almacenamiento en sesión #

Cuando el modo de depuración está activado, la configuración se guarda en sessionStorage bajo la clave __clerk_debug. Esto asegura que la configuración de depuración persista mientras los visitantes naveguen entre páginas, sin afectar otras pestañas ni persistir más allá de la sesión.

Plataformas de gestión de consentimiento (CMP) como Cookiebot pueden marcar __clerk_debug como un elemento de almacenamiento que requiere documentación. Es una clave funcional utilizada únicamente con fines de depuración para desarrolladores. No contiene datos personales ni información de seguimiento.

Para más detalles sobre la estructura de las respuestas de API en depuración, consulta Depuración de respuestas.

UI Kit #

Clerk.js incluye un conjunto de herramientas UI para elementos importantes que pueden usarse para mejorar la experiencia de usuario. Esto suele ahorrar tiempo de desarrollo en configuraciones personalizadas.

Instant Search #

Una parte clave de una gran experiencia de búsqueda e-commerce es obtener resultados inmediatamente mientras escribes. Nuestro componente UI de Instant Search hace que esta experiencia sea rápida y fácil de construir.

Cualquier contenido de Clerk.io puede ser teóricamente convertido en un componente de Instant Search, pero funciona mejor como un desplegable mostrando resultados de búsqueda.

<span 
  class="clerk"
  
  data-api="search/predictive"
  data-limit="6"
  data-labels='["Instant Search"]'
      
  data-instant-search="INSERT_CSS_SELECTORS_HERE">
  
  <dl class="product-search-result-list">
    <dt>Productos que coinciden con <i>{{ query }}</i></dt>
    
    {% for product in products %}
      <dd class="product clerk-instant-search-key-selectable">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Comprar ahora</a>
      </dd>
    {% endfor %}
  </dl>
</span>

Lee más sobre la herramienta UI de Instant Search aquí.

Search Page #

Una parte clave de una excelente experiencia de búsqueda en e-commerce es obtener buenos resultados de búsqueda. Nuestra Search Page facilita y acelera la construcción de esta experiencia.

La Search Page te permite crear una página completa que muestre las mejores coincidencias para cualquier consulta.

<span 
  class="clerk"
  
  data-api="search/search"
  data-limit="40"
  data-labels='["Search Page"]'
  data-query="INSERT_QUERY_HERE"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">>
  
  <div class="product-search-result-list">
    <div>Productos que coinciden con <i>{{ query }}</i></div>
    
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Comprar ahora</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Mostrar más resultados
    		</div>
    {% endif %}
  </div>
</span>

Lee más sobre la herramienta UI Search Page aquí.

Category Page #

Una página de categoría bien estructurada es clave para el éxito de un eCommerce. Nuestra Category Page hace que esta experiencia sea rápida y fácil de construir. Esto te permite crear una página completa mostrando los mejores resultados para cualquier categoría.

<span 
  class="clerk"
  
  data-api="recommendations/category/popular"
  data-limit="40"
  data-labels='["Category Page Grid"]'
  data-category="INSERT_CATEGORY_ID"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">
  
  <div class="product-category-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Comprar ahora</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Mostrar más resultados
    		</div>
    {% endif %}
  </div>
</span>

Lee más sobre la herramienta UI Category Page aquí.

Clerk.js incluye soporte integrado para navegación facetada dinámica tanto para búsqueda como para categorías. Cualquier atributo de producto que envíes puede utilizarse como faceta.

Aquí tienes un ejemplo básico:

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
      
  data-template="@search-page" 
  data-query="shoes"
  
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE-TRANSLATION", "categories": "CATEGORIES-TRANSLATION", "brand": "BRAND-TRANSLATION"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Ver más"
  data-facets-searchbox-text="Buscar "
  data-facets-design="133995">
</span>

Lee más sobre la herramienta UI Facets aquí.

Exit Intent #

El popup de exit intent reacciona cuando un visitante intenta abandonar tu sitio moviendo el mouse cerca de la parte superior de la ventana del navegador. Se muestra y presenta productos interesantes, lo que puede convertir a un visitante que se va en un comprador.

Cualquier bloque Element se puede activar al detectar intención de salida agregando el atributo data-exit-intent="true" al fragmento.

<span
  class="clerk"
  
  data-api="recommendations/visitor/complementary"
  data-limit="20"
  data-labels='["Exit Intent / Popup"]'
  
  data-exit-intent="true">
</span>

Lee más sobre la herramienta UI Exit Intent aquí.

El UI Kit contiene una biblioteca sencilla de popups para crear popups amigables con cualquier contenido de manera fácil. Cualquier elemento HTML de tu web con la clase clerk-popup se mostrará como un popup.

<div id="my-popup" class="clerk-popup">¡Hola, mundo!</div>

<script type="text/javascript">
  var my_popup = Clerk('ui', 'popup', '#my-popup');
  
  // mostrar popup
  my_popup.show(); 
  /* o */ 
  Clerk('ui', 'popup', '#my-popup', 'show');
  
  // ocultar popup
  my_popup.hide(); 
  /* o */ 
  Clerk('ui', 'popup', '#my-popup', 'hide');
</script>

Lee más sobre la herramienta UI Popup aquí.

Chat #

Clerk.js expone una interfaz JavaScript para controlar el widget de Chat y reaccionar a eventos de conversación. Esto es útil cuando deseas activar el chat desde tu UI, pasarle a la IA datos contextuales sobre lo que hace el visitante o enganchar eventos desde el frontend.

La referencia completa de métodos y eventos está disponible en la documentación de Chat JS.

Abrir Chat desde un botón personalizado #

Si quieres activar Chat desde tu propio botón o elemento UI en lugar del lanzador por defecto, usa toggle:

<button onclick="Clerk('chat', 'toggle')">
  ¿Necesitas ayuda?
</button>

También puedes usar open y close independientemente para controlar explícitamente el estado.

Mostrar Chat solo en páginas específicas #

Por defecto, Chat es visible en todo el sitio. Para mostrarlo solo en ciertas páginas, desactívalo en tu configuración global y actívalo de forma selectiva:

// En la config global de Clerk.js — oculta Chat en todo el sitio
Clerk('config', { key: 'your-public-api-key' });
Clerk('chat', 'disable');

// Luego en las páginas donde quieras que sea visible
Clerk('chat', 'enable');

Pasar información del carrito o la página a la IA #

El método metadata envía contexto estructurado a Chat para que la IA pueda responder de forma más relevante. Llámalo cada vez que cambie el contexto del visitante: navegación entre páginas, añadir al carrito, actualizar preferencias, etc.

// En una página de producto
Clerk('chat', 'metadata', {
  current_page: {
    page_type: 'product',
    page_id: '12345'
  }
});

// Después de que un visitante agregue un producto a su carrito
Clerk('chat', 'metadata', {
  cart: {
    items: [
      { id: 101, name: 'Lightsaber', price: 99.95 },
      { id: 204, name: 'Force Gloves', price: 29.95 }
    ],
    total: 129.90
  }
});

La estructura del payload es flexible: incluye el contexto que sea útil para las conversaciones en esa página.

Ajustar el comportamiento de la IA según las acciones del visitante #

El método prompt_message envía una instrucción a nivel de sistema a la IA. El cliente nunca la verá, pero cambia cómo responde la IA en la conversación actual.

// Tras añadir al carrito — sugerir productos complementarios
Clerk('chat', 'prompt_message', 'The user just added a Lightsaber to their cart. Suggest complementary products like accessories or protective gear.');

// En la página de checkout — ayudar a finalizar la compra
Clerk('chat', 'prompt_message', 'The user is on the checkout page. Help them complete their order and answer any last-minute questions.');

Transferencia a un agente humano #

Cuando un visitante requiere soporte humano, el evento onSupport se dispara con un resumen de la conversación. Úsalo para abrir tu chat de soporte y pasar el contexto para que tu agente esté al tanto — sin que el visitante deba repetir nada.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onSupport: (e) => {
      // e.summary contiene un resumen en texto plano de la conversación hasta ahora
      const summary = e.summary || 'No conversation summary available.';

      // Ejemplo: abrir Intercom con el contexto pre-cargado
      if (window.Intercom) {
        Intercom('showNewMessage', 'Continuando desde AI Chat:\n\n' + summary);
      }

      // Ejemplo: abrir Zendesk con contexto pre-cargado
      if (window.zE) {
        zE('messenger', 'open');
        zE('messenger:set', 'conversationFields', [
          { id: 'clerk_chat_summary', value: summary }
        ]);
      }

      // Opcionalmente ocultar Clerk Chat tras la transferencia
      Clerk('chat', 'disable');
    }
  }
});

El evento onSupport solo se dispara cuando Contact Support está configurado en la configuración de Chat y el visitante solicita explícitamente hablar con un humano.

Reaccionando a eventos de Chat #

Usa hooks de eventos para integrar el comportamiento de Chat con el resto de tu frontend — por ejemplo, registrando mensajes, sincronizando estado o transfiriendo al agente humano.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onMessage: (e) => {
      // Se dispara en cada mensaje — el rol puede ser 'user', 'ai' o 'results'
      console.log(e.message.role, e.message.text);
    },
    onOpen: (e) => {
      // Se dispara cuando la ventana Chat se abre o cierra
      analytics.track('Chat toggled', { open: e.open });
    },
    onSupport: (e) => {
      // Se dispara cuando el visitante solicita asistencia humana
      // e contiene el resumen de la conversación
      openLiveChatWithSummary(e);
    }
  }
});

También puedes registrar hooks de eventos dinámicamente después de la configuración inicial:

Clerk('chat', 'on', 'message', function(e) {
  console.log('Nuevo mensaje:', e.message.text);
});

Lee más en la documentación de Chat JS.

Exclusión de productos #

Clerk.js tiene dos maneras diferentes de excluir productos, dependiendo de si quieres omitir IDs específicos o evitar mostrar productos duplicados entre diferentes sliders.

Excluir IDs específicos #

Simplemente añade el atributo data-exclude al fragmento. El contenido de data-exclude debe ser una lista de los IDs de productos que no quieres mostrar, por ejemplo, los productos en el carrito de compras o los productos restringidos para el usuario.

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654, 3244, 12352]">
</span>

Evitar duplicados #

Esto se hace agregando el atributo data-exclude-from al bloque Clerk donde quieras eliminar duplicados. El valor del atributo debe ser un selector CSS del otro fragmento o fragmentos de los que evitar duplicados.

En el ejemplo siguiente, .clerk-2 excluye cualquier producto que esté en .clerk-1, y .clerk-3 excluye cualquier producto que esté en .clerk-1 o .clerk-2.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk-1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1,.clerk-2"
  data-template="@clerk-banner-3">
</span>

Eventos #

Cuando creas configuraciones más personalizadas, a menudo necesitarás reaccionar o modificar los resultados de Clerk antes de mostrarlos. Aquí es donde son útiles los Eventos.

Los eventos te permiten configurar listeners que ejecutan código en momentos específicos antes, durante o después de que Clerk.js muestre sus resultados.

Un ejemplo común es cargar precios personalizados para un cliente autenticado en B2B. Un evento puede ejecutarse tras finalizar el renderizado de la API de Clerk, permitiendo buscar precios personalizados y añadirlos a los elementos de producto:

var customer_id = INSERT_CUSTOMER_ID;
Clerk("on", "rendered", function(content, data){
  for (i = 0; i < data.product_data.length; i++) {
      var product = data.product_data[i];
        var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
        let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
        price_container.innerText = custom_price;
    }
})

Lee más sobre los Eventos aquí.

SEO y Rendimiento #

Clerk.js ofrece experiencias de compra personalizadas sin ralentizar tu sitio ni afectar tu SEO. Utilizando renderizado en cliente y carga optimizada, equilibra velocidad, rendimiento y visibilidad en buscadores.

SEO y velocidad #

Es un error pensar que funcionalidades en JavaScript como Clerk.js perjudican el rendimiento o el SEO. Las herramientas automáticas suelen pasar por alto optimizaciones como el caché, la carga en paralelo y el manejo en servidor.

Beneficios de la integración Clerk.js #

El script Clerk.js (≈ 37-38 KB) se carga asíncronamente, permitiendo que tu sitio se muestre mientras Clerk se inicializa.
Los elementos de Clerk son renderizados en el cliente, por lo que tu HTML base sigue siendo almacenable en caché y los componentes dinámicos se inyectan solamente después.
Esto permite un caché de servidor eficiente y una carga no bloqueante de los recursos Clerk.js.

Impacto en el rendimiento #

La naturaleza ligera y asíncrona de Clerk.js normalmente tiene un impacto muy pequeño en el tiempo de carga de la página.
El impacto real suele venir de imágenes adicionales mostradas en las recomendaciones, no del script en sí. Para minimizarlo:
- Usa formatos eficientes como WebP.
- Redimensiona imágenes para que coincidan con el tamaño de visualización (ej: 400×400 px → 420×420 px máx).
Para evitar desplazamientos de diseño (CLS), reserva espacio para el contenido Clerk que se inyectará.

Ejemplo:

.clerk-slider-wrapper {
  min-height: 300px; /* ajusta según sea necesario */
  width: 100%;
}

Consideraciones SEO #

Entender cómo Clerk.js interactúa con los buscadores ayuda a asegurar que tu implementación apoye tanto la experiencia de usuario como la visibilidad en búsquedas.

Enlazado y rastreabilidad #

Clerk.js inyecta enlaces de recomendación dinámicamente en el cliente.
Estos enlaces pueden mejorar el enlazado interno conectando páginas relacionadas, si los buscadores los renderizan y siguen correctamente.
Como se inyectan por JS, debes verificar cómo los rastreadores interpretan estos enlaces.
Si se rastrean correctamente, pueden mejorar la rastreabilidad y permitir a los motores de búsqueda descubrir e indexar más páginas.

Distribución de PageRank #

Cuando los motores de búsqueda pueden rastrearlos, los enlaces de Clerk.js pueden ayudar a distribuir la autoridad (PageRank) en páginas clave.
Esto apoya una mayor visibilidad y posicionamiento de páginas de producto y categoría.

Beneficios observados #

Una integración correcta de Clerk.js puede correlacionarse con mejores estructuras de enlazado interno, lo cual puede suponer mejor visibilidad en resultados de búsqueda.
Los dashboards de Clerk.io proporcionan analytics sobre influencia en pedidos, subida en conversión y contribución a ingresos de Search, Recommendations, Email y Audience.

Mejores prácticas recomendadas #

Optimiza las imágenes (formato WebP, resolución correcta).
Reserva espacio para elementos dinámicos para evitar desplazamientos de diseño.
Monitorea métricas reales en vez de solo puntuaciones automáticas. Usa los dashboards de Clerk para evaluar el impacto en cada canal.

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

Clerk.js

Descripción general #

Fragmentos #

Inyección #

Configuración #

IDs de Visitantes #

Contexto de la Página #

Idioma #

Funciones de Diseño #

Formatters #

Globals #

Configuración #

Diseño #

Salida #

Seguimiento de Email #

Cómo funciona la asociación #

Renderizado Personalizado #

Depuración #

Métodos de activación #

Opciones de configuración #

Almacenamiento en sesión #

UI Kit #

Instant Search #

Search Page #

Category Page #

Facets #

Exit Intent #

Popup #

Chat #

Abrir Chat desde un botón personalizado #

Mostrar Chat solo en páginas específicas #

Pasar información del carrito o la página a la IA #

Ajustar el comportamiento de la IA según las acciones del visitante #

Transferencia a un agente humano #

Reaccionando a eventos de Chat #

Exclusión de productos #

Excluir IDs específicos #

Evitar duplicados #

Eventos #

SEO y Rendimiento #

SEO y velocidad #

Beneficios de la integración Clerk.js #

Impacto en el rendimiento #

Consideraciones SEO #

Enlazado y rastreabilidad #

Distribución de PageRank #

Beneficios observados #

Mejores prácticas recomendadas #