Opzioni

Generale #

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

I Designs sono salvati su Clerk.io, e ti basta inserire un piccolo embed code nella pagina dove vuoi che vengano mostrati 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.

Puoi controllare i tuoi Elements esistenti e crearne di nuovi cliccando su Search/Recommendations e poi su Element nel menu laterale:

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

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

Dai un nome al tuo element #

Qui controlli il Name e i Labels di tracking per il blocco Element.

Scegli la logica dei prodotti #

Definisci quale tipo di prodotti deve essere visualizzato nell’Element.

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

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, qui puoi anche inserire i titoli da mostrare per l’Element.

Inserimento nel sito web #

I blocchi Element sono associati a un embedcode che li abilita a essere renderizzati su tutte le pagine in cui hai inserito Clerk.js. Puoi semplicemente inserire l’embedcode dove vuoi che venga mostrato questo Element oppure utilizzare la funzionalità di injection.

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

Utilizzo di embedded code #

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

Utilizzo di injection #

L’injection è una funzionalità che ti permette di inserire blocchi element nel tuo sito senza dover aggiungere manualmente il codice di embed. Questo avviene selezionando Using injection:

Targeting URL #

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

Qui sotto una descrizione delle diverse opzioni di injection:

ID multipli #

Per 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 corrispondenti e li unisce in un’unica lista.

Questo è utile su pagine come il carrello dove ogni linea prodotto 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 una lista di product ID.

Lettura degli ID dal contesto di Clerk.js #

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

Invece di puntare a un CSS selector o un attributo sulla pagina, seleziona Clerk.js context dal menu a tendina Read ID from. Clerk.io userà allora qualunque 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 aggiuntiva è necessaria sulla pagina.

Piattaforme con contesto già integrato nell’estensione #

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

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

Piattaforme con contesto nello script manuale di Clerk.js #

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

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

Se la tua piattaforma non è presente qui 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 dettagli.

Headlines #

Gestire le headline è facile 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à visibile immediatamente dopo aver ricaricato il tuo webshop.

Tag dinamici per i campi di testo #

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

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

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 desideri modificare:

Nella pagina Edit Design, inserisci un tag headline come {{ headline }} nella HTML Section:

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

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

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

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

Rimozione dei prodotti duplicati #

L’utilizzo di questa funzionalità fa sì che più Clerk.io recommendations vengano caricate una dopo l’altra, invece che contemporaneamente, aggiungendo così un tempo di caricamento extra alla pagina.

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

Clerk.js fornisce due semplici modi per evitare i duplicati tra diversi elementi di recommendations nella stessa pagina.

Uno è usare l’opzione Exclude Duplicates nella sezione Inject Element, selezionando l’elemento Clerk da cui vuoi escludere 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 value dell’attributo deve essere un CSS selector per l’altro blocco da cui evitare i duplicati.

Nell’esempio sotto, l’elemento .clerk2 esclude qualsiasi prodotto presente nell’elemento .clerk1 e l’elemento .clerk3 esclude qualsiasi prodotto che sia in .clerk1 o 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 mostrando solo i primi n prodotti (utile se hai un elemento con 20 prodotti ma solo quattro sono visibili alla volta).

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

Ecco lo stesso esempio di prima, ma dove l’esclusione riguarda solo i primi cinque prodotti per ID.

<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.

Questo deve essere una lista di product IDs che non vuoi siano mostrati nel blocco.

Per esempio:

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

Insight sulle visualizzazioni di pagina #

Nelle liste sotto Search > Elements e Recommendations > Elements, passa col 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:

• Top 10 pagine dove l’element è comparso
• Conteggio individuale di visualizzazioni per pagina
• Visualizzazioni totali su tutte le pagine
• Link diretti alle pagine

Usa questa funzione per verificare la posizione e identificare quali pagine danno maggiore visibilità a ciascun element. Se un element non ha visualizzazioni recenti, il badge mostra No e il popup sarà vuoto.