Installazione completa della piattaforma personalizzata

Scoprite tutti i passaggi necessari per l’installazione di Clerk su qualsiasi piattaforma

Platforms:

Custom Platform

Panoramica

Quando Clerk non dispone di un’estensione o di un’integrazione precostituita per una determinata piattaforma di 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 un feed JSON

Questa è la principale fonte di dati dal webshop a Clerk. Controllare le specifiche di per il feed qui.
- Il feed dovrebbe essere aggiornato, idealmente, una volta al giorno da parte vostra.
- Il feed deve essere ospitato in un URL in cui l’importatore di Clerks possa recuperarlo, ad esempio https://awesomestore.com/feed/clerk.json.
- Come base, il feed dovrebbe sempre contenere tutti i prodotti e le categorie disponibili, ma può anche contenere pagine (post di blog/articoli) e dati di clienti.
- Alla prima importazione, è necessario includere tutti gli ordini storici che, dopo la prima importazione, possono essere rimossi in quanto 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à il 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 (opzionale)

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. Comportamento di tracciamento

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=(d.location.protocol=='https:'?'https':'http')+'://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_PUBLIC_API_KEY_HERE'
    });
  </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 snippet di contenuti 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 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 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.