Get Started

Quando Clerk non dispone di un’estensione o integrazione predefinita per una determinata piattaforma di webshop, la definiamo come piattaforma personalizzata.

La differenza principale è che le piattaforme personalizzate devono sincronizzarsi con un Data Feed e inserire i risultati di Clerk.io nel frontend.

Questa guida spiega come installare Clerk su una piattaforma personalizzata utilizzando Clerk.js. Questo è l’approccio consigliato, in quanto si occupa di gran parte del lavoro complesso relativo al tracking e alle chiamate API.

Se preferisci configurare Clerk.io utilizzando la nostra API, consulta invece questo articolo.

Clerk.js è una libreria leggera che consente di configurare Clerk utilizzando semplici snippet HTML nel codice sorgente. Clerk.js eseguirà la scansione della pagina per qualsiasi snippet con la classe “clerk” e li utilizzerà per effettuare chiamate API.

Di seguito sono riportati i passaggi che seguirai durante l’installazione di Clerk.

1. Sincronizza i dati #

Per prima cosa, devi importare i dati nel sistema affinché l’AI di Clerk.io comprenda il tuo webshop e possa iniziare a prevedere i risultati.

Crea Store #

Ogni configurazione di Clerk viene impostata su uno Store in my.clerk.io. Questo conterrà tutti i dati che carichi e ti permetterà di interagire con essi tramite la sua Public API key.

Se hai bisogno di configurare più webshop o domini, ognuno dovrebbe avere il proprio Store.

Puoi copiare la tua configurazione su nuovi Store dopo aver effettuato la prima configurazione.

Costruisci i Feed #

Ci sono due modi per connettere i dati del tuo webshop a Clerk.io.

Data Feeds #

Questa è la principale fonte di dati dal webshop a Clerk. Consulta la specifica dei feed qui.

Queste sono le nostre best practice per la creazione dei feed:

• Dovrebbero idealmente essere aggiornati una volta al giorno dalla tua parte.
• Dovrebbero essere ospitati su un URL dal quale l’importatore di Clerk.io possa recuperarli. Es: https://awesomestore.com/feed/clerk.json
• Come base, i feed dovrebbero sempre contenere tutti i prodotti e le categorie disponibili, ma possono anche includere dati sulle pagine (articoli di blog) e sui clienti.
• Clerk utilizza gli attributi dei prodotti per ricerca, filtraggio e stilizzazione.
• Al primo import, dovresti includere tutti gli ordini storici. Dopo il primo import, possono essere rimossi perché Clerk li mantiene nel database.
• Per i prodotti, oltre ai campi richiesti, puoi inviare qualsiasi altro attributo importante per la tua attività, come recensioni, colori, etichette, immagini-splash, ecc.
• Per impostazione predefinita, Clerk importerà i feed almeno una volta al giorno.
• Puoi configurare una finestra di importazione di 1 ora (es: tra le 2:59 e le 3:59) se vuoi che l’importatore venga eseguito a un orario specifico.

AI Integration #

Se la piattaforma del tuo webshop espone un’API a cui puoi accedere, puoi usare una AI Integration per connettere Clerk.io direttamente all’API. Leggi la guida all’AI Integration sotto Ask Clerk.io per saperne di più.

Usa la sincronizzazione in tempo reale #

Questa è opzionale ma consigliata.

Se il webshop richiede aggiornamenti in tempo reale, come la rimozione di prodotti non disponibili o l’aggiornamento dei prezzi, la nostra CRUD API può essere utilizzata per aggiungere, aggiornare o rimuovere prodotti tra un import e l’altro dei feed.

2. Traccia il comportamento #

L’AI di Clerk.io apprende il comportamento dei clienti attraverso gli ordini e l’attività sul sito. Tracciare questo comportamento è essenziale affinché l’AI possa fare previsioni accurate e per mostrare le statistiche che dimostrano quanto funziona.

Installa Clerk.js #

Clerk.io traccia click, ricerche e ordini dal frontend per tre motivi chiave:

• Permettere all’AI di apprendere il comportamento dei clienti in tempo reale tramite gli ordini.
• Analitica che mostra come gli ordini vengano migliorati da Clerk.
• Personalizzare varie Recommendations in tutto il sito.

Lo script di Clerk.js deve essere aggiunto insieme agli altri script nella sezione <head>, e configurato con la Public API Key che si trova su my.clerk.io.

Questo caricherà la libreria che genera ID visitatore cookieless e anonimi e traccerà i click su qualsiasi prodotto mostrato da Clerk tramite gli snippet.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'insert_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Aggiungi il contesto #

