Opzioni

Generale #

Website Elements semplifica il lavoro con gli Sliders per le Recommendations e gli Elements per i risultati di Search.

I Designs sono salvati su Clerk.io e devi solo inserire un piccolo codice di incorporamento nella pagina dove vuoi visualizzare 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 puoi creare Designs separati per ciascun 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. Puoi 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 accessibili cliccando su Edit Element.

Approfondimenti sulle visualizzazioni di pagina #

Nelle liste sotto Search > Elements e Recommendations > Sliders, passa con il mouse sul badge verde Yes/No nella colonna Seen in last 24h per aprire una panoramica rapida.

Il popup mostra per gli ultimi 7 giorni:

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

Utilizza questo strumento per verificare il posizionamento e identificare quali pagine portano la maggiore esposizione per ciascun elemento. Se un elemento non ha visualizzazioni recenti, il badge mostrerà No e il popup sarà vuoto.

Dai un nome al tuo element #

Controlla il Name e le etichette di tracking Labels per il blocco Element.

Scegli la logica prodotto #

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

Puoi anche controllare se devono essere applicati Filters, ad esempio se vuoi mostrare solo prodotti sopra o sotto un certo prezzo, o di un brand specifico.

Seleziona il design #

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

Inserimento nel sito web #

I blocchi Element sono collegati a un embedcode che consente loro di essere renderizzati su tutte le pagine dove hai inserito Clerk.js. Puoi semplicemente inserire l’embedcode dove vuoi che appaia questo Element oppure usare la nostra funzione di injection.

Nota che i codici di incorporamento potrebbero richiedere variabili come product IDs, category IDs o email, a seconda della logica.

Utilizzo del codice incorporato #

Il codice incorporato è un piccolo snippet di codice che puoi inserire nel tuo sito web. Lo trovi selezionando Using embedded code:

Utilizzo di injection #

Injection è una funzionalità che ti permette di inserire blocchi element nel tuo sito senza dover aggiungere l’embed code manualmente. Si fa selezionando Using injection:

Di seguito una descrizione delle diverse opzioni di injection:

Headlines #

La gestione delle headlines è semplice con la configurazione standard in Element.

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

Modifica il testo nella casella Headline e clicca su Save.

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

Tag dinamici nei campi di testo #

I nostri design standard usano tag per impostare headline diverse per ciascun Element.

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

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

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

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

Clicca Save & Close e potrai scrivere una Headline dalla tua scheda Element.

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

Tutto ciò che scrivi nella HTML Section con la sintassi {{ variable }} sarà utilizzabile come input-field da Element.

Questi tag possono essere usati anche in qualsiasi campo di testo in un design Design Editor

Rimozione dei prodotti duplicati #

L’utilizzo di questa funzione forza il caricamento di più Clerk.io recommendations una dopo l’altra, invece che tutte insieme, aggiungendo quindi un peso aggiuntivo nel tempo di caricamento della pagina.

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

Clerk.js offre due semplici modi per evitare duplicati tra più sliders recommendations sulla stessa pagina.

Una è usare l’opzione Exclude Duplicates nella sezione Inject Element, selezionando l’elemento Clerk da cui escludere i duplicati – scegliendolo dalla lista o specificando un selettore CSS.

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

Nell’esempio che segue, lo slider .clerk2 esclude qualsiasi prodotto presente nello slider .clerk1, e lo slider .clerk3 esclude qualsiasi prodotto presente sia in .clerk1 che 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 a mostrare solo i primi n prodotti (utile se hai uno slider con 20 prodotti ma solo quattro visibili in un dato momento).

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

Ecco lo stesso esempio qui sopra, ma in cui 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>

Escludere prodotti specifici #

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

Deve essere una lista degli ID dei prodotti che non vuoi che vengano mostrati nel blocco.

Ad esempio:

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