Opciones

General #

Elementos del sitio web facilita el trabajo con Elements para Recommendations y Elements para Search results.

Los Designs se almacenan en Clerk.io, y solo necesitas insertar un código embed pequeño en la página donde quieras mostrar productos. Esto se puede hacer usando la sección de Embedded Code o la sección de Injection.

Cualquier número de bloques Element pueden basarse en un solo Design, o puedes crear Designs separados para cada Element.

Puedes revisar tus Elements existentes y crear nuevos haciendo clic en Search/Recommendations y luego en Element 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, que también funcionará como su etiqueta de tracking.

La página de Settings de cada bloque 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 tracking Labels 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 diseño #

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

Insertar en el sitio web #

Los bloques Element se adjuntan a un embedcode que les permite renderizarse en todas las páginas donde hayas insertado Clerk.js. Puedes simplemente insertar el embedcode donde quieras que se muestre este Element o utilizar nuestra función de inyección.

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

Usar código embed #

El código embed es un pequeño fragmento de código que puedes insertar en tu sitio web. Se puede encontrar seleccionando Using embedded code:

Usar inyección #

La inyección es una función que te permite insertar bloques Element en tu sitio web sin agregar el código embed manualmente. Se realiza seleccionando Using injection:

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

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 une en una lista.

Esto es útil en páginas como el carrito donde cada línea de producto contiene un elemento 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 ID.

Headlines #

Administrar titulares es fácil con la configuración estándar en Element.

En la página de Edit Element, haz clic en Select Design para ver el campo de entrada Headline:

Cambia el texto en la casilla Headline y haz clic en Save.

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

Etiquetas de campo de texto dinámico #

Nuestros diseños estándar usan etiquetas para definir diferentes titulares para cada Element.

Estas etiquetas pueden emplearse en cualquier campo de texto en diseños de Design Editor, y en cualquier lugar de code designs.

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

Comienza yendo a Designs y haz clic en Edit Design para el que quieras cambiar:

En la página de Edit Design, inserta una etiqueta de titular con {{ headline }} en la HTML Section:

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

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

Todo lo que escribas en 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 #

El uso de esta función fuerza la carga de múltiples Clerk.io recommendations una tras otra, en lugar de al mismo tiempo, lo que añade peso adicional al tiempo de carga de la página.

Asegúrate que el balance en el tiempo de carga vale la pena para evitar duplicados.

Clerk.js proporciona dos formas sencillas de evitar duplicados entre múltiples elementos recommendations 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 quieras excluir duplicados, ya sea eligiéndolo de la lista o especificando un selector CSS.

La otra opción es añadir el atributo data-exclude-from en el bloque Clerk del que quieras eliminar duplicados. El value del atributo debe ser un CSS selector del otro bloque para evitar duplicados.

En el siguiente ejemplo, 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 (útil 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 la primera cantidad de productos que deseas excluir).

Aquí está el mismo ejemplo de arriba, pero donde el ID de exclusión solo considera 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 de los product IDs que no quieres que se muestren en el bloque.

Por ejemplo:

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

Información de vistas de página #

En las listas bajo Search > Elements y Recommendations > Elements, pasa el cursor sobre la insignia verde Yes/No en la columna Seen in last 24h para abrir un resumen rápido.

El popup muestra los últimos 7 días:

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

Utiliza esto para verificar la ubicación e identificar qué páginas generan más exposición para cada elemento. Si un elemento no tiene vistas recientes, la insignia muestra No y el popup estará vacío.