Opzioni

Generale #

Website Elements rende facile lavorare con Elements per Recommendations e Elements per i risultati di Search.

I Designs sono archiviati su Clerk.io, e devi solo inserire un piccolo codice di incorporamento nella pagina dove desideri che vengano mostrati i prodotti. Questo può essere fatto utilizzando la sezione Embedded Code o 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 sue 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 è divisa in quattro sezioni a cui puoi accedere cliccando Edit Element.

Dai un nome al tuo elemento #

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

Scegli la logica del prodotto #

Definisce quale tipo di prodotti debba essere mostrato nell’Element.

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

Seleziona 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 qui i titoli da mostrare per l’Element.

Inserisci nel sito web #

I blocchi Element sono associati a un embedcode che consente di renderizzarli su tutte le pagine in cui hai inserito Clerk.js. Puoi semplicemente inserire l’embedcode dove vuoi che questo Element sia mostrato oppure utilizzare la nostra funzione di injection.

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

Utilizzo del codice di incorporamento #

L’embed code è un piccolo snippet di codice che puoi inserire nel tuo sito web. Può essere trovato selezionando Using embedded code:

Utilizzo dell’injection #

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

Di seguito una descrizione delle diverse opzioni di injection:

ID multipli #

Per il Product ID CSS selector, puoi selezionare più elementi con lo stesso selettore.

Se il selettore corrisponde a più product IDs, Clerk raccoglie tutti i valori trovati e li unisce in un unico elenco.

Questo è utile su pagine come il carrello dove ogni riga contiene un elemento product ID.

<input class="product-id" value="123">
<input class="product-id" value="456">
<input class="product-id" value="789">

Con il selettore .product-id, Clerk legge tutti i valori sopra come un unico elenco di product ID.

Headlines #

Gestire le headline è semplice con la configurazione standard in Element.

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

Cambia il testo nella casella Headline e clicca su Save.

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

Tag dinamici per text field #

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

Questi tag possono essere utilizzati in qualsiasi campo di testo nei design di 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 headline con {{ headline }} nella HTML Section:

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

Puoi aggiungere tutti i text-fields che vuoi, Headline è solo un esempio.

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

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

Rimozione di prodotti duplicati #

L’utilizzo di questa funzione forza il caricamento di più elementi Clerk.io recommendations uno dopo l’altro, invece che contemporaneamente, aggiungendo quindi un carico extra al tempo di caricamento della pagina.

Assicurati che il compromesso sui tempi valga la pena per evitare i duplicati.

Clerk.js fornisce due semplici modi per evitare duplicati tra più recommendations element nella stessa pagina.

Uno è usare l’opzione Exclude Duplicates nella sezione Inject Element, selezionando l’element Clerk da cui vuoi escludere i duplicati—scegliendolo dall’elenco o specificando un CSS selector.

L’altra opzione consiste nell’aggiungere l’attributo data-exclude-from sul blocco Clerk dal quale vuoi rimuovere i duplicati. Il valore dell’attributo deve essere un CSS selector relativo all’altro blocco dal quale escludere i duplicati.

Nell’esempio qui sotto, l’element .clerk2 esclude tutti i prodotti presenti nell’element .clerk1, e l’element .clerk3 esclude ogni prodotto presente sia in .clerk1 che .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 per mostrare solo i primi n prodotti (una buona idea se hai un elemento con 20 prodotti ma solo quattro sono visibili per volta).

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

Ecco lo stesso esempio di sopra, 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>

Escludere prodotti specifici #

Per evitare che siano mostrati determinati prodotti, basta aggiungere l’attributo data-exclude a un embedcode esistente.

Questo deve essere un elenco degli IDs dei prodotti che non vuoi vengano mostrati nel blocco.

Per esempio:

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

Insight sulle visualizzazioni della pagina #

Nelle liste sotto Search > Elements e Recommendations > Elements, passa 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 dove l’element è apparso
• Conteggi di visualizzazioni individuali per pagina
• Visualizzazioni totali su tutte le pagine
• Link diretti alle pagine

Usalo per verificare il posizionamento e identificare quali pagine generano più esposizione per ogni element. Se un element non ha visualizzazioni recenti, il badge mostrerà No e il popup sarà vuoto.