Opciones
General #
Website Elements facilita el trabajo con Elements para Recommendations y Elements para resultados de Search.
Los Designs se almacenan en Clerk.io, y solo necesitas insertar un pequeño código de inserción en la página donde quieres 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 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 está dividida en cuatro secciones a las que puedes acceder haciendo clic en Edit Element.
Nombra tu elemento #
Controla el Name y las etiquetas de seguimiento Labels para el bloque Element.
Elige la lógica del producto #
Define qué tipo de productos deben mostrarse 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 design #
Esto te permite elegir cuántos productos mostrar y en qué Design basar el Element. Si tienes una variable de title/headline en tu design, puedes agregar los títulos que se mostrarán para el Element aquí también.
Insertar en el sitio web #
Los bloques Element están adheridos a un embedcode que permite renderizarlos 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 injection.
Ten en cuenta que los códigos de inserción pueden requerir variables como product IDs, category IDs o email, dependiendo de la lógica.
Usando código de inserción #
El embed 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 #
La injection es una función que te permite insertar bloques element en tu sitio web sin tener que añadir manualmente el embed code. Se realiza seleccionando Using injection:
A continuación, una descripción de las diferentes opciones de injection:
| Opción | Descripción |
|---|---|
| Selector CSS único para identificarlo | 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 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 específica, producto o dirección de email, puedes insertar aquí el selector CSS de la categoría, producto o ID de email. |
| Category, Product, Email attribute | Si la lógica está configurada para mostrar productos de una categoría específica, producto o para un email específico, puedes insertar el attribute que contiene el valor de la categoría, producto o email aquí. Por ejemplo, si el atributo es value-category="category-123", insertarías "value-category" en este campo. |
| Extraer Category ID, Product ID, Email ID del attribute eliminando la cadena | Si el atributo que contiene el valor de la categoría, producto o email forma parte de una cadena más larga, puedes insertar aquí la parte que se eliminará. Por ejemplo, si el atributo es value="category-123" y quieres extraer el ID, insertarías "category-" en este campo. |
Headlines #
La gestión de headlines 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 caja 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 usan etiquetas para establecer diferentes headlines para cada Element.
Estas etiquetas se pueden usar en cualquier campo de texto en los diseños de Design Editor, y también en cualquier parte 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 modificar:
En la página de 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 }} estará disponible como campo de entrada desde Element.
Estas etiquetas también pueden utilizarse 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 un peso extra al tiempo de carga de la página.
Asegúrate de que la compensación en el tiempo de carga merece la pena para evitar los duplicados.
Clerk.js ofrece dos formas sencillas de evitar duplicados entre múltiples elements de recommendations en la misma página.
Una es usar la opción Exclude Duplicates en la sección Inject Element, seleccionando el clerk element 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 en el bloque clerk del que deseas eliminar los duplicados. El value del atributo debe ser un selector CSS para el otro bloque del que 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 primeros n productos (una acció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 quieres excluir).
Aquí tienes el mismo ejemplo de arriba, pero donde el ID de 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>
Excluir productos específicos #
Para evitar mostrar ciertos productos, simplemente añade el atributo data-exclude a un embedcode existente.
Esta debe ser una lista de los IDs de producto 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 cursor sobre la insignia 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
- Conteo individual de vistas por página
- Total de vistas en 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.
Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.