Elements

Opciones

Agrega elementos de Clerk.io a tu sitio web fácilmente.

Add Facet and insertion controls within Insert into website

General #

Website Elements facilita el trabajo con Elements para Recommendations y Elements para Search results.

Los Designs se almacenan en Clerk.io, y solo necesitas insertar un small embed code en la página donde deseas mostrar productos. Esto se puede hacer usando la sección Embedded Code o la sección Injection.

Cualquier cantidad de bloques Element puede basarse en un single Design o puedes crear Designs separados para cada Element.

Para ver o crear Elements, abre Search > Elements o Recommendations > Elements en el menú lateral.

Cada bloque Element único se controla mediante su propia configuración. Puedes elegir un nombre único para todos los bloques Element, el cual también funcionará como su etiqueta de tracking.

Abre un Element para editar su nombre, lógica, diseño y configuración de inserción.

Asigna un nombre a tu elemento #

Controla el Name y las etiquetas de Labels de tracking para el bloque Element.

Elige la lógica de producto #

Define qué tipo de productos deben mostrarse en el Element.

También puedes controlar si se deben aplicar Filters, por ejemplo, si solo quieres mostrar productos por encima o por debajo de cierto precio, o de una marca específica.

Selecciona el diseño #

Esto te permite elegir cuántos productos mostrar y sobre qué Design basar el Element. Si tienes una variable title/headline en tu design, también puedes añadir los títulos que se mostrarán en el Element aquí.

Añadir facetas #

En la configuración de facets del Element, haz clic en Add Facet para seleccionar un atributo. El atributo debe estar disponible para filtrar en la tienda. Después de añadir facets, utiliza sus controles de puntos para cambiar el orden.

Orden de las facetas #

Cuando un Element tiene una lista de facets en su diseño o configuración de inserción, puedes reordenar los atributos usando sus controles de puntos. Arrastra una fila a la posición deseada y suéltala en el recuadro punteado.

Para usar el teclado, enfoca una fila de faceta y presiona Alt + ↑ o Alt + ↓. Los lectores de pantalla anuncian el movimiento. Consulta Search facets o category page facets para más contexto.

Insert into website #

Elige Using injection o Using embedded code dentro de Insert into website. El modo de visualización y los controles que dependen de él permanecen en esta sección; cambiar el método de inserción actualiza los controles que se muestran aquí.

Los bloques Element están adjuntos a un embedcode que les permite renderizarse en todas las páginas donde se ha insertado Clerk.js. Puedes simplemente insertar el embedcode donde desees que este Element se muestre o usar nuestra función de injection.

Ten en cuenta que los embed codes podrían necesitar variables como product IDs, category IDs o email, dependiendo de la lógica.

Usando embedded code #

El embed code es un pequeño fragmento de código que puedes insertar en tu sitio web. Selecciona Using embedded code en la configuración de Insert into website del Element para copiarlo.

Usando injection #

Injection es una función que te permite insertar bloques Element en tu sitio web sin tener que añadir el embed code manualmente. Selecciona Using injection en la configuración de Insert into website del Element para configurarlo.

Segmentación por URL #

Utiliza la segmentación por URL para controlar exactamente dónde aparece un Element. Añade tantas URLs como necesites y luego elige cómo debe coincidir la ruta de la página con ellas:

Opción	Descripción
Includes one of	Muestra el Element cuando la URL de la página contiene cualquiera de los valores listados.
Is	Muestra el Element solo en la ruta exacta.
Is not	Muestra el Element en todas las rutas excepto en la ruta exacta.
Does not include one of	Oculta el Element cuando la URL de la página contiene cualquiera de los valores listados.

A continuación se describe las distintas opciones de injection:

