Opzioni

Generale #

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

I Designs sono salvati su Clerk.io, e bisogna solo inserire un piccolo codice di incorporamento nella pagina in cui vuoi che vengano visualizzati i prodotti. Questo può essere fatto usando la sezione Embedded Code oppure la sezione Injection.

Qualsiasi numero di blocchi Element può basarsi su un singolo Design, oppure puoi 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. Puoi scegliere un nome unico per ogni blocco Element, che funzionerà anche come etichetta di tracciamento.

La pagina Settings di ogni blocco Element è divisa in quattro sezioni, accessibili cliccando su Edit Element.

Dai un nome al tuo elemento #

Controlla il Nome e le etichette di tracciamento Labels per il blocco Element.

Scegli la logica di prodotto #

Definisce il tipo di prodotti che devono essere mostrati nell’Element.

Puoi anche controllare se applicare dei Filtri, ad esempio se vuoi mostrare solo prodotti sopra o sotto un certo prezzo, oppure di una marca specifica.

Seleziona il design #

Qui puoi 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 visualizzare per l’Element.

Inserimento sul sito #

I blocchi Element sono collegati a un embedcode che ne permette la visualizzazione su tutte le pagine in cui hai inserito Clerk.js. Puoi semplicemente inserire l’embedcode dove vuoi che venga visualizzato l’Element oppure usare la nostra funzione di iniezione.

Nota che i codici embed potrebbero richiedere variabili come product IDs, category IDs oppure email, a seconda della logica.

Utilizzo del codice embedded #

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

Utilizzo di Injection #

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

Qui sotto una descrizione delle diverse opzioni di injection:

Più ID #

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

Se il selector corrisponde a più product ID, Clerk raccoglie tutti i valori corrispondenti e li unisce in una sola lista.

Questo è utile su pagine come i carrelli 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 selector .product-id, Clerk legge tutti i valori sopra come una lista unica di product ID.

Lettura degli ID dal contesto Clerk.js #

Quando una logica richiede un prodotto, categoria o page ID, la funzione di injection può leggerlo direttamente dalla chiamata Clerk('context', {...}) che Clerk.js usa per il tracciamento.

Invece di indicare un CSS selector o un attributo sulla pagina, seleziona Clerk.js context dal menu a tendina Read ID from. Clerk.io utilizzerà il valore in context per quel tipo di ID sulla pagina corrente.

Questa è l’opzione più semplice quando la piattaforma imposta già il contesto automaticamente — nessuna configurazione aggiuntiva richiesta sulla pagina stessa.

Piattaforme con context integrato nell’estensione #

Le seguenti piattaforme impostano automaticamente il context di Clerk.js come parte dell’estensione o plugin ufficiale Clerk.io:

• Magento 1
• Magento 2
• WooCommerce
• PrestaShop
• Shopware 6

Piattaforme con context nello script Clerk.js manuale #

Le seguenti piattaforme includono la chiamata Clerk('context', {...}) nel loro script standard di tracciamento Clerk.js, aggiunto manualmente durante la configurazione:

• Shopify
• Dandomain
• Lightspeed
• SmartWeb
• ScanNet
• BigCommerce

Se la tua piattaforma non è elencata sopra, puoi comunque usufruire di questa funzionalità aggiungendo manualmente la chiamata Clerk('context', {...}) al tuo script di tracciamento Clerk.js. Vedi la Clerk.js guide per i dettagli.

Headlines #

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

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

Modifica il testo nella casella Headline e clicca su Save.

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

Dynamic text field tags #

I nostri design standard utilizzano tag per impostare diversi headlines per ogni Element.

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

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

Inizia andando su Designs e cliccando 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 inserire una Headline dalla tua scheda Element.

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

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

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

Rimozione di prodotti duplicati #

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

Assicurati che la compensazione dei tempi di caricamento valga l’evitare i duplicati.

Clerk.js fornisce due modi semplici per evitare duplicati tra più recommendations elements sulla 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 è aggiungere l’attributo data-exclude-from sul blocco Clerk dal quale vuoi rimuovere i duplicati. Il valore dell’attributo dev’essere un CSS selector dell’altro blocco da cui prevenire i duplicati.

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

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

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

Qui sotto lo stesso esempio 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 vengano mostrati certi prodotti, basta aggiungere l’attributo data-exclude a un embedcode esistente.

Questo dev’essere una lista degli ID prodotto che non vuoi vengano mostrati nel blocco.

Per esempio:

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

Page views insight #

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

Il popup mostra, per gli ultimi 7 giorni:

• Le 10 pagine principali dove è apparso l’elemento
• I conteggi delle visualizzazioni individuali per pagina
• Visualizzazioni totali su tutte le pagine
• Link diretti alle pagine

Usa queste informazioni per verificare il posizionamento e identificare quali pagine danno maggiore esposizione a ciascun elemento. Se un elemento non ha visualizzazioni recenti, il badge mostra No e il popup sarà vuoto.