Opzioni

Generale #

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

I Designs sono memorizzati su Clerk.io e devi solo inserire un piccolo embed code nella pagina in cui vuoi mostrare 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 solo Design, oppure puoi creare Design separati per ciascun Element.

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

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

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

Assegna un nome al tuo elemento #

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

Scegli la logica del prodotto #

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

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

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.

Ordine delle Facet #

Quando un Element ha una lista di facet nelle sue impostazioni di design o di inserimento, puoi riordinare gli attributi utilizzando le maniglie puntinate. Trascina una riga nella posizione desiderata e rilasciala nella casella tratteggiata.

Per usare la tastiera, focalizza una riga facet e premi Alt + ↑ oppure Alt + ↓. I lettori di schermo annunciano lo spostamento. Consulta Search facets o category page facets per maggiori dettagli.

Inserire nel sito web #

I blocchi Element sono associati a un embedcode che permette loro di essere visualizzati su tutte le pagine dove hai inserito Clerk.js. Puoi semplicemente inserire l’embedcode dove vuoi che l’Element venga mostrato oppure usare la funzione di injection.

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

Utilizzo dell’embedded code #

L’embed code è un piccolo snippet di codice che puoi inserire nel tuo sito web. Seleziona Using embedded code nelle impostazioni di Insert into website dell’Element per copiarlo.

Utilizzo di injection #

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

URL targeting #

Utilizza l’URL targeting per controllare esattamente dove appare un Element. Aggiungi tutte le URL che desideri, poi scegli come il percorso della pagina deve corrispondervi:

Di seguito viene descritta la funzione delle diverse opzioni di injection:

ID multipli #

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

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

Questo è utile su pagine come il carrello dove ogni articolo 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 come un’unica lista di product ID.

Lettura di ID dal contesto di Clerk.js #

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

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

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

Piattaforme con contesto integrato nell’estensione #

Le seguenti piattaforme impostano automaticamente il contesto Clerk.js come parte della loro estensione o plugin ufficiale Clerk.io:

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

Piattaforme con contesto nello script manuale Clerk.js #

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

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

Se la tua piattaforma non è elencata sopra, puoi comunque utilizzare questa funzione aggiungendo manualmente la chiamata Clerk('context', {...}) al tuo script di tracking Clerk.js. Consulta la Guida Clerk.js per maggiori dettagli.

Pubblicazione live #

Utilizza la modalità anteprima per testare un Element sul tuo webshop prima di renderlo visibile ai visitatori. Quando è pronto, attivalo dalla lista Elements su my.clerk.io.

Visualizza anteprima #

Un Element in preview mode è nascosto ai visitatori regolari. Per vederlo, aggiungi ?clerk_content_mode=preview all’URL della pagina in cui è installato, poi 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 anteprima puoi visualizzare gli Element in preview; non li renderai live agli altri visitatori.

Cambia visibilità #

1. Su my.clerk.io, apri Search > Elements o Recommendations > Elements.
2. Trova l’Element che vuoi rendere live. Nella sua colonna Visible To, clicca su Preview per passare a All visitors. L’Element è ora live e visibile senza il parametro URL di anteprima.
3. Per riportarlo in modalità preview, clicca su All visitors nella stessa colonna. Tornerà su Preview e sarà visibile solo usando il parametro di anteprima nell’URL.

La visibilità è impostata separatamente per ciascun Element, quindi ripeti per ogni Element che vuoi rendere live.

Dopo la pubblicazione, apri il tuo webshop senza clerk_content_mode=preview nell’URL e verifica che ciascun Element appaia sulle sue pagine previste.

Headlines #

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

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

Cambia il testo nella casella Headline e clicca su Save.

La modifica sarà visualizzata subito dopo che aggiorni il tuo webshop.

Dynamic text field tags #

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

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

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

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

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

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

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

Tutto ciò che scrivi nella HTML Section con la sintassi {{ variable }} sarà disponibile come campo di input dalla scheda Element.

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

Rimozione dei prodotti duplicati #

Utilizzare questa funzione forza il caricamento di più Clerk.io recommendations una dopo l’altra, invece che contemporaneamente, con l’effetto di aumentare il tempo di caricamento della pagina.

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

Clerk.js offre due modi semplici per evitare duplicati tra diversi elements recommendations sulla stessa pagina.

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

L’altra opzione è aggiungere l’attributo data-exclude-from sul blocco clerk da cui vuoi rimuovere i duplicati. Il valore dell’attributo deve essere un CSS selector relativo all’altro blocco da cui si vogliono escludere i duplicati.

Nell’esempio sotto, l’elemento .clerk2 esclude ogni prodotto già presente nell’elemento .clerk1, e l’elemento .clerk3 esclude ogni prodotto già 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 per mostrare solo i primi n prodotti (utile se hai un element con 20 prodotti ma solo quattro visibili alla volta).

Ciò si fa tramite l’opzione :limit(n) (dove n è il numero iniziale di prodotti da escludere).

Ecco lo stesso esempio ma dove l’ID di esclusione considera 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 di mostrare determinati prodotti, aggiungi semplicemente l’attributo data-exclude a un embedcode esistente.

Deve essere una lista degli ID prodotto che non vuoi che siano visualizzati 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 sopra il badge verde Yes/No nella colonna Seen in last 24h per una veloce insight.

La popup mostra per gli ultimi 7 giorni:

• Le prime 10 pagine dove l’elemento è apparso
• Conteggi individuali di visualizzazioni per pagina
• Visualizzazioni totali su tutte le pagine
• Link diretti alle pagine

Utilizza questo dato per verificare il posizionamento e identificare quali pagine generano più esposizione per ciascun element. Se un element non ha visualizzazioni recenti, il badge mostra No e la popup sarà vuota.