Opción	Descripción
Target CSS selector and position	Inserta un selector CSS único que identifique el destino en la página. Elige dónde debe inyectarse el Element: After, Before, Inside first, Inside last, o Replace.
Results position	Al agregar Live Search mediante Injection, elige cómo se alinean los resultados en relación con el input de búsqueda: Left, Center, Right, Below, o Off.
Exclude Duplicates	Elige si deseas excluir productos que ya se muestran en otros bloques clerk element en la misma página.
Category ID, Product ID, Email CSS Selector	Si la lógica está configurada para mostrar productos de una categoría, producto o dirección de email específica, puedes insertar aquí el CSS selector del category, product o email ID.
Category, Product, Email attribute	Si la lógica está configurada para mostrar productos de una categoría, producto o email específica, puedes insertar aquí el attribute que contiene el valor de category, product o email. Por ejemplo, si el attribute es `value-category="category-123"`, deberías insertar `"value-category"` en este campo.
Extract Category ID, Product ID, Email ID from attribute removing the string	Si el atributo que contiene el valor de category, product o email es parte de una cadena más larga, puedes insertar aquí la parte que deseas eliminar. Por ejemplo, si el atributo es `value="category-123"` y deseas extraer el ID, insertarías `"category-"` en este campo.

IDs múltiples #

Para Product ID CSS selector, puedes apuntar a varios elementos con el mismo selector.

Si el selector coincide con varios product IDs, Clerk recoge todos los valores coincidentes y los fusiona en una sola lista.

Esto es útil en páginas como el carrito, donde cada línea contiene un elemento de product ID.

<input class="product-id" value="123">
<input class="product-id" value="456">
<input class="product-id" value="789">

Con el selector .product-id, Clerk lee todos los valores anteriores como una lista de product ID.

Lectura de IDs desde Clerk.js context #

Cuando una lógica requiere un product, category o page ID, la función de injection puede leerlo directamente desde la llamada Clerk('context', {...}) que Clerk.js utiliza para el tracking.

En lugar de señalar un selector CSS o attribute en la página, selecciona Clerk.js context en el desplegable Read ID from. Clerk.io entonces usará cualquier valor que se haya establecido para ese tipo de ID en el contexto de la página actual.

Esta es la opción más simple cuando la plataforma ya establece el contexto automáticamente — no hace falta configuración adicional en la página.

En aplicaciones de una sola página y tiendas headless, mantén el Clerk.js context actualizado a medida que el visitante navega. Los bloques renderizados cuyo ID provienen del contexto se actualizan automáticamente cuando el valor relevante cambia, sin recargar la página completa.

Por ejemplo, un bloque de recomendaciones de categoría puede actualizarse cuando el contexto de category cambia. Este comportamiento está habilitado por defecto y funciona independientemente de la observación del DOM. Los bloques cuyos IDs provienen de elementos de la página, y los popups, no se recargan de esta manera.

Consulta Context Reloads para ejemplos de código, claves de contexto soportadas y cómo desactivar la recarga automática.

Plataformas con contexto integrado en la extensión #

Las siguientes plataformas configuran automáticamente el Clerk.js context como parte de su extensión o plugin oficial de Clerk.io:

Magento 1
Magento 2
WooCommerce
PrestaShop
Shopware 6

Plataformas con contexto en el script manual de Clerk.js #

Las siguientes plataformas incluyen la llamada Clerk('context', {...}) en su script estándar de Clerk.js para tracking, que se añade manualmente durante la configuración:

Shopify
Dandomain
Lightspeed
SmartWeb
ScanNet
BigCommerce

Si tu plataforma no aparece arriba, aún puedes usar esta función añadiendo la llamada Clerk('context', {...}) manualmente a tu script de tracking de Clerk.js. Consulta la guía de Clerk.js para más detalles.

Going live #

Usa el modo de vista previa para probar un Element en tu tienda antes de hacerlo visible a tus visitantes. Cuando esté listo, cámbialo a activo desde la lista de Elements en my.clerk.io.

Ver vista previa #

Un Element en preview mode está oculto para los visitantes habituales. Para verlo, añade ?clerk_content_mode=preview a la URL de la página donde está instalado y luego abre esa URL. Por ejemplo:

https://example.com/?clerk_content_mode=preview

Si la URL ya contiene un ?, añade &clerk_content_mode=preview en su lugar. Abrir una URL de vista previa te permite ver Elements en preview; esto no los hace visibles para otros visitantes.

Cambiar visibilidad #

En my.clerk.io, abre Search > Elements o Recommendations > Elements.
Localiza el Element que deseas activar. En su columna Visible To, haz clic en Preview para cambiarlo a All visitors. El Element ahora está activo y se puede ver sin el parámetro de vista previa en la URL.
Para devolverlo a modo de preview, haz clic en All visitors en la misma columna. Cambia de nuevo a Preview y solo es visible cuando usas la URL de vista previa.

