Qualsiasi (webshop)

Get Started

Clerk.js

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

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

Questa guida spiega come installare Clerk su una piattaforma personalizzata utilizzando Clerk.js. Questo è l’approccio consigliato perché si occupa di gran parte del lavoro pesante in termini di tracciamento e chiamate API.

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

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

Di seguito sono riportati i passaggi da seguire quando installi Clerk.

1. Sincronizza i dati #

Per prima cosa, è necessario inserire i dati all’interno affinché l’AI di Clerk.io comprenda il tuo webshop e possa iniziare a prevedere i risultati.

Crea uno Store #

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

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 completato la prima configurazione.

Crea i Feed #

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

Ecco le nostre best practice per la creazione dei feed:

  • Idealmente dovrebbero essere aggiornati una volta al giorno dalla tua parte.
  • Dovrebbero essere ospitati su un URL dove l’importatore di Clerk.io possa recuperarli. Ad esempio https://awesomestore.com/feed/clerk.json
  • Come base, i feed dovrebbero contenere sempre tutti i prodotti e le categorie disponibili, ma possono includere anche pagine (post del blog / articoli) e dati dei clienti.
  • Clerk utilizza gli attributi dei prodotti per la ricerca, il filtraggio e lo styling.
  • 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 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 entro 1 ora (ad esempio, tra le 2:59-3:59) se desideri che l’importatore venga eseguito a un orario specifico.

Utilizza la sincronizzazione in tempo reale #

Questa è 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 un’importazione e l’altra 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 affinché l’AI possa effettuare previsioni accurate e mostrare le statistiche che dimostrano l’efficacia della soluzione.

Installa Clerk.js #

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

  • Consentire all’AI di apprendere il comportamento dei clienti in tempo reale tramite gli ordini.
  • Analytics che mostrano come Clerk migliora gli ordini.
  • Personalizzare i vari Recommendations in tutto il sito.

Lo script Clerk.js deve essere aggiunto insieme agli altri script nella sezione <head> e configurato con la chiave Public API disponibile su my.clerk.io.

Questo caricherà la libreria che genera ID visitatori anonimi 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 il tracciamento delle vendite #

Questo dovrebbe essere aggiunto alla tua pagina di conferma ordine. Ogni volta che viene effettuato un ordine, Clerk.js utilizza lo snippet per effettuare una chiamata API contenente le informazioni sull’ordine, inclusi i click effettuati dal visitatore nella sessione prima dell’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 personalizzare certi banner.

Se utilizzerai Cross-Sell e/o prodotti alternativi nelle schede prodotto, Clerk userà questi dati per tracciare i prodotti visualizzati dai visitatori.

Se invece non è così, devi includere questo snippet sulla pagina del prodotto per tracciare anche le visualizzazioni prodotto:

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

Ospita in Clerk.io #

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

Includi i risultati nel codice #

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

4. Aggiungi gli snippet #

Questo viene fatto con snippet associati al tuo Content.

Inserisci nel frontend #

Per inserire i risultati Clerk, seleziona un Content su my.clerk.io, configurandolo per utilizzare un design creato da te, e copia lo snippet sulla pagina dove vuoi che i risultati vengano mostrati.

Clerk.js scansiona il codice sorgente per qualsiasi snippet con la classe clerk e utilizza i data-attributes per effettuare le chiamate API.

Fa riferimento alla configurazione del tuo Content inclusi endpoint API/logica del contenuto, 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 per Best Alternatives Recommendations, che richiede l’aggiunta dell’ID prodotto al 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 semplici opzioni di configurazione 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 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 hanno già la nostra Best Practice creata come singoli blocchi Content, rendendo più semplice iniziare.

Lo snippet cambierà in base alla Product Logic scelta per il Content, quindi puoi sempre vedere quali data-attributes occorre configurare.

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.