Any (webshop)

Get Started

Clerk.js

Quando Clerk non ha un’estensione o integrazione predefinita per una determinata piattaforma di webshop, ci riferiamo ad essa come a una 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 poiché si occupa di gran parte del lavoro pesante in termini di tracciamento e chiamate API.

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

Clerk.js è una libreria leggera che consente di impostare Clerk utilizzando semplici snippet HTML nel codice sorgente. Clerk.js scansionerà la pagina per eventuali 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 #

Innanzitutto, devi ottenere dati in modo che l’IA di Clerk.io comprenda il tuo webshop e possa iniziare a prevedere i risultati.

Crea Negozio #

Ogni configurazione di Clerk è configurata su un Negozio in my.clerk.io. Questo conterrà tutti i dati che carichi e ti permetterà di interagire con essi tramite la sua chiave API pubblica.

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

Puoi copiare la tua configurazione in nuovi Negozi dopo aver effettuato la prima configurazione.

Crea Feed #

Questa è la principale fonte di dati dal webshop a Clerk. Controlla la specifica per i feed qui.

Queste sono le nostre migliori pratiche per creare i feed:

  • Dovrebbero idealmente essere aggiornati una volta al giorno da parte tua.
  • Dovrebbero essere ospitati a un URL da cui l’importatore di Clerk.io può recuperarli. ad es. https://awesomestore.com/feed/clerk.json
  • Come base, i feed dovrebbero sempre contenere tutti i prodotti e categorie disponibili, ma possono anche contenere pagine (post del blog / articoli) e dati clienti.
  • Clerk utilizza attributi di prodotto per cercare, filtrare e stilizzare.
  • Al primo import, dovresti includere tutti gli ordini storici. Dopo il primo import, questi possono essere rimossi poiché Clerk li conserva nel database.
  • Per i prodotti, oltre a quelli richiesti, puoi inviare qualsiasi altro attributo che sia importante per la tua attività, come recensioni, colori, etichette, immagini di copertura ecc.
  • Per impostazione predefinita, Clerk importerà i feed almeno una volta al giorno.
  • Puoi configurare una finestra di un’ora (ad es., tra le 2:59 e le 3:59) se desideri che l’importatore venga eseguito a un orario specifico.

Usa la Sincronizzazione in Tempo Reale #

Questo è facoltativo ma consigliato.

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

2. Traccia il Comportamento #

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

Installa Clerk.js #

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

  • Permettere all’IA di apprendere il comportamento dei clienti in tempo reale attraverso gli ordini.
  • Analisi che mostra come gli ordini siano migliorati grazie a Clerk.
  • Personalizzazione di varie Raccomandazioni in tutto il sito.

Lo script Clerk.js dovrebbe essere aggiunto con i tuoi altri script nella sezione <head>, e configurato con la Chiave API Pubblica trovata in my.clerk.io.

Questo caricherà la libreria che genera ID visitatori anonimi senza cookie e traccerà i clic su qualsiasi prodotto mostrato da Clerk attraverso gli snippet.

<!-- Inizio dello strumento di personalizzazione E-commerce di Clerk.io - 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>
<!-- Fine dello strumento di personalizzazione E-commerce di Clerk.io - www.clerk.io -->

Aggiungi Tracciamento delle Vendite #

Questo dovrebbe essere aggiunto alla tua pagina di successo dell’ordine. Ogni volta che viene effettuato un ordine, Clerk.js utilizzerà lo snippet per effettuare una chiamata API contenente le informazioni sull’ordine, inclusi i prodotti su cui il visitatore ha cliccato nella 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 personalizzare alcuni banner.

Se utilizzerai prodotti Cross-Sell e/o Alternativi sulle tue pagine di dettaglio prodotto, Clerk li utilizzerà per registrare i prodotti visualizzati dai visitatori.

In caso contrario, devi includere questo snippet sulla pagina di 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:

Ospita in Clerk.io #

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

Incorpora risultati #

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

4. Aggiungi Snippet #

Questo viene fatto con snippet associati al tuo Contenuto.

Inserisci nel Frontend #

Per inserire i risultati di Clerk, scegli un Contenuto in my.clerk.io, configurarlo per utilizzare un design che hai creato e copiare lo snippet in una pagina dove i risultati dovrebbero essere mostrati.

Clerk.js scansiona il codice sorgente per eventuali snippet con la classe clerk e utilizza gli attributi data per effettuare chiamate API.

Fa riferimento alle impostazioni del tuo Contenuto, inclusi l’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 dovrebbero essere configurati in base alla logica del tuo webshop per recuperare i dati.

Un esempio di questo è lo snippet delle Migliori Raccomandazioni Alternative, che richiede un ID prodotto da aggiungere allo snippet:

<!--Migliori Raccomandazioni Alternative-->
<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 di Ricerca Istantanea, che richiede un selettore CSS per l’input di ricerca e il numero di suggerimenti e categorie da visualizzare:

<!--Ricerca Istantanea-->
<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 Negozi in Clerk vengono forniti con le nostre Migliori Pratiche già create come blocchi di Contenuto individuali, rendendo facile iniziare.

Lo snippet cambierà a seconda della Logica di Prodotto scelta per il Contenuto, quindi puoi sempre vedere quali attributi data sono richiesti per la tua configurazione.

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