Qualsiasi (webshop)

Get Started

Clerk.js

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

La principale differenza è 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 raccomandato perché gestisce gran parte delle operazioni complesse relative a tracciamento e chiamate API.

Se preferisci configurare Clerk.io tramite la nostra API, consulta 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 eseguirai durante l’installazione di Clerk.

1. Sincronizza i dati #

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

Crea Store #

Ogni configurazione di Clerk è gestita su uno Store in my.clerk.io. Questo conterrà tutti i dati caricati e consentirà di interagire tramite la sua Public API key.

Se hai bisogno di configurare più e-commerce o domini, ciascuno dovrebbe avere il proprio Store.

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

Crea i Feed #

Questa è la principale fonte di dati dal tuo e-commerce a Clerk. Consulta la specifica dei feed qui.

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

  • Idealmente dovrebbero essere aggiornati una volta al giorno dal tuo sistema.
  • Devono essere ospitati su un URL dal quale l’importer di Clerk.io possa recuperarli, ad es. https://awesomestore.com/feed/clerk.json
  • Come base, i feed devono sempre contenere 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 la personalizzazione dello stile.
  • Al primo import, dovresti includere tutti gli ordini storici. Dopo il primo import possono essere rimossi poiché Clerk li conserva 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 di 1 ora (ad es. tra 2:59-3:59) se desideri che l’importer venga eseguito in un momento specifico.

Utilizza la Sincronizzazione in Tempo Reale #

Questa è opzionale ma consigliata.

Se il tuo e-commerce necessita 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 gli import dei feed.

2. Traccia il Comportamento #

L’AI di Clerk.io apprende il comportamento dei clienti attraverso ordini e attività sul sito web. Tracciare questo comportamento è fondamentale affinché l’AI possa fare previsioni accurate e per mostrare le statistiche che dimostrano l’efficacia del sistema.

Installa Clerk.js #

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

  • Permettere all’AI di apprendere in tempo reale il comportamento dei clienti attraverso gli ordini.
  • Analisi che mostrano come Clerk migliora gli ordini.
  • Personalizzare le varie Recommendations sul sito.

Lo script di Clerk.js va aggiunto insieme agli altri script nella sezione <head> e configurato con la Public API Key reperibile in my.clerk.io.

Questo caricherà la libreria che genera ID visitatori anonimi, senza cookie e tracerà 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 va aggiunto alla pagina di conferma ordine. Ogni volta che viene effettuato un ordine, Clerk.js utilizzerà lo snippet per effettuare una chiamata API che contiene le informazioni dell’ordine, inclusi i prodotti cliccati nella sessione precedente.

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 traccia anche i prodotti visualizzati dai visitatori, per personalizzare determinati banner.

Se utilizzerai Cross-Sell e/o prodotti Alternativi nelle schede dettaglio prodotto, Clerk li userà per tracciare i prodotti visualizzati dai visitatori.

In caso contrario, devi includere questo snippet nella scheda dettaglio prodotto per tracciare anche la visualizzazione prodotti:

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

3. Visualizza i risultati #

Con Clerk.js, il design può essere gestito in due modi:

Ospita in Clerk.io #

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

Risultati embedded #

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

4. Aggiungi gli Snippet #

Questo si fa tramite snippet associati al tuo Element.

Inserisci nel Frontend #

Per inserire i risultati Clerk, scegli un Element in my.clerk.io, configuralo per utilizzare un design che hai creato e copia lo snippet nella pagina in cui vuoi mostrare i risultati.

Clerk.js analizza il codice sorgente per qualsiasi snippet con la classe clerk e utilizza gli attributi data 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 vanno configurati in base alla logica del tuo e-commerce per il recupero dati.

Un esempio è lo snippet Best Alternatives Recommendations, che richiede l’inserimento di un ID prodotto nello snippet:

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

Altri solo richiedono lo snippet nella pagina, con semplici opzioni di configurazione in base a come deve funzionare.

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 su Clerk vengono creati con le nostre Best Practice già impostate come singoli blocchi Element, in modo da facilitare la configurazione iniziale.

Lo snippet cambierà in base alla Product Logic scelta per l’Element, quindi puoi sempre vedere quali attributi data sono richiesti per la configurazione.

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