Opciones

General #

Website Elements facilita trabajar 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 quieras que se muestren productos. Esto se puede hacer usando la sección de Embedded Code o la sección de Injection.

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

Puedes revisar tus Elements existentes, y crear new elementos, haciendo clic en Search/Recommendations y luego Element en el menú lateral:

Cada bloque Element único se controla por sus propias configuraciones. Puedes elegir un nombre único para todos los bloques Element, el cual también funcionará como su etiqueta de tracking.

La página de Settings de cada bloque Element está dividida en four secciones a las que puedes acceder haciendo clic en Edit Element.

Nombra tu elemento #

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

Elige la lógica de productos #

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 cuál Design basar el Element. Si tienes una variable de 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 vinculan a un embedcode que permite renderizarlos 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 embed codes pueden necesitar variables como product IDs, category IDs o email, dependiendo de la lógica.

Usar embedded code #

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

Usar injection #

Injection es una función que te permite insertar bloques element en tu sitio web sin tener que agregar el embed code manualmente. Se realiza seleccionando Using injection:

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

Múltiples IDs #

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

Si el selector coincide con múltiples IDs de producto, Clerk recolecta todos los valores encontrados y los une en una sola lista.

Esto es útil en páginas como carritos donde cada línea de artículo contiene un elemento de ID de producto.

<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 IDs de producto.

Leer IDs desde el contexto de Clerk.js #

Cuando una lógica requiere un ID de producto, categoría o página, la función de inyección puede leerlo directamente desde la llamada Clerk('context', {...}) que utiliza Clerk.js para tracking.

En lugar de apuntar a un selector CSS o un atributo en la página, selecciona Clerk.js context desde el desplegable Read ID from. Clerk.io entonces usará el valor que se haya configurado 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 configura el contexto automáticamente – no se necesita configuración adicional en la página en sí.

Plataformas con contexto integrado en la extensión #

Las siguientes plataformas configuran Clerk.js context 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 de Clerk.js #

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

• Shopify
• Dandomain
• Lightspeed
• SmartWeb
• ScanNet
• BigCommerce

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

Headlines #

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

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

Cambia el texto en la caja de Headline y haz clic en Save.

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

Etiquetas de campo de texto dinámicas #

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

Estas etiquetas pueden usarse en cualquier campo de texto en diseños de Design Editor, y en cualquier parte en 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 Edit Design, inserta una etiqueta de headline con {{ headline }} en la HTML Section:

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

Puedes agregar tantos campos de texto como desees, Headline es solo 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 #

Usar esta función fuerza la carga de varias recomendaciones de Clerk.io una tras otra, en lugar de al mismo tiempo, añadiendo así un peso extra al tiempo de carga de la página.

Asegúrate de que la compensación en el tiempo de carga vale la pena para evitar los duplicados.

Clerk.js ofrece dos formas sencillas de prevenir duplicados entre distintos 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 quieres excluir los duplicados, ya sea eligiéndolo de la lista o especificando un CSS selector.

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

Esto se realiza usando 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 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 añade el atributo data-exclude a un embedcode existente.

Esto debe ser una lista de los IDs de producto que no quieres 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 cursor sobre el distintivo verde de Yes/No en la columna Seen in last 24h para abrir una visión rápida.

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

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

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