Any (webshop)

Get Started

Quando Clerk non dispone di un’estensione o di un’integrazione precostituita per una determinata piattaforma webshop, ci riferiamo ad essa come a piattaforma personalizzata.

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

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

Clerk.js è una libreria leggera che consente di configurare Clerk utilizzando un semplice Snippet HTML codice sorgente. Clerk.js scansiona la pagina alla ricerca di qualsiasi frammento con la classe “clerk” e lo usa per effettuare le chiamate API.

Questi sono i 4 passi da seguire durante l’installazione di Clerk:

Sincronizzazione dei dati
Tracciamento del comportamento
Visualizzazione dei risultati
Aggiungere i risultati al frontend

1. Sincronizzare i dati #

1.1 Configurare un archivio #

Ogni configurazione di Clerk è configurata su un Memorizzare in my.clerk.io. Questo contiene tutti i dati caricati e consente di interagire con essi attraverso la chiave API pubblica.
Se si devono configurare più webshop o domini, ognuno deve avere il proprio Negozio.
È possibile copiare la configurazione in nuovi negozi dopo aver effettuato la prima configurazione.

1.2 Creare feed di dati JSON #

Questa è la principale fonte di dati dal webshop a Clerk. Controllare le specifiche dei feed qui.
- Idealmente, i feed dovrebbero essere aggiornati una volta al giorno da parte vostra.
- I feed devono essere ospitati in un URL in cui l’importatore di Clerks possa recuperarli, ad es. https://awesomestore.com/feed/clerk.json
- Come base, i feed dovrebbero sempre contenere tutti i dati disponibili di prodotti e categorie, ma possono anche contenere dati di pagine (post di blog / articoli) e cliente.
- Alla prima importazione, si dovrebbe includere tutti gli ordini storici. Dopo la prima importazione, questi dati possono essere rimossi perché Clerk li mantiene nel database.
- Per prodotti, oltre a quelli richiesti, è possibile inviare qualsiasi altro attributo importante per la propria attività, come recensioni, colori, etichette, immagini splash, ecc.
- Clerk utilizza gli attributi dei prodotti per la ricerca, il filtraggio e lo styling.
Per impostazione predefinita, Clerk importa i feed almeno una volta al giorno.
È possibile configurare una finestra di 1 ora (ad esempio, tra le 2:59 e le 3:59) se si desidera che l’importatore venga eseguito a un orario specifico.

1.3 Aggiornamenti in tempo reale #

Questa opzione è facoltativa ma consigliata.
Se il webshop richiede aggiornamenti in tempo reale, come la rimozione di prodotti esauriti o l’aggiornamento dei prezzi, è possibile utilizzare la nostra API CRUD per aggiungere, aggiornare o rimuovere prodotti tra le importazioni dei feed.

2. Tracciare il comportamento #

2.1 Installare Clerk.js #

Clerk tiene traccia di clic, ricerche e ordini dal frontend per tre motivi chiave:
- Permettendo all’intelligenza artificiale di conoscere il comportamento dei clienti in tempo reale attraverso gli ordini.
- Analytics che mostra quali ordini sono stati influenzati da Clerk e quanto valgono in più
- Personalizzazione di varie raccomandazioni all’interno del sito
Lo script Clerk.js deve essere aggiunto insieme agli altri script nella sezione <head> e configurato con Chiave API pubblica che si trova in my.clerk.io.
In questo modo si caricherà la libreria che genera ID di visitatori anonimi e senza codice e si terrà traccia dei clic su qualsiasi prodotto mostrato da Clerk attraverso 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 -->

2.2 Aggiungere il tracciamento delle vendite #

Questo dovrebbe essere aggiunto al vostro pagina di successo dell’ordine.
Aggiornare i segnaposto per recuperare i dati corretti dagli ordini.
Ogni volta che viene effettuato un ordine, Clerk.js utilizzerà lo snippet per effettuare una chiamata API a Clerk contenente le informazioni sull’ordine.

 <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 registra anche i prodotti visualizzati dai visitatori, per personalizzarli in determinati banner.
