Opzioni

Generale #

Website Elements rende facile lavorare con gli Elements 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 in cui vuoi 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 singolo Design, oppure puoi creare Designs separati per ogni Element.

Per visualizzare o creare Elements, apri Search > Elements oppure Recommendations > Elements nel menu laterale.

Ogni blocco Element unico è controllato dalle sue impostazioni. Puoi scegliere un nome univoco per tutti i blocchi Element, che funzionerà anche come etichetta di tracking.

Apri un Element per modificarne il nome, la logica, il design e le impostazioni di inserimento.

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 applicare Filters — ad esempio, se vuoi mostrare solo prodotti sopra/sotto un certo prezzo o di un determinato brand.

Seleziona design #

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

Aggiungi facets #

Nelle impostazioni facet dell’Element, clicca su Add Facet per selezionare un attributo. L’attributo deve essere disponibile per il filtraggio nello store. Dopo aver aggiunto facets, usa le maniglie puntinate per cambiarne l’ordine.

Ordine facets #

Quando un Element ha una lista di facets nel suo design o nelle impostazioni di inserimento, puoi riordinare gli attributi usando le maniglie puntinate. Trascina una riga nella posizione desiderata, quindi rilasciala nella casella tratteggiata.

Per usare la tastiera, seleziona una riga facet e premi Alt + ↑ oppure Alt + ↓. I lettori di schermo annunceranno lo spostamento. Vedi Search facets oppure category page facets per ulteriori dettagli.

Inserisci nel sito web #

Scegli Using injection oppure Using embedded code all’interno di Insert into website. La modalità di visualizzazione e i controlli che dipendono da essa rimangono in questa sezione; cambiare il metodo di inserimento aggiorna i controlli mostrati qui.

I blocchi Element sono collegati a un embedcode che permette di renderizzarli su tutte le pagine in cui hai inserito Clerk.js. Puoi semplicemente inserire il embedcode dove vuoi mostrare questo Element oppure usare la funzione injection.

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

Usare embedded code #

Embed code è un breve frammento di codice che puoi inserire nel tuo sito. Seleziona Using embedded code nelle impostazioni Insert into website dell’Element per copiarlo.

Usare injection #

Injection è una funzione che ti permette di inserire blocchi element nel sito senza dover aggiungere manualmente l’embed code. Seleziona Using injection nelle impostazioni Insert into website dell’Element per configurarla.

URL targeting #

Usa l’URL targeting per controllare esattamente dove appare un Element. Aggiungi tutti gli URL che ti servono, poi scegli come il percorso della pagina deve corrispondere:

Di seguito una descrizione delle diverse opzioni injection:

Multipli ID #

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

Se il selettore trova più product ID, Clerk raccoglie tutti i valori trovati e li unisce in un’unica lista.

Questo è utile su pagine tipo 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 come un’unica lista di product ID.

Lettura degli ID dal contesto Clerk.js #

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

Invece di riferirti a un selettore CSS o a un attributo sulla pagina, seleziona Clerk.js context dal menu a tendina Read ID from. Clerk.io userà il valore impostato per quel tipo di ID nel contesto della pagina corrente.

Questa è l’opzione più semplice quando la piattaforma imposta già il contesto automaticamente — nessuna configurazione extra necessaria.

Su single-page app e store headless, mantieni il contesto Clerk.js aggiornato mentre il visitatore naviga. I blocchi già renderizzati i cui ID provengono dal contesto si aggiornano automaticamente al cambio del valore, senza ricaricare tutta la pagina.

Per esempio, un blocco recommandations per categoria può aggiornarsi quando cambia il contesto categoria. Questo comportamento è abilitato di default e funziona indipendentemente dall’osservazione del DOM. I blocchi i cui ID derivano da elementi della pagina, e i popup, non sono ricaricati in questo modo.

Vedi Context Reloads per esempi di codice, chiavi supportate e come disabilitare l’aggiornamento automatico.

Piattaforme con context già integrato nell’estensione #

Le seguenti piattaforme impostano automaticamente il contesto Clerk.js come parte dell’estensione o del 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', {...}) nello script standard Clerk.js, aggiunto manualmente durante la configurazione:

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

