Opzioni

Generale #

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

I Designs sono salvati su Clerk.io e basta inserire un piccolo codice di incorporamento nella pagina dove vuoi mostrare i prodotti. Questo può essere fatto usando la sezione Embedded Code oppure la sezione Injection.

Qualsiasi numero di blocchi Element può essere basato su un unico Design, oppure puoi creare dei 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 su Edit Element.

Nomina il tuo element #

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

Scegli la logica di prodotto #

Definisce che tipo di prodotti devono essere visualizzati nell’Element.

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

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

Inserimento nel sito #

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

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

Utilizzare il codice incorporato #

L’embed code è un piccolo pezzo di codice che puoi inserire nel tuo sito. Lo trovi selezionando Using embedded code:

Utilizzare l’injection #

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

Targeting degli URL #

Utilizza il targeting degli URL per controllare esattamente dove appare un Element. Aggiungi tutti gli URL che ti servono, poi scegli come il percorso della pagina deve corrispondervi:

Di seguito la descrizione delle diverse opzioni di injection:

IDs multipli #

Per il Product ID CSS selector, puoi targettizzare 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’unica lista.

Questo è utile su pagine come il carrello, dove ogni riga contiene un elemento con 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 una lista unica di product ID.

Lettura di IDs dal contesto Clerk.js #

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

Invece di puntare a un selettore CSS o a un attributo sulla pagina, seleziona Clerk.js context dal menu a tendina Read ID from. Clerk.io userà poi qualunque valore sia stato impostato per quel tipo di ID nel contesto nella pagina corrente.

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

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 Clerk.js manuale #

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

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

Se la tua piattaforma non è tra queste, puoi comunque usare questa funzione aggiungendo manualmente la chiamata Clerk('context', {...}) al tuo script di tracking Clerk.js. Consulta la Clerk.js guide per i dettagli.

Headline #

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

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

Modifica il testo nel box Headline e clicca Save.

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

Tag dinamici nei campi di testo #

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

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

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

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 su Save & Close e potrai scrivere una Headline dalla tab Element.

Puoi aggiungere quanti campi testo vuoi, 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 essere usati anche in qualunque campo di testo in un design Design Editor

Rimozione dei prodotti duplicati #

Utilizzare questa funzione impone il caricamento di più Clerk.io recommendations una dopo l’altra, invece che contemporaneamente, aggiungendo quindi un peso extra al tempo di caricamento della pagina.

Assicurati che il compromesso in termini di tempo di caricamento valga la pena di evitare i duplicati.

Clerk.js fornisce due modi semplici per evitare prodotti duplicati tra diversi elementi recommendations sulla stessa pagina.

Uno è utilizzare l’opzione Exclude Duplicates nella sezione Inject Element, selezionando il blocco Clerk da cui vuoi escludere duplicati – o scegliendolo dall’elenco o specificando un CSS selector.

L’altra opzione è aggiungere l’attributo data-exclude-from al blocco Clerk da cui vuoi eliminare i duplicati. Il valore dell’attributo dev’essere un CSS selector per l’altro blocco da cui prevenire i duplicati.

Nell’esempio qui sotto, l’elemento .clerk2 esclude ogni prodotto presente nell’elemento .clerk1, e l’elemento .clerk3 esclude i prodotti già presenti 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 (una soluzione intelligente se hai un element con 20 prodotti ma solo quattro sono visibili alla volta).

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

Qui lo stesso esempio di prima ma l’ID di esclusione si applica solo ai 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 prodotti specifici, basta aggiungere l’attributo data-exclude a un embedcode esistente.

Deve essere una lista degli IDs dei prodotti che non vuoi visualizzare nel blocco.

Ad esempio:

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

Page views insight #

Nei listati sotto Search > Elements e Recommendations > Elements, passa con il mouse sulla badge verde Yes/No nella colonna Seen in last 24h per aprire una rapida insight.

Il popup mostra per gli ultimi 7 giorni:

• Le top 10 pagine dove è apparso l’elemento
• Il conteggio delle visualizzazioni individuali per pagina
• Il totale delle visualizzazioni su tutte le pagine
• Link diretti alle pagine

Usa queste informazioni per verificare il posizionamento e identificare quali pagine garantiscono maggior visibilità a ogni elemento. Se un elemento non ha viste recenti, la badge mostra No e il popup sarà vuoto.