Usa Clerk Context per indicare a Clerk.js quale prodotto, categoria o pagina il visitatore sta visualizzando. Questo permette di personalizzare le Recommendations dei prodotti e aiuta Chat a comprendere quale pagina prodotto o categoria viene visualizzata. Puoi anche passare il contesto del carrello a Chat così capisce quali prodotti sono presenti nel carrello.

Aggiungi il seguente snippet al template di pagina dopo che Clerk.js è stato caricato. Sostituisci i valori di esempio con gli identificativi del prodotto, della categoria o della pagina rilevanti, e usa null quando un tipo di contesto non si applica.

<script>
  Clerk('context', {
    product: 123,
    category: 456,
    page: 789
  });
</script>

Aggiungi il Sales-Tracking #

Questo deve essere aggiunto alla tua pagina di successo dell’ordine. Ogni volta che viene effettuato un ordine, Clerk.js userà lo snippet per fare una chiamata API contenente le informazioni sull’ordine, incluso ciò su cui il visitatore ha fatto click durante la sessione che ha portato all’ordine.

Assicurati di aggiornare i segnaposto per recuperare i dati corretti dagli ordini.

 <span
    class="clerk"
    data-api="log/sale"
    data-sale="123456"
    data-email="luke@skywalker.me"
    data-customer="7890"
    data-products='[{"id": 12, "quantity": 1, "price": 99.95}, {"id": 54, "quantity": 2, "price": 9.50}...]'>
</span>

Clerk.io registra anche i prodotti visualizzati dai visitatori, per personalizzarli in alcuni banner.

Se utilizzerai Cross-Sell e/o Alternative products nelle tue pagine dettaglio prodotto, Clerk userà queste informazioni per registrare i prodotti visualizzati dai visitatori.

Se invece non le usi, dovrai includere questo snippet nella pagina dettaglio prodotto per registrare anche le visualizzazioni dei prodotti:

<span 
    class="clerk"
    data-api="log/product"
    data-product="INSERT_PRODUCT_ID">
</span>

3. Visualizza i risultati #

Quando utilizzi Clerk.js, i design possono essere gestiti in due modi:

• Ospitati su my.clerk.io utilizzando il nostro Design Editor o codice Liquid.

• Ospitati nel tuo codice sorgente come resultati embedded

Ospita su Clerk.io #

Ospitare i design su my.clerk.io offre la massima flessibilità, poiché puoi cambiare design, logiche e filtri senza modificare il codice onsite dopo la configurazione. Lo svantaggio è che i design sono gestiti su base store per store.

Incorpora i risultati #

Ospitare i design nel tuo codice sorgente ti dà la libertà di condividere i design tra più Store. Lo svantaggio è che non puoi usare il nostro sistema Element per apportare modifiche ai risultati.

4. Aggiungi gli Elements #

Questo viene fatto tramite snippet associati al tuo Element.

Inserisci nel Frontend #

Per inserire i risultati di Clerk, scegli un Element in my.clerk.io, configurarlo per utilizzare un design creato da te e copia lo snippet su una pagina dove i risultati dovranno essere visualizzati.

Clerk.js esegue la scansione del codice sorgente per qualsiasi snippet con la classe clerk e utilizza i data-attributes per effettuare chiamate API.

Riferisce le impostazioni del tuo Element compresi endpoint API / logiche dell’elemento, design, numero di prodotti da restituire ecc., e restituisce un blocco HTML completo che viene inserito nello snippet.

Configura #

Alcuni snippet richiedono dati aggiuntivi come ID prodotto o ID categoria che devono essere configurati in base alla logica del tuo webshop per il recupero dei dati.

Un esempio di ciò è lo snippet Best Alternatives Recommendations, che richiede che l’ID prodotto venga aggiunto allo snippet:

<!--Best Alternatives Recommendations-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

Altri richiedono semplicemente che lo snippet venga aggiunto alla pagina, con alcune opzioni di configurazione minori in base a come dovrebbe comportarsi.

Un esempio è lo snippet Instant Search, che richiede un CSS selector per l’input di ricerca e il numero di suggerimenti e categorie da mostrare:

<!--Instant Search-->
<span 
    class="clerk"
    data-template="@live-search"
    data-instant-search="INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE"
    data-instant-search-suggestions="6"
    data-instant-search-categories="6"
    data-instant-search-pages="6"
    data-instant-search-positioning="right">
</span>

Per impostazione predefinita, i nuovi Store in Clerk includono la nostra Best Practice già creata come singoli Element block, rendendo facile iniziare.

Lo snippet cambierà a seconda della Product Logic scelta per l’Element, quindi potrai sempre vedere quali data-attribute sono richiesti da configurare.