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 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 Element puede estar basada en un solo Design, o puedes crear Diseños separados para cada Element.
Puedes consultar 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 por sus propios ajustes. 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 está dividida en cuatro secciones a las que puedes acceder haciendo clic en Edit Element.
Pon nombre a tu elemento #
Controla el Name y las Labels de tracking para el bloque Element.
Elegir 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.
Seleccionar diseño #
Esto te permite elegir cuántos productos mostrar, y en qué Design basar el Element. Si tienes una variable de title/headline en tu diseño, también puedes añadir aquí los títulos que se mostrarán para el Element.
Insertar en el sitio web #
Los bloques Element se adjuntan a un embedcode que permite que se rendericen en todas las páginas donde hayas insertado Clerk.js. Puedes simplemente insertar el embedcode donde quieras que se muestre este Element o usar nuestra función de inyección.
Ten en cuenta que los códigos de inserción pueden necesitar variables como product IDs, category IDs o email, dependiendo de la lógica.
Usando embedded code #
El embedded code es un pequeño fragmento de código que puedes insertar en tu sitio web. Se puede encontrar seleccionando Using embedded code:
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. Se realiza seleccionando Using injection:
A continuación se describe las diferentes opciones de inyección:
| Opción | Descripción |
|---|---|
| Unique CSS selector to identify it | Inserta un selector CSS único que identificará el bloque Element en la página. Elige también dónde debe inyectarse: After, Before, Inside o Replace. |
| Exclude Duplicates | Elige si deseas excluir productos que ya se muestran en otros bloques 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 email específica, puedes insertar el CSS selector de la categoría, producto o email ID aquí. |
| Category, Product, Email attribute | Si la lógica está configurada para mostrar productos de una categoría específica, producto o para una dirección de email específica, puedes insertar aquí el attribute que contiene 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 dirección de 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 quieres extraer el ID, deberías insertar "category-" en este campo. |
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 ver el campo de entrada Headline:
Cambia el texto en la caja Headline y haz clic en Save.
El cambio se mostrará inmediatamente después de que recargues tu tienda online.
Etiquetas de campo de texto dinámico #
Nuestros diseños estándar usan etiquetas para establecer distintos titulares para cada Element.
Estas etiquetas pueden usarse en cualquier campo de texto en los diseños de Design Editor, y en cualquier lugar de los 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 del que quieras cambiar:
En la página 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 tu pestaña de Element.
Puedes añadir tantos campos de texto como quieras, Headline es solo un ejemplo.
Cualquier cosa que escribas en la HTML Section con la sintaxis {{ variable }} podrá ser usada como un campo de entrada desde Element.
Estas etiquetas también pueden usarse en cualquier campo de texto en un diseño de Design Editor
Eliminando 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 extra al tiempo de carga de la página.
Asegúrate de que el intercambio en tiempo de carga vale la pena para evitar duplicados.
Clerk.js ofrece dos formas simples de evitar duplicados entre varios elementos de recommendations en la misma página.
Una es usar la opción 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 añadiendo el atributo data-exclude-from al bloque Clerk del que quieres 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 .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 opción inteligente si tienes un elemento con 20 productos pero solo cuatro son visibles al mismo tiempo).
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 afecta 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>
Excluyendo productos específicos #
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 que se muestren 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, sitúa el cursor sobre el distintivo verde Yes/No en la columna Seen in last 24h para abrir una vista rápida.
El popup muestra de los últimos 7 días:
- 10 páginas principales donde apareció el elemento
- Número 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 mayor exposición para cada elemento. Si un elemento no tiene vistas recientes, el distintivo 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.