Elements

Opzioni

Aggiungi facilmente gli elementi di Clerk.io al tuo sito web.

Generale #

Website Elements semplifica il lavoro con Elements per Recommendations e Elements per i Search results.

I Designs sono memorizzati su Clerk.io, e basta inserire un piccolo embed code nella pagina in cui si desidera mostrare i prodotti. Questo può essere fatto utilizzando la sezione Embedded Code oppure la sezione Injection.

Qualsiasi numero di blocchi Element può essere basato su un unico Design, oppure è possibile creare Design separati per ogni Element.

Puoi controllare i tuoi Elements esistenti e crearne di nuovi cliccando su Search/Recommendations e poi su Element nel menu laterale:

Ogni blocco Element unico è controllato dalle proprie impostazioni. È possibile scegliere un nome unico per tutti i blocchi Element, che fungerà anche da etichetta di tracking.

La pagina Settings di ogni blocco Element è suddivisa in quattro sezioni a cui puoi accedere cliccando su Edit Element.

Dai un nome al tuo elemento #

Controlla il Nome e le Label di tracking per il blocco Element.

Scegli la logica dei prodotti #

Definisce quale tipo di prodotti deve essere visualizzato nell’Element.

Puoi anche controllare se applicare dei Filters, ad esempio se desideri mostrare solo prodotti al di sopra o al di sotto di un certo prezzo, o di un particolare marchio.

Seleziona il design #

Questo ti permette di scegliere quanti prodotti mostrare e su quale Design basare l’Element. Se il tuo design contiene una variabile title/headline, puoi aggiungere qui anche i titoli da mostrare per l’Element.

Inserimento nel sito web #

I blocchi Element vengono collegati a uno embedcode che consente di renderizzarli su tutte le pagine in cui hai inserito Clerk.js. Puoi semplicemente inserire l’embedcode dove desideri mostrare l’Element o utilizzare la nostra funzione di injection.

Nota che gli embed code potrebbero richiedere variabili come product IDs, category IDs o email, a seconda della logica.

Uso dell’embedded code #

L’embed code è un breve snippet di codice che puoi inserire nel tuo sito web. Puoi trovarlo selezionando Using embedded code:

Uso dell’injection #

L’injection è una funzione che ti consente di inserire blocchi element nel tuo sito web senza dover aggiungere manualmente l’embed code. Si esegue selezionando Using injection:

Di seguito trovi una descrizione delle diverse opzioni di injection:

OpzioneDescrizione
Selettore CSS univoco per identificarloInserisci un selettore CSS univoco che identificherà il blocco element sulla pagina. Scegli anche dove deve essere iniettato: After, Before, Inside oppure Replace.
Escludi duplicatiScegli se vuoi escludere i prodotti già visualizzati in altri blocchi element clerk nella stessa pagina.
Category ID, Product ID, Email CSS SelectorSe la logica è impostata per mostrare prodotti da una specifica categoria, prodotto o indirizzo email, puoi inserire qui il CSS selector della categoria, prodotto o ID email.
Category, Product, Email attributeSe la logica è impostata per mostrare prodotti di una specifica categoria, prodotto o per un indirizzo email specifico, puoi inserire qui l’attribute che contiene il valore della categoria, prodotto o email. Es. se l’attributo è value-category="category-123", inserisci "value-category" in questo campo.
Estrarre Category ID, Product ID, Email ID rimuovendo la stringaSe l’attributo che contiene il valore della categoria, prodotto o email fa parte di una stringa più lunga, qui puoi inserire la parte da rimuovere. Es. se l’attributo è value="category-123" e vuoi estrarre l’ID, inserisci "category-" in questo campo.

Headlines #

Gestire gli headline è semplice con la configurazione standard di Element.

Nella pagina Edit Element, clicca su Select Design per vedere il campo di input Headline:

Modifica il testo nel box Headline e clicca su Save.

La modifica sarà visibile immediatamente dopo aver aggiornato il tuo webshop.

Tag dinamici nei campi di testo #

I nostri design standard utilizzano tag per assegnare headline differenti a ciascun Element.

Questi tag possono essere utilizzati in qualsiasi campo testuale nei design di Design Editor e ovunque nei code designs.

I tag hanno la sintassi {{ variable }} e possono avere qualsiasi nome tu scelga.

Vai su Designs e clicca su Edit Design per quello che vuoi modificare:

Nella pagina Edit Design, inserisci un tag headline con {{ headline }} nella HTML Section:

Clicca su Save & Close e potrai scrivere un Headline dalla scheda Element.

Puoi aggiungere quanti campi di testo desideri, Headline è solo un esempio.

Qualsiasi cosa tu scriva nella HTML Section con la sintassi {{ variable }} sarà utilizzabile come campo di input da Element.

Questi tag possono anche essere utilizzati in qualsiasi campo testuale in un design di Design Editor

Rimozione dei prodotti duplicati #

L’utilizzo di questa funzionalità mette in coda il caricamento di più Clerk.io recommendations una dopo l’altra, invece che simultaneamente, aumentando così il tempo di caricamento della pagina.

Assicurati che il compromesso in termini di tempo di caricamento valga la pena per evitare i duplicati.

Clerk.js offre due semplici modi per prevenire duplicati tra diversi elementi recommendations nella stessa pagina.

Uno consiste nell’usare l’opzione Exclude Duplicates nella sezione Inject Element, selezionando l’elemento Clerk da cui vuoi escludere i duplicati, scegliendolo dalla lista o specificando un CSS selector.

L’altra opzione consiste nell’aggiungere l’attributo data-exclude-from al blocco Clerk dal quale vuoi rimuovere i duplicati. Il valore dell’attributo deve essere un CSS selector del blocco da cui prevenire i duplicati.

Nell’esempio seguente, l’elemento .clerk2 esclude qualsiasi prodotto presente nell’elemento .clerk1, e l’elemento .clerk3 esclude qualsiasi prodotto presente sia in .clerk1 sia in .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>

Puoi anche limitare l’esclusione mostrando solo i primi n prodotti (utile se hai un elemento con 20 prodotti ma solo quattro sono visibili in qualsiasi momento).

Questo si fa tramite l’opzione :limit(n) (dove n è il primo numero di prodotti che vuoi escludere).

Ecco lo stesso esempio di prima, ma dove l’ID di esclusione riguarda solo i primi cinque prodotti.

<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>

Esclusione di prodotti specifici #

Per evitare la visualizzazione di determinati prodotti, aggiungi semplicemente l’attributo data-exclude a un embedcode esistente.

Deve essere un elenco di product IDs che non vuoi vengano visualizzati nel blocco.

Per esempio:

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654]">
</span>

Insight sulle page views #

Nelle liste sotto Search > Elements e Recommendations > Elements, passa il mouse sul badge verde Yes/No nella colonna Seen in last 24h per aprire un insight rapido.

Il popup mostra per gli ultimi 7 giorni:

  • Le 10 pagine principali in cui l’elemento è apparso
  • Conteggi individuali per visualizzazione per pagina
  • Visualizzazioni totali su tutte le pagine
  • Link diretti alle pagine

Usalo per verificare il posizionamento e identificare quali pagine generano la maggiore esposizione per ogni elemento. Se un elemento non ha visualizzazioni recenti, il badge mostra No e il popup sarà vuoto.

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.