Se la tua piattaforma non è elencata sopra, puoi comunque usare questa funzione aggiungendo manualmente la chiamata Clerk('context', {...}) nello script Clerk.js di tracking. Vedi la Clerk.js guide per i dettagli.

Messa online #

Usa la modalità preview per testare un Element nel tuo webshop prima di renderlo visibile ai visitatori. Quando pronto, passalo su live dalla lista Elements all’interno di my.clerk.io.

Visualizza anteprima #

Un Element in modalità preview è nascosto ai visitatori normali. Per vederlo, aggiungi ?clerk_content_mode=preview all’URL della pagina dove è installato, e apri quell’URL. Ad esempio:

https://example.com/?clerk_content_mode=preview

Se l’URL contiene già un ?, aggiungi invece &clerk_content_mode=preview. Aprendo un URL preview puoi vedere gli Elements in preview; questo non li rende live per altri visitatori.

Cambia visibilità #

1. In my.clerk.io, apri Search > Elements oppure Recommendations > Elements.
2. Trova l’Element da rendere live. Nella colonna Visible To, clicca su Preview per passarlo a All visitors. Ora l’Element è online e visibile senza il parametro URL preview.
3. Per tornare in modalità anteprima, fai clic su All visitors nella stessa colonna. Tornerà a Preview e sarà visibile solo usando il parametro preview nell’URL.

La visibilità è impostata separatamente per ogni Element, quindi ripeti questa operazione per tutti gli Element che vuoi pubblicare.

Dopo la pubblicazione, apri il webshop senza clerk_content_mode=preview nell’URL e verifica che ogni Element compaia nelle sue pagine previste.

Headlines #

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

Nella pagina Edit Element, clicca su Select Design per trovare il campo Headline.

Modifica il testo nella casella Headline e clicca Save.

La modifica sarà visibile subito dopo aver aggiornato il webshop.

Dynamic text field tags #

I nostri design standard usano dei tag per impostare diverse headlines per ogni Element.

Questi tag possono essere usati in ogni campo di testo nei design di Design Editor, e ovunque nei code designs.

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

Apri Designs e clicca su Edit Design per il design che vuoi modificare.

Nella pagina Edit Design, inserisci {{ headline }} nella sezione HTML.

Clicca su Save. Poi torna all’Element e configura il campo Headline.

Puoi aggiungere tutti i campi di testo che vuoi: Headline è solo un esempio.

Tutto ciò che inserisci in HTML Section con sintassi {{ variable }} sarà utilizzabile come campo di input da Element.

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

Rimozione dei prodotti duplicati #

Usare questa funzione forza il caricamento di più Clerk.io recommendations una dopo l’altra (non contemporaneamente), aggiungendo così un peso extra al tempo di caricamento della pagina.

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

Clerk.js offre due metodi semplici per prevenire duplicati tra più recommendations element sulla stessa pagina.

Il primo è usare l’opzione Exclude Duplicates nella sezione Inject Element, selezionando il blocco clerk dal quale escludere i duplicati: puoi sceglierlo dalla lista o specificare un CSS selector.

L’altro metodo consiste nell’aggiungere l’attributo data-exclude-from al blocco Clerk da cui vuoi eliminare i duplicati. Il value dell’attributo deve essere un CSS selector dell’altro blocco da cui prevenire i duplicati.

Nell’esempio sotto, l’elemento .clerk2 esclude ogni prodotto presente in .clerk1, mentre l’elemento .clerk3 esclude qualsiasi prodotto che si trova 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 solo ai primi n prodotti (utile se hai un blocco con 20 prodotti ma solo 4 sono visibili alla volta).

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 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 non mostrare determinati prodotti, basta aggiungere l’attributo data-exclude a un embedcode esistente.

Questo deve essere una lista degli ID dei prodotti che non vuoi mostrare nel blocco.

Ad 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 bollino verde Yes/No nella colonna Seen in last 24h per un rapido insight.

Il popup mostra, per gli ultimi 7 giorni:

• Le 10 pagine principali dove si è visto l’elemento
• Conteggio visualizzazioni individuale per pagina
• Totale visualizzazioni su tutte le pagine
• Link diretti alle pagine

Usalo per verificare il posizionamento e identificare quali pagine portano maggior esposizione per ogni element. Se un element non ha visualizzazioni recenti, il bollino mostra No e il popup sarà vuoto.