Elements

Opciones

Agrega elementos de Clerk.io a tu sitio web con facilidad.

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 quieres que se muestren los productos. Esto se puede hacer usando la sección de Embedded Code o la sección de Injection.

Cualquier cantidad de bloques de Element se pueden basar en un single Design, o puedes crear diseños separados para cada Element.

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

Cada bloque único de Element se controla por su propia configuración. Puedes elegir un nombre único para todos los bloques de Element, que también funcionará como su etiqueta de tracking.

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

Name your element #

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

Choose product logic #

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 alguna marca específica.

Select design #

Esto te permite elegir cuántos productos mostrar y en qué Design basar el Element. Si tienes una variable title/headline en tu diseño, también puedes añadir los títulos que se mostrarán para el Element aquí.

Insert into website #

Los bloques de Element se asignan a un embedcode que permite que se rendericen en todas las páginas donde has insertado Clerk.js. Puedes simplemente insertar el embedcode donde deseas que se muestre ese Element o usar nuestra función de inyección.

Ten en cuenta que puede que los embed codes necesiten variables como product IDs, category IDs o email, dependiendo de la lógica.

Using embedded code #

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

Using injection #

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

URL targeting #

Utiliza la segmentación por URL para controlar exactamente dónde aparece un Element. Agrega tantas URLs como necesites, luego elige cómo debe coincidir la ruta de la página con ellas:

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 ruta exacta.
Does not include one of	Oculta el Element cuando la URL de la página contiene alguno de los valores listados.

A continuación se describe cada una de las opciones de inyección:

Opción	Descripción
Target CSS selector and position	Introduce un selector CSS único que identifique el objetivo en la página. Elige dónde inyectar el Element: After, Before, Inside first, Inside last, o Replace.
Exclude Duplicates	Elige si quieres excluir productos que ya se muestran en otros bloques de 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, producto o dirección de email específica, puedes ingresar 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, producto o una dirección de email específica, puedes ingresar el attribute que contenga el valor de la categoría, producto o email aquí. Por ejemplo, si el attribute es `value-category="category-123"`, deberías ingresar `"value-category"` en este campo.
Extract Category ID, Product ID, Email ID from attribute removing the string	Si el attribute que contiene el valor de la categoría, producto o email es parte de una cadena más larga, puedes ingresar aquí la parte que debe ser eliminada. Por ejemplo, si el attribute es `value="category-123"` y quieres extraer el ID, deberías ingresar `"category-"` en este campo.

Multiple IDs #

Para Product ID CSS selector, puedes seleccionar múltiples elementos con el mismo selector.

Si el selector coincide con varios product IDs, Clerk recopila todos los valores coincidentes y los combina en una sola lista.

Esto es útil en páginas como el carrito 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.

Reading IDs from Clerk.js context #

Cuando una lógica requiere un product, category o page ID, la función de inyección puede leerlo directamente desde la llamada Clerk('context', {...}) que Clerk.js utiliza para el tracking.

En lugar de apuntar a un selector CSS o attribute en la página, selecciona Clerk.js context desde el menú desplegable Read ID from. Clerk.io utilizará el valor 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, sin necesidad de configuración adicional en la página.

Plataformas con context integrado en la extensión #

Las siguientes plataformas establecen el 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 context en el script manual de Clerk.js #

Las siguientes plataformas incluyen la llamada Clerk('context', {...}) en su script estándar de seguimiento de Clerk.js, que se agrega manualmente durante la configuración:

Shopify
Dandomain
Lightspeed
SmartWeb
ScanNet
BigCommerce

Si tu plataforma no está listada arriba, aún puedes usar esta función agregando la llamada Clerk('context', {...}) manualmente a tu script de seguimiento Clerk.js. Consulta la Clerk.js guide para más detalles.

Headlines #

La gestión de los headlines 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 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 tags para establecer diferentes headlines para cada Element.

Estos tags pueden usarse en cualquier campo de texto en los diseños del Design Editor y en cualquier lugar de los code designs.

Los tags tienen la sintaxis {{ variable }} y pueden llevar cualquier nombre que elijas.

Comienza yendo a Designs y haz clic en Edit Design del diseño que deseas modificar:

En la página Edit Design, inserta un tag 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.

Estos tags también pueden usarse en cualquier campo de texto de un diseño de Design Editor.

Removing duplicated products #

Usar esta función obliga a cargar Clerk.io recommendations múltiples una tras otra, en lugar de al mismo tiempo, por lo que agrega una carga adicional al tiempo de carga de la página.
Asegúrate de que el equilibrio con el tiempo de carga valga la pena para evitar duplicados.

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

La otra opción es agregando el atributo data-exclude-from al bloque de Clerk del que quieres eliminar los duplicados. El value del atributo debe ser un CSS selector del otro bloque para evitar duplicados.

En el ejemplo inferior, 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 medida útil si tienes un elemento con 20 productos pero solo 4 son visibles al mismo tiempo).

Esto se hace mediante la opción :limit(n) (donde n es la cantidad de productos first que deseas excluir).

Aquí está 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 agrega el atributo data-exclude a un embedcode existente.

Este atributo debe ser una lista de product IDs que no quieres 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 la insignia verde Yes/No en la columna Seen in last 24h para abrir un resumen rápido.

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

Las 10 páginas principales donde apareció el elemento
Conteos de visualización individuales por página
Total de visualizaciones 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 visualizaciones 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.