La visibilidad se establece por separado para cada Element, así que repite esto para cada Element que desees activar.

Después de publicar, abre tu tienda sin clerk_content_mode=preview en la URL y verifica que cada Element aparezca en sus páginas asignadas.

Headlines #

Gestionar headlines es sencillo con la configuración estándar en Element.

En la página Edit Element, haz clic en Select Design para encontrar el campo Headline.

Cambia el texto en el cuadro Headline y haz clic en Save.

El cambio se mostrará inmediatamente después de actualizar tu tienda.

Etiquetas de campo de texto dinámico #

Nuestros diseños estándar usan etiquetas para establecer diferentes headlines en cada Element.

Estas etiquetas pueden usarse en cualquier campo de texto en los diseños Design Editor y en cualquier parte de los code designs.

Las etiquetas tienen la sintaxis {{ variable }} y pueden tener cualquier nombre que elijas.

Abre Designs y haz clic en Edit Design para el diseño que deseas cambiar.

En la página Edit Design, inserta {{ headline }} en la sección HTML.

Haz clic en Save. Luego regresa al Element y configura el campo Headline.

Puedes añadir tantos campos de texto como desees, Headline es solo un ejemplo.

Todo lo que escribas en la HTML Section con la sintaxis {{ variable }} será utilizable como campo de entrada desde Element.

Estas etiquetas también pueden usarse en cualquier campo de texto en un diseño de Design Editor.

Removing duplicated products #

Usar esta función obliga a cargar múltiples Clerk.io recommendations una tras otra, en vez de al mismo tiempo, lo que añade un peso extra al tiempo de carga de la página.
Asegúrate de que el aumento en el tiempo de carga compensa la eliminación de duplicados.

Clerk.js ofrece dos formas sencillas de evitar duplicados en varios elementos de recommendations en la misma página.

Una opción es usar Exclude Duplicates en la sección Inject Element, seleccionando el elemento Clerk del que deseas excluir duplicados, ya sea eligiéndolo de la lista o especificando un selector CSS.

La otra opción es agregar el atributo data-exclude-from al bloque Clerk del que desees eliminar duplicados. El value del atributo debe ser un CSS selector del otro bloque del que evitar los duplicados.

En el ejemplo siguiente, el elemento .clerk2 excluye cualquier producto que esté en el elemento .clerk1, y el elemento .clerk3 excluye cualquier producto que esté en los elementos .clerk1 o .clerk2.

<span class="clerk clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  data-exclude-from=".clerk1"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  data-exclude-from=".clerk1,.clerk2"
  data-template="@clerk-banner-3">
</span>

También puedes limitar la exclusión para mostrar solo los primeros n productos (una buena idea si tienes un elemento con 20 productos pero solo cuatro son visibles a la vez).

Esto se hace con la opción :limit(n) (donde n es el primer número de productos que deseas excluir).

Aquí tienes el mismo ejemplo anterior, pero donde la ID de exclusión sólo tiene en cuenta los primeros cinco productos.

<span class="clerk clerk1"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  id="clerk2"
  data-exclude-from=".clerk1:limit(5)"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  id="clerk3"
  data-exclude-from=".clerk1:limit(5),.clerk2:limit(5)"
  data-template="@clerk-banner-3">
</span>

Excluding specific products #

Para evitar mostrar ciertos productos, simplemente añade el atributo data-exclude a un embedcode existente.

Debe ser una lista de los product IDs que no deseas mostrar en el bloque.

Por ejemplo:

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

Page views insight #

En las listas bajo Search > Elements y Recommendations > Elements, pasa el ratón sobre la insignia verde Yes/No en la columna Seen in last 24h para abrir una vista rápida.

La ventana emergente muestra los últimos 7 días:

Top 10 páginas donde apareció el elemento
Conteo de vistas individuales por página
Total de vistas en todas las páginas
Enlaces directos a las páginas

Usa esto para verificar la colocación e identificar qué páginas generan la mayor exposición para cada elemento. Si un elemento no tiene vistas recientes, la insignia muestra No y la ventana emergente estará vacía.

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