Opciones
General #
Elementos del sitio web facilita el trabajo con Sliders para Recommendations y Elements para los resultados de Search.
Los Designs se almacenan en Clerk.io, y solo tienes que insertar un pequeño código de inserción en la página donde deseas que se muestren los productos. Esto se puede hacer utilizando la sección Embedded Code o la sección Injection.
Cualquier cantidad de bloques de Elementos puede basarse en un solo Design, o puedes crear distintos Designs para cada Elemento.
Puedes consultar tus Elements existentes y crear nuevos haciendo clic en Search/Recommendations y luego en Element en el menú lateral:
Cada bloque de Elemento único se controla mediante su propia configuración. Puedes elegir un nombre único para todos los bloques de Elemento, que también funcionará como su etiqueta de tracking.
La página de Settings de cada bloque de Elemento está dividida en cuatro secciones a las que puedes acceder haciendo clic en Edit Element.
Page views insight #
En las listas bajo Search > Elements y Recommendations > Sliders, pasa el cursor sobre la insignia verde de Yes/No en la columna Seen in last 24h para abrir una vista rápida.
El popup muestra 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 mayor exposición para cada elemento. Si un elemento no tiene vistas recientes, la insignia muestra No y el popup estará vacío.
Name your element #
Controla el Name y las etiquetas de seguimiento Labels para el bloque de Elemento.
Choose product logic #
Define qué tipo de productos deben mostrarse en el Elemento.
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.
Select design #
Esto te permite elegir cuántos productos mostrar y en qué Design basar el Elemento. Si tienes una variable title/headline en tu diseño, puedes agregar los títulos que se mostrarán para el Element aquí también.
Insert into website #
Los bloques de Element están enlazados a un embedcode que permite que se muestren 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 embed codes pueden necesitar variables como product IDs, category IDs o email, dependiendo de la lógica.
Using embedded code #
El embed code es un pequeño trozo de código que puedes insertar en tu sitio web. Se puede encontrar seleccionando Using embedded code:
Using injection #
La inyección es una función que te permite insertar bloques de elementos en tu sitio web sin tener que agregar el embed code manualmente. Se realiza seleccionando Using injection:
A continuación se describe cada opción de inyección:
| Opción | Descripción |
|---|---|
| Selector CSS único para identificarlo | Inserta un selector CSS único que identificará el bloque de elemento en la página. Elige también dónde se debe inyectar; Después, Antes, Dentro o Reemplazar. |
| Exclude Duplicates | Elige si quieres excluir productos que ya se muestran en otros bloques de elemento 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 selector CSS de la categoría, producto o ID de email aquí. |
| Category, Product, Email attribute | Si la lógica está configurada para mostrar productos de una categoría específica, un producto o para una dirección de email específica, puedes insertar el atributo que contiene el valor de categoría, producto o email aquí. 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 categoría, producto o dirección de email es parte de una cadena más larga, puedes insertar la parte a eliminar aquí. Por ejemplo, si el atributo es value="category-123" y quieres extraer solo la ID, deberías insertar "category-" en este campo. |
Headlines #
Gestionar los 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 de Headline y haz clic en Save.
El cambio se mostrará inmediatamente después de actualizar tu tienda online.
Dynamic text field tags #
Nuestros diseños estándar utilizan etiquetas para establecer diferentes titulares para cada Element.
Estas etiquetas se pueden usar en cualquier campo de texto en los diseños del Design Editor, y en cualquier parte de los code designs.
Las etiquetas tienen la sintaxis {{ variable }} y pueden llevar cualquier nombre que elijas.
Comienza yendo a Designs y haz clic en Edit Design para el que deseas 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 Element.
Puedes añadir tantos campos de texto como quieras, Headline es solo un ejemplo.
Todo lo que escribas en la HTML Section con la sintaxis {{ variable }} será utilizable 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
Removing duplicated products #
El uso de esta función fuerza la carga de varias recomendaciones de Clerk.io una tras otra, en vez de al mismo tiempo, lo que añade un peso adicional al tiempo de carga de la página.
Asegúrate de que el beneficio de evitar duplicados compensa el aumento en el tiempo de carga.
Clerk.js proporciona dos formas simples de evitar duplicados entre múltiples sliders de recomendaciones en la misma página.
Una es utilizar 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ñadir el atributo data-exclude-from en el bloque Clerk del que quieres eliminar los duplicados. El valor del atributo debe ser un selector CSS para el otro bloque para evitar duplicados.
En el ejemplo siguiente, el slider .clerk2 excluye cualquier producto que está en el slider .clerk1, y el slider .clerk3 excluye cualquier producto que está en los sliders .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 a solo mostrar los primeros n productos (una acción útil si tienes un slider con 20 productos pero solo cuatro 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í el mismo ejemplo anterior, pero donde la 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>
Excluding specific products #
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 los productos que no quieres mostrar en el bloque.
Por ejemplo:
<span class="clerk"
data-template="@clerk-complementary"
data-exclude="[45654]">
</span>
Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.