clerk.io

Quando Clerk non dispone di un’estensione o di un’integrazione precostituita per una determinata piattaforma webshop, si parla di 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, poiché si occupa di gran parte del lavoro pesante in termini di tracciamento e chiamate API.

Clerk.js è una libreria leggera che consente di impostare Clerk utilizzando semplici snippet HTML nel codice sorgente. Clerk.js scansiona la pagina alla ricerca di qualsiasi snippet con la classe “clerk” e lo utilizza per effettuare chiamate API.

Questi sono i 4 passi da seguire per installare Clerk:

Sincronizzare i dati
Traccia il comportamento
Visualizzazione dei risultati
Aggiungere i risultati al frontend

1. Sincronizzazione dei dati #

1.1 Configurare un negozio #

Ogni configurazione di Clerk è configurata su un Store in my.clerk.io. Questo contiene tutti i dati caricati e consente di interagire con esso attraverso la chiave API pubblica.
Se si devono configurare più webshop o domini, ognuno deve avere il proprio Store.
È possibile copiare la configurazione nei 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. Consultare le specifiche di per i feed qui.
- I feed dovrebbero essere aggiornati idealmente una volta al giorno dal vostro lato
- I feed devono essere ospitati in un URL in cui l’importatore di Clerks possa 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 contenere pagine (post di blog/articoli) e dati di clienti.
- Alla prima importazione, è necessario includere tutti gli ordini storici. Dopo la prima importazione, questi possono essere rimossi poiché Clerk li conserva nel database.
- Per i 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 stile.
Per impostazione predefinita, Clerk importerà i feed almeno una volta al giorno.
È possibile configurare una finestra di un’ora (ad esempio, tra le 2:59 e le 3:59) se si desidera che l’importatore venga eseguito a un’ora specifica.

1.3 Aggiornamenti in tempo reale #

Si tratta di un’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. Tracciamento del comportamento #

2.1 Installare Clerk.js #

Clerk tiene traccia di clic, ricerche e ordini dal frontend per tre motivi chiave:
- Permettere all’intelligenza artificiale di conoscere il comportamento dei clienti in tempo reale attraverso gli ordini.
- Analisi che mostrano 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 la 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 monitoraggio delle vendite #

Questo dovrebbe essere aggiunto alla vostra 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 Cross-Sell e/o prodotti alternativi nelle pagine di dettaglio del prodotto, Clerk li utilizzerà per registrare i prodotti visualizzati dai visitatori.
In caso contrario, è necessario includere questo snippet nella pagina di dettaglio del prodotto per registrare anche le visualizzazioni del prodotto:

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

3. Visualizzare i 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 Codice liquido
- Ospitati nel 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 in loco dopo la configurazione. Lo svantaggio è che i progetti sono gestiti per singolo negozio.
Ospitare i progetti nel proprio 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 gli snippet al frontend #

Questo viene fatto con gli snippet Content in Clerk.js.
Per inserire i risultati di Clerk, scegliete un Contenuto in my.clerk.io, impostate un design che avete creato e copiate 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 una panoramica completa della nostra piattaforma tecnica, compresa l’integrazione diretta con l’API, consultare questo articolo.

Ci sono alcuni casi in cui un’integrazione API serverside è migliore per voi, ad esempio quando:

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

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 scegliere le raccomandazioni e/o i risultati della ricerca che desiderate visualizzare sul vostro negozio web.
Una volta terminata la configurazione iniziale, tornate alla pagina iniziale di my.clerk.io (facendo clic sul logo Clerk.io nell’angolo in alto a sinistra del menu laterale_) e quindi fate clic su "+ Aggiungi un nuovo negozio “ l’ultima opzione dell’elenco a scorrimento (in genere sotto i vostri negozi esistenti e il nome della vostra azienda).:

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

 4\. Compilate i dettagli del vostro webshop e scegliete il vostro negozio principale dalla schermata

Copia del contenuto da un negozio esistente, quindi fare clic su Aggiungi negozio.

     In questo modo verranno trasferiti i **Contenuti** e i **Design** del negozio principale.

 5\. Ora è possibile seguire di nuovo la Guida all'installazione per **attivare** [**Clerk.io**](http://Clerk.io) facendo clic su **Iniziare**, per **Sincronizzare i dati** per questa lingua.

6\. Quando la **Sincronizzazione dei dati** è terminata, il vostro negozio web è pronto e utilizza la stessa lingua.

     configurazione del negozio principale.

Ricordarsi di tradurre anche Headlines, in Content-> Edit -> Select Design nella lingua giusta.

È possibile seguire questa procedura per tutte le lingue del negozio web con cui si desidera utilizzare Clerk.io.

Get Started