Get Started

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

La differenza principale è che le piattaforme personalizzate devono sincronizzarsi tramite 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 poiché gestisce gran parte del lavoro pesante relativo al tracciamento e alle chiamate API.

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

Clerk.js è una libreria leggera che consente di impostare Clerk usando semplici snippet HTML nel codice sorgente. Clerk.js esegue la scansione della pagina alla ricerca di snippet con la classe “clerk” e li utilizza per effettuare chiamate API.

Di seguito sono riportati i passaggi da seguire per installare Clerk.

1. Sincronizza i dati #

Innanzitutto, è necessario inserire i dati all’interno affinché l’IA di Clerk.io possa comprendere il tuo webshop e iniziare a prevedere i risultati.

Crea Store #

Ogni installazione di Clerk viene configurata su uno Store in my.clerk.io. Questo conterrà tutti i dati caricati e ti permetterà di interagirci tramite la relativa Public API key.

Se devi configurare più webshop o domini, ognuno dovrebbe avere il proprio Store.

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

Costruisci Feeds #

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

Data Feeds #

Questa è la principale fonte di dati dal webshop verso Clerk. Controlla la specifica dei feed qui.

Queste sono le nostre migliori pratiche per la creazione dei feed:

• Dovrebbero idealmente essere aggiornati una volta al giorno dalla tua parte.
• Devono essere ospitati a un URL da cui l’importatore di Clerk.io possa recuperarli, ad esempio https://awesomestore.com/feed/clerk.json
• Alla base, i feed dovrebbero contenere sempre tutti i prodotti e le categorie disponibili, ma possono includere anche pagine (post/articoli del blog) e dati cliente.
• Clerk utilizza gli attributi dei prodotti per la ricerca, il filtraggio e lo stile.
• Durante la prima importazione, devi includere tutti gli ordini storici. Dopo la prima importazione, questi possono essere rimossi poiché Clerk li conserva nel database.
• Per i prodotti, oltre a quelli richiesti, puoi inviare altri attributi importanti per il tuo business, come recensioni, colori, etichette, splash-images ecc.
• Per impostazione predefinita, Clerk importerà i feed almeno una volta al giorno.
• Puoi configurare una finestra di 1 ora (ad esempio tra le 2:59 e le 3:59) se desideri che l’importatore venga eseguito in un determinato momento.

AI Integration #

Se la piattaforma e-commerce espone un’API a cui puoi accedere, puoi utilizzare una AI Integration per connettere direttamente Clerk.io all’API. Leggi la guida all’AI Integration in Ask Clerk.io per saperne di più.

Usa Realtime Sync #

Questa opzione è facoltativa ma consigliata.

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

2. Traccia il comportamento #

L’IA di Clerk.io apprende il comportamento dei clienti tramite ordini e attività sul sito web. Il tracciamento di questo comportamento è fondamentale affinché l’IA effettui previsioni accurate e possa mostrare le statistiche che dimostrano l’efficacia del sistema.

Installa Clerk.js #

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

• Permettere all’IA di apprendere in tempo reale il comportamento dei clienti tramite gli ordini.
• Le statistiche che mostrano come Clerk migliora gli ordini.
• Personalizzare varie Recommendations su tutto il sito.

Lo script Clerk.js dovrebbe essere aggiunto insieme agli altri script nella sezione <head>, configurato con la Public API Key che trovi su my.clerk.io.

Questo caricherà la libreria che genera ID visitatore anonimi e senza cookie 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 Context #

Utilizza Clerk Context per indicare a Clerk.js quale prodotto, categoria o pagina sta visualizzando il visitatore. Questo permette di personalizzare le Recommendations sui prodotti e di aiutare Chat a capire quale pagina prodotto o categoria è visualizzata. È anche possibile passare il contesto del carrello a Chat, così da comprendere quali prodotti si trovano nel carrello.

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

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

Aggiungi Sales-Tracking #

Questo va aggiunto alla pagina di conferma ordine. Ogni volta che viene effettuato un ordine, Clerk.js utilizzerà lo snippet per effettuare una chiamata API con le informazioni dell’ordine, compreso ciò su cui il visitatore ha fatto clic nella sessione precedente all’ordine.

Assicurati di aggiornare i placeholder 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 la personalizzazione di determinati banner.

Se utilizzerai Cross-Sell e/o prodotti Alternativi sulle pagine di dettaglio prodotto, Clerk li userà per registrare i prodotti visualizzati dagli utenti.

Altrimenti, devi includere questo snippet sulla pagina di dettaglio prodotto per tracciare anche la visualizzazione dei prodotti:

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

3. Visualizza i risultati #

Quando si utilizza 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 embedded results

Ospita in Clerk.io #

Ospitare i design su my.clerk.io offre la massima flessibilità, in quanto puoi modificare design, logiche e filtri senza cambiare il codice sito dopo l’installazione. Lo svantaggio è che i design vengono gestiti su base Store individuale.

Inserisci i risultati #

Ospitare i design nel codice sorgente offre la libertà di condividere i design tra più Store. Lo svantaggio è che non puoi usare il nostro sistema Element per modificare i risultati.

4. Aggiungi Elements #

Questo si effettua 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 nella pagina dove devono essere visualizzati i risultati.

Clerk.js esamina il codice sorgente alla ricerca di snippet con la classe clerk e utilizza i data-attribute per effettuare chiamate API.

Fa riferimento alle impostazioni dell’Element tra cui endpoint API / logica 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 è lo snippet delle Best Alternatives Recommendations, che richiede di aggiungere un ID prodotto allo snippet:

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

Altri richiedono semplicemente l’aggiunta dello snippet alla pagina, con alcune opzioni di configurazione minime a seconda del comportamento desiderato.

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

<!--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 hanno già le nostre Best Practice create come blocchi Element individuali per facilitare l’avvio.

Lo snippet cambierà a seconda della logica di prodotto scelta per l’Element, quindi potrai sempre vedere quali data-attribute sono richiesti affinché tu possa configurarli.