Elements

Opciones

Agrega elementos de Clerk.io a tu sitio web con facilidad.

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 pequeño código de inserción en la página donde deseas mostrar los productos. Esto se puede hacer usando la sección Embedded Code o la sección Injection.

Cualquier cantidad de bloques de Element pueden basarse en un solo 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 de Element único se controla mediante su propia configuración. Puedes elegir un nombre único para todos los bloques de Element, que también funcionará como su etiqueta de tracking.

La página de Settings de cada bloque de Element se divide en cuatro secciones a las que puedes acceder haciendo clic en Edit Element.

Nombra tu elemento #

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

Elige la lógica de producto #

Define qué tipo de productos se deben mostrar en el Element.

También puedes controlar si se deben aplicar Filters, por ejemplo, si solo deseas 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 diseño, aquí también puedes añadir los títulos a mostrar para el Element.

Orden de facetas #

Cuando un Element tiene una lista de facetas 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 cuadro punteado.

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

Insertar en el sitio web #

Los bloques de Element se asocian a un embedcode que permite que se rendericen en todas las páginas donde hayas insertado Clerk.js. Puedes simplemente insertar el embedcode donde desees que se muestre este Element o usar nuestra función de inyección.

Ten en cuenta que los códigos de inserción pueden requerir variables como product IDs, category IDs o email, según la lógica.

Usar código incrustado #

El código de inserción 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.

Usar inyección #

La inyección es una función que te permite insertar bloques de elemento en tu sitio web sin tener que añadir manualmente el código de inserción. Selecciona Using injection en la configuración de Insert into website del Element para configurarla.

Segmentación por URL #

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

Option	Descripción
Includes one of	Muestra el Element si 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 la exacta.
Does not include one of	Oculta el Element si la URL de la página contiene alguno de los valores listados.

A continuación se describe las diferentes opciones de inyección:

Option	Descripción
Target CSS selector and position	Inserta un selector CSS único que identifique el destino en la página. Elige dónde se debe inyectar el Element: After, Before, Inside first, Inside last, o Replace.
Results position	Al añadir Live Search mediante Injection, elige cómo se alinean los resultados respecto al campo de búsqueda: Left, Center, Right, Below, o Off.
Exclude Duplicates	Elige si deseas excluir productos que ya se muestran en otros bloques de element de clerk 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 correo específico, puedes insertar aquí el CSS selector de la categoría, producto o email ID.
Category, Product, Email attribute	Si la lógica está configurada para mostrar productos de una categoría, producto o para una dirección de correo específica, puedes insertar aquí el attribute que contenga el valor de la categoría, producto o email. Por ejemplo, si el atributo 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 la categoría, producto o email es parte de una cadena más larga, puedes insertar aquí la parte a eliminar. Por ejemplo, si el atributo es `value="category-123"` y deseas extraer la ID, insertarías `"category-"` en este campo.

IDs múltiples #

Para Product ID CSS selector, puedes seleccionar múltiples elementos con el mismo selector.

Si el selector coincide con varios product IDs, Clerk recopila todos los valores encontrados y los combina en una sola lista.

Esto es útil en páginas como carritos donde cada línea de producto 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 sola lista de product IDs.

Leer IDs desde Clerk.js context #

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

En lugar de apuntar a un CSS selector o atributo de la página, selecciona Clerk.js context en el desplegable Read ID from. Clerk.io usará el valor configurado para ese tipo de ID en el contexto en la página actual.

Esta es la opción más sencilla cuando la plataforma ya establece el contexto automáticamente — no se necesita más configuración en la propia página.

Plataformas con contexto integrado en la extensión #

Las siguientes plataformas establecen el contexto Clerk.js automáticamente 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 Clerk.js #

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

Shopify
Dandomain
Lightspeed
SmartWeb
ScanNet
BigCommerce

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

Ir en vivo #

Utiliza el modo de vista previa para probar un Element en tu tienda online antes de hacerlo visible a tus visitantes. Cuando esté listo, cámbialo a vivo 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 los Elements en preview; no los hace visibles para otros visitantes.

Cambiar visibilidad #

En my.clerk.io, abre Search > Elements o Recommendations > Elements.
Busca el Element que deseas poner en vivo. En su columna Visible To, haz clic en Preview para cambiarlo a All visitors. El Element ya estará en vivo y será visible sin el parámetro de vista previa en la URL.
Para volver a ponerlo en modo de vista previa, haz clic en All visitors en la misma columna. Se volverá a Preview y solo será visible usando el parámetro de vista previa en la URL.

La visibilidad se configura por separado para cada Element, así que repite este proceso para cada Element que quieras hacer público.

Después de ponerlo en vivo, abre tu tienda online sin clerk_content_mode=preview en la URL y verifica que cada Element aparezca en las páginas correctas.

Headlines #

Gestionar titulares es fácil 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 que actualices tu tienda online.

Etiquetas de campo de texto dinámicas #

Nuestros diseños estándar utilizan etiquetas para establecer diferentes titulares para cada Element.

Estas etiquetas pueden usarse en cualquier campo de texto en diseños de Design Editor y en cualquier lugar en 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 quieres modificar.

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

Haz clic en Save & Close y podrás escribir un titular desde tu pestaña Element.

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

Cualquier cosa 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

Eliminar productos duplicados #

Usar esta función fuerza la carga de varias Clerk.io recommendations una tras otra, en lugar de al mismo tiempo, lo que añade peso extra al tiempo de carga de la página.
Asegúrate de que la compensación en tiempo de carga merece la pena para evitar los duplicados.

Clerk.js ofrece dos formas sencillas de evitar duplicados entre múltiples elementos de recomendaciones en la misma página.

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

La otra opción es agregando el atributo data-exclude-from en el bloque de Clerk del que deseas eliminar los duplicados. El value del atributo debe ser un CSS selector para el otro bloque del que desees evitar 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 n primeros productos (una decisión inteligente si tienes un elemento con 20 productos pero solo cuatro son visibles a la vez).

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

Aquí está el mismo ejemplo anterior, pero donde la exclusión solo se aplica a 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>

Excluir productos específicos #

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

Esto debe ser una lista 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 el distintivo verde Yes/No en la columna Seen in last 24h para abrir una vista rápida.

El popup muestra para los últimos 7 días:

Las 10 páginas principales donde apareció el elemento
Recuento individual de vistas por página
Vistas totales en todas las páginas
Enlaces directos a las páginas

Utiliza 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 etiqueta mostrará No y el popup estará vacío.

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