Se si utilizzano prodotti Cross-Sell e/o Alternativi sul sito pagine di dettaglio del prodotto, Clerk li utilizzerà per registrare i prodotti visualizzati dai visitatori.
In caso contrario, è necessario includere questo snippet nella pagina dei dettagli del prodotto per registrare anche le visualizzazioni del prodotto:

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

3. Visualizzazione dei risultati #

Quando si usa Clerk.js, i progetti possono essere gestiti in due modi:
- ospitati in my.clerk.io utilizzando il nostro Design Editor o il codiceLiquid
- Ospitati nel vostro codice sorgente come risultati incorporati

L’hosting dei progetti in my.clerk.io offre la massima flessibilità, in quanto è possibile modificare i progetti, le logiche e i filtri senza modificare il codice sul sito dopo la configurazione. Lo svantaggio è che i progetti sono gestiti per ogni negozio.
L’hosting dei progetti nel codice sorgente offre la libertà di condividere i progetti tra più negozi, ma lo svantaggio è che non è possibile utilizzare il nostro sistema di contenuti per apportare modifiche ai risultati.

4. Aggiungere snippet al frontend #

Questo viene fatto con gli snippet di Contenuto in Clerk.js.
Per inserire i risultati di Clerk, scegliere un Contenuto in my.clerk.io, impostare un design creato da voi e copiare lo snippet nella pagina in cui deve essere mostrato. Esempi:

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

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

Lo snippet fa riferimento alla configurazione del Contenuto per la logica del prodotto, la quantità di prodotti da restituire, il design ecc. e restituisce un blocco HTML completo che viene inserito nello snippet.
Alcuni snippet richiedono dati aggiuntivi, come ID prodotto o ID categoria, che devono essere aggiunti.
Per impostazione predefinita, i nuovi negozi in Clerk vengono forniti con le nostre Best Practice già create come blocchi di contenuto individuali, il che rende facile iniziare.

Altre opzioni #

Per un’ampia panoramica della nostra piattaforma tecnica, compresa l’integrazione diretta con l’API, consultare questo articolo

Ci sono alcuni casi in cui un integrazione API lato server è meglio per voi, ad esempio quando:

Sostituzione di un’API esistente con Clerk
Gestione di regole di prezzo e cataloghi clienti complessi
Creazione di un’app

Se questi casi non si verificano, si consiglia di utilizzare Clerk.js.

Domini multipli #

In questo modo, è possibile separare i prodotti, le vendite, le valute ecc. per tenere traccia di ogni lingua.

Iniziate creando il vostro negozio principale e seguite la Guida all’installazione per collegare il vostro negozio a Clerk.io, e scegliete le Raccomandazioni e/o i Risultati di ricerca che volete visualizzare sul vostro negozio web.
Una volta terminata la configurazione iniziale, tornate alla pagina iniziale di my.clerk.io (cliccando sul logo Commesso.io nella pagina angolo in alto a sinistra del menu laterale) e poi cliccate su "+ Aggiungi nuovo negozio" l’ultima opzione dell’elenco a scorrimento (generalmente sotto il/i vostro/i negozio/i esistente/i e il nome della vostra società):

Nella pagina Aggiungi nuovo negozio, fare clic su Avanzato per visualizzare tutte le impostazioni.

Compilate i dettagli del vostro webshop e scegliete il vostro negozio principale dal menu a tendina Copia il contenuto di un negozio esistente, quindi fate clic su Aggiungi negozio. In questo modo i siti Contenuto e Designs verranno trasferiti dal vostro negozio principale.

Ora è possibile seguire nuovamente la Guida all’installazione, per attivare Commesso.io facendo clic su Come iniziare, per Sincronizzazione dei dati per questa lingua.

Quando Sincronizzazione dei dati ha terminato, il vostro webshop è pronto e utilizza la stessa configurazione del vostro negozio principale.

Ricordate di tradurre anche Titoli di giornale, in Contenuto-> Modifica -> Seleziona progetto nella lingua giusta.

Potete seguire questa procedura per tutte le lingue del webshop con cui volete usare Commesso.io.

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