Get Started

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

La differenza principale è che le piattaforme personalizzate dovrebbero 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, poiché si occupa della maggior parte delle attività pesanti in termini di tracciamento e 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 scannerà la pagina alla ricerca di qualsiasi snippet con la classe “clerk” e li utilizzerà per effettuare chiamate API.

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

1. Sincronizza i dati #

Per prima cosa, è necessario far entrare i dati 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 caricati e ti consentirà di interagire con essi tramite la sua chiave API pubblica.

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

Crea Feed #

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

Data Feed #

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

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

• Idealmente dovrebbero essere aggiornati una volta al giorno dal tuo lato.
• Dovrebbero essere ospitati su un URL da cui l’importatore di Clerk.io può recuperarli, ad esempio https://awesomestore.com/feed/clerk.json
• Come base, i feed dovrebbero sempre contenere tutti i prodotti e le categorie disponibili, ma possono anche includere pagine (post del blog/articoli) e dati dei clienti.
• Clerk utilizza gli attributi dei prodotti per la ricerca, il filtraggio e lo stile.
• Al primo import, dovresti includere tutti gli ordini storici. Dopo il primo import, questi possono essere rimossi poiché Clerk li mantiene nel database.
• Per i prodotti, oltre a quelli richiesti, puoi inviare qualsiasi altro attributo importante per la tua attività, come recensioni, colori, etichette, splash-image 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 vuoi che l’importatore venga eseguito in un momento specifico.

Integrazione AI #

Se la piattaforma del tuo webshop espone un’API a cui puoi accedere, puoi utilizzare un’Integrazione AI per collegare direttamente Clerk.io all’API. Leggi la guida all’integrazione AI nella sezione Ask Clerk.io per saperne di più.

Usa la Sincronizzazione in Tempo Reale #

Questa funzionalità è opzionale 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 le importazioni del feed.

2. Traccia il comportamento #

L’AI di Clerk.io apprende il comportamento dei clienti attraverso gli ordini e l’attività sul sito web. Il tracciamento di questo comportamento è fondamentale per consentire all’AI di fare previsioni accurate e per mostrare le statistiche che dimostrano la sua efficacia.

Installa Clerk.js #

Clerk.io traccia i clic, le ricerche e gli ordini dal frontend per tre motivi chiave:

• Permettere all’AI di apprendere in tempo reale il comportamento dei clienti attraverso gli ordini.
• Analytics che mostra come gli ordini vengono migliorati da Clerk.
• Personalizzare diverse Recommendations sul sito.

Lo script di Clerk.js deve essere aggiunto assieme agli altri script nella sezione <head>, ed essere configurato con la chiave API pubblica che trovi su my.clerk.io.

Questo caricherà la libreria che genera ID visitatori anonimi e senza cookie e traccerà i clic 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 Contesto #

Usa Clerk Context per comunicare a Clerk.js quale prodotto, categoria o pagina l’utente sta visualizzando. Questo può personalizzare le Recommendations dei prodotti e aiutare Chat a capire quale pagina prodotto o categoria viene vista. Puoi anche passare il contesto del carrello a Chat in modo che capisca 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 pertinenti per 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 il Tracciamento delle Vendite #

Questa parte deve essere aggiunta alla tua pagina di conferma ordine. Ogni volta che viene effettuato un ordine, Clerk.js utilizzerà lo snippet per fare una chiamata API contenente le informazioni dell’ordine, incluso ciò su cui il visitatore ha cliccato durante la sessione che ha portato 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 personalizzare determinati banner.

Se utilizzerai Cross-Sell e/o Alternative products sulle tue pagine di dettaglio prodotto, Clerk utilizzerà questi per registrare i prodotti visualizzati dagli utenti.

In caso contrario, devi includere questo snippet nella pagina di dettaglio prodotto per tracciare anche le visualizzazioni dei prodotti:

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

3. Visualizza i risultati #

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

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

• Ospitati nel tuo codice sorgente come risultati embedded

Ospita su Clerk.io #

Ospitare i design su my.clerk.io offre la massima flessibilità, poiché puoi cambiare design, logiche e filtri senza dover modificare il codice onsite dopo l’installazione. Lo svantaggio è che i design vengono gestiti per ogni Store.

Esegui l’embedding dei risultati #

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

4. Aggiungi gli Elementi #

Questo viene fatto tramite snippet associati al tuo Element.

Inserisci sul Frontend #

Per inserire i risultati di Clerk, scegli un Element su my.clerk.io, configurarlo per usare un design che hai creato e copia lo snippet su una pagina dove vuoi mostrare i risultati.

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

Fa riferimento alle impostazioni del tuo Element, inclusi l’endpoint API/la logica dell’elemento, il design, il 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 dovrebbero essere configurati in base alla logica del tuo webshop per il recupero dei dati.

Un esempio è lo snippet Best Alternatives Recommendations, che richiede che venga aggiunto un ID prodotto allo snippet:

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

Altri necessitano semplicemente dell’aggiunta dello snippet alla pagina, con alcune opzioni di configurazione minime in base al 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à attivata la Best Practice come blocchi Element individuali, facilitando l’avvio.

Lo snippet cambierà a seconda della logica di prodotto scelta per l’Element, così puoi sempre vedere quali data-attribute sono necessari per la configurazione.