Opciones
General #
Elementos del sitio web 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 mostrar productos. Esto se puede hacer utilizando la sección Embedded Code o la sección Injection.
Cualquier cantidad de bloques Element puede basarse en un single Design, o puedes crear Designs separados para cada Element.
Puedes consultar tus Elements existentes y crear new haciendo clic en Search/Recommendations y luego en Element en el menú lateral:
Cada bloque Element único está controlado 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 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 etiquetas de Labels de tracking 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 el diseño #
Te permite elegir cuántos productos mostrar y en qué Design basar el Element. Si tienes una variable title/headline en tu diseño, puedes añadir los títulos a mostrar para ese Element aquí también.
Insertar en el sitio web #
Los bloques Element están vinculados a un embedcode que permite que se representen en todas las páginas donde se haya insertado Clerk.js. Puedes simplemente insertar el embedcode donde quieras mostrar este Element o utilizar nuestra función de inyección.
Toma en cuenta que los embed codes pueden necesitar variables como product IDs, category IDs o email, dependiendo de la lógica.
Usando el código embebido #
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 la inyección #
La inyección es una función que te permite insertar bloques element en tu sitio web sin tener que agregar manualmente el embed code. Esto se realiza seleccionando Using injection:
Segmentación por URL #
Usa la segmentación por URL para controlar exactamente dónde aparece un Element. Añade tantas URLs como necesites y luego elige cómo debe coincidir la ruta de la página:
| Opción | Descripción |
|---|---|
| Includes one of | Muestra el Element cuando la URL de la página contiene cualquiera de los valores listados. |
| Is | Muestra el Element solo en la ruta exacta. |
| Is not | Muestra el Element en todas las rutas excepto la exacta. |
| Does not include one of | Oculta el Element cuando la URL de la página contiene cualquiera de los valores listados. |
A continuación, una descripción de las distintas opciones de inyección:
| Opción | Descripción |
|---|---|
| Target CSS selector and position | Inserta un selector CSS único que identifique el objetivo en la página. Elige dónde debe inyectarse el Element: After, Before, Inside first, Inside last, o Replace. |
| Results position | Al agregar Live Search a través de Inyección, elige cómo se alinean los resultados en relación al campo de búsqueda: Left, Center, Right, Below, o Off. |
| 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 aquí el CSS selector 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, producto o email específico, puedes insertar aquí el attribute que contiene el valor de 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 categoría, producto o 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, insertarías "category-" en este campo. |
Múltiples IDs #
Para Product ID CSS selector, puedes apuntar a varios elementos con el mismo selector.
Si el selector coincide con varios product IDs, Clerk recopila todos los valores coincididos y los fusiona en una sola lista.
Esto es útil en páginas como los carritos, donde cada línea 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 lista de product ID.
Leyendo IDs desde el contexto de Clerk.js #
Cuando una lógica requiere un product, category o page ID, la función de inyección puede leerlo directamente de la llamada Clerk('context', {...}) que Clerk.js usa para tracking.
En lugar de señalar un selector CSS o atributo en la página, selecciona Clerk.js context desde el desplegable Read ID from. Clerk.io entonces utilizará el valor que se haya establecido 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 establece el contexto automáticamente; no se necesita configuración extra en la página.
Plataformas con contexto incluido en la extensión #
Las siguientes plataformas establecen el contexto Clerk.js automáticamente como parte de su extensión 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, la cual se añade manualmente durante la configuración:
- Shopify
- Dandomain
- Lightspeed
- SmartWeb
- ScanNet
- BigCommerce
Si tu plataforma no aparece arriba, aún puedes usar esta función añadiendo manualmente la llamada Clerk('context', {...}) en tu script de tracking Clerk.js. Consulta la
guía Clerk.js para más detalles.
Titulares #
Administrar 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 el cuadro Headline y haz clic en Save.
El cambio se mostrará inmediatamente después de que refresques tu tienda online.
Etiquetas dinámicas en los campos de texto #
Nuestros diseños estándar utilizan etiquetas para asignar diferentes titulares a cada Element.
Estas etiquetas se pueden utilizar en cualquier campo de texto en diseños de Design Editor y en cualquier lugar de los diseños code designs.
Las etiquetas tienen la sintaxis {{ variable }} y pueden tener el nombre que elijas.
Comienza accediendo a Designs y haciendo clic en Edit Design en el que deseas modificar:
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 Element.
Puedes añadir todos los campos de texto que necesites, Headline es solo un ejemplo.
Todo lo que escribas en la HTML Section con la sintaxis {{ variable }} será utilizable como campo de entrada desde Element.
Estas etiquetas también se pueden usar 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 adicional al tiempo de carga de la página.
Asegúrate de que el balance entre tiempo de carga y evitar duplicados valga la pena.
Clerk.js proporciona dos formas simples de evitar duplicados entre múltiples elementos de recommendations en una misma página.
Una es utilizar la opción Exclude Duplicates en la sección Inject Element, seleccionando el elemento de Clerk del cual deseas excluir 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 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 .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 buena idea si tienes un elemento con 20 productos pero solo cuatro son visibles al mismo tiempo).
Esto se realiza mediante la opción :limit(n) (donde n es la primera cantidad de productos que deseas excluir de).
Aquí tienes el mismo ejemplo anterior, 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 determinados productos, simplemente añade el atributo data-exclude a un embedcode existente.
Esto debe ser una lista con 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>
Insights de visualizaciones 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 insight rápido.
El popup muestra, para los últimos 7 días:
- Las 10 páginas principales donde apareció el elemento
- Conteo de visualizaciones individuales por página
- Visualizaciones totales en todas las páginas
- Enlaces directos a las páginas
Utiliza esto para verificar colocaciones e identificar qué páginas dan mayor exposición a cada elemento. Si un elemento no tiene visualizaciones recientes, la insignia 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.