Qualsiasi (webshop)

FAQ

Risposte alle domande frequenti per integrazioni personalizzate

App a pagina singola (SPA) #

Queste sono chiamate anche Progressive Web Apps (PWA) e generalmente caricano il sito come una singola pagina, invece di caricare singole pagine come di norma.

Quando una pagina viene caricata per la prima volta, la libreria Clerk.js automaticamente esegue una funzione per renderizzare tutti i blocchi di Content su quella pagina.

Tuttavia, per le app a pagina singola che usano framework come vue.js o next.js, le pagine sono renderizzate tramite JavaScript invece che con un normale caricamento di pagina. Per questo motivo, è necessario controllare il rendering con Clerk.js in modo che corrisponda a come carichi le pagine nell’app.

Includi Clerk.js #

Clerk.js deve essere caricato solo una volta, quando il sito viene caricato inizialmente. Dopo ciò, la libreria sarà disponibile per tutta la sessione. Includila appena prima di </head> nel tuo HTML:

<!-- 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_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Controlla il rendering #

Per impostazione predefinita, Clerk.js renderizza qualsiasi elemento che ha la classe clerk, indipendentemente dal fatto che sia stato inserito durante il caricamento iniziale della pagina o quando il DOM viene modificato. Puoi controllare il momento in cui effettuare il rendering inserendo l’elemento quando è pronto per essere renderizzato.

In alternativa, puoi controllare il rendering con la funzione Clerk("content", "SELECTOR").

Ogni volta che una pagina viene caricata, segui questi passaggi nell’ordine:

Aggiungi lo snippet Clerk nell’HTML con un selettore univoco che puoi utilizzare.
Esegui Clerk("content", "SELECTOR") per renderizzarlo.

Quando il visitatore lascia la pagina, elimina lo snippet e renderizzalo nuovamente se il visitatore ritorna sulla stessa pagina. Questo assicura che Clerk.js non consideri lo snippet come già renderizzato, impedendone la visualizzazione.

Esempio:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Clerk.js può anche essere configurato per inizializzare automaticamente Content con i tuoi selettori personalizzati dopo la prima volta che lo renderizzi.

Impatto su Pagespeed #

Aggiungere uno strumento esterno come Clerk.js aumenterà il tempo necessario per caricare il tuo sito, ma è trascurabile rispetto alle conversioni aggiuntive che offrirà. Qui sotto puoi vedere come impatta sulle prestazioni del tuo sito.

Prestazioni #

La libreria Clerk.js pesa solo 37,5kb, quindi si carica molto rapidamente. Inoltre, carica gli elementi in modo asincrono, il che significa che il resto della pagina si carica mentre Clerk.js rende il contenuto.

Un aumento del tempo di caricamento di una pagina deriva spesso dal caricamento di più immagini rispetto a prima, poiché i risultati di Search e Recommendations di Clerk funzionano meglio quando sono visivamente accattivanti.

Per minimizzare il tempo di caricamento extra, consigliamo di usare immagini in formato webp che abbiano una risoluzione corrispondente alla dimensione che avranno negli elementi Clerk.

Ad esempio, se le immagini nei Recommendations hanno una risoluzione di 400x400px nella visualizzazione desktop, invia immagini con una risoluzione massima di 420x420px o simile.

Google Page Speed #

Se usi Google Page Speed Insights o un tool simile per analizzare le prestazioni del tuo sito, potresti vedere Clerk.js elencato sotto Leverage browser caching.

Lo scopo di Clerk.js è rendere super semplice inserire i risultati da Clerk.io in qualsiasi sito Web. Clerk.js include molte funzionalità per gestire il tracciamento e i componenti UI come Instant Search, slider, popup e altro.

Quando aggiungiamo nuove funzionalità UI o miglioriamo quelle già esistenti, esse vengono incluse in Clerk.js e devono essere scaricate dall’utente finale per poterle utilizzare.

Impostare una scadenza della cache di 60 minuti significa che quando rilasciamo nuove funzionalità saranno disponibili per tutti entro un massimo di 60 minuti. Più lunga è la durata della cache, più tempo serve prima che tutti abbiano accesso alle funzionalità più recenti.

La cosa importante è che gli utenti finali devono scaricare Clerk.js solo una volta quando sono disponibili nuove funzionalità.

La scadenza della cache di 60 minuti significa semplicemente che il browser dell’utente finale controllerà con Clerk.io ogni 60 minuti. Se non sono state apportate modifiche a Clerk.js, non verrà scaricato nulla.

Il tempo di scadenza della cache di 60 minuti è quindi un compromesso tra la minimizzazione delle richieste web e la distribuzione di nuove funzionalità e miglioramenti. La maggior parte delle sessioni dura meno di 60 minuti e quindi la richiesta verrà effettuata solo una volta a sessione.

Come puoi vedere nello screenshot, questa è una pratica normale che (come Clerk.io) è usata da Google Analytics, Facebook, Trustpilot e molti altri.

Impatto CLS #

Il Cumulative Layout Shift (CLS) può influire negativamente su SEO ed esperienza utente quando contenuti inseriti dinamicamente spostano gli elementi su una pagina. In alcuni casi, tra diversi fattori, Clerk può contribuire al punteggio CLS. Puoi leggere di più sul CLS qui.

Segui questa linea guida solo se il tuo punteggio CLS è superiore a 0.2 e gli elementi Clerk sono above the fold.

Per evitare lo spostamento dei contenuti, è necessario riservare un placeholder per le Recommendations di Clerk prima che Clerk.js li inietti. Per farlo, occorre aggiungere un’altezza minima basata sull’altezza prevista del contenuto.

Esempio di codice:

.clerk-slider-wrapper {
    min-height: 300px; /* Regola in base all’altezza prevista del contenuto */
    width: 100%;
}

Eseguire chiamate API #

Puoi usare Clerk.js per eseguire chiamate API, utilizzando la funzione integrata Clerk("call").

Questa funzione prende 3 argomenti:

Un endpoint API
Un dizionario JSON di parametri
Una funzione di callback per gestire la risposta

Richieste #

Qui sotto trovi uno script di esempio che richiede i 10 prodotti più popolari e registra la risposta nella console. La risposta contiene un oggetto JavaScript con lo stato della chiamata API e il risultato.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Home Page / Bestsellers"]
    },
    function(response){
      console.log(response);
    },
    function(response){
      console.error(response);
    }
  );
}

Risposta #

__clerk_cb_1(
  {
   "status":"ok",
   "count":72,
   "facets":null,
   "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Callback #

Quando esegui chiamate API, puoi usare funzioni di callback per gestire la risposta come preferisci. Le funzioni prendono response come argomento che contiene tutti i dati restituiti dall’API.

Qui sotto un esempio che crea una lista di elementi HTML che linkano a categorie che corrispondono alla query “men”.

Clerk("call",
  "search/categories",
  {
      'query': "men",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Related Categories';
          document.querySelector('#your-target').append(heading);
      }
      for (var index in cat) {
          var clerkName = cat[index].name;
          var clerkUrl = cat[index].url;
          let link = document.createElement('a');
          link.href = clerkUrl;
          link.textContent = clerkName;
          document.querySelector('#your-target').append(link);
      }
  }
)

Pulsanti “Aggiungi al carrello” #

Questi pulsanti funzionano in modo diverso su ogni piattaforma e la funzionalità può cambiare in base ai plugin usati. Poiché i design di Clerk sono costituiti da HTML & CSS, normalmente puoi aggiungere questa funzionalità se comprendi come funziona sul tuo sito.

Approccio generale #

Alcuni pulsanti di aggiunta al carrello richiedono l’esecuzione di Javascript per funzionare. In questi casi, puoi aggiungere la funzionalità al metodo cart esistente di Clerk. Guarda come fare nei nostri developer docs qui.

Ispeziona il pulsante aggiungi al carrello per identificare il codice associato, ad esempio su una pagina categoria. Il codice sarà solitamente un elemento <div> o un elemento button. Copia l’intero HTML del pulsante.

Copia e incolla questo codice nel tuo Design. Ora identifica le variabili nel codice. Più spesso, devi trovare dove il codice usa:

ID prodotto
Quantità prodotto

Sostituisci i valori per l’ID prodotto con le variabili Liquid corrispondenti. L’ID sarà sempre {{ product.id }} e la quantità varierà a seconda di come invii i dati. In questo esempio potrebbe essere {{ product.qty }}.

Incolla il codice nell’HTML del Design e testalo per assicurarti che funzioni.

Esempio #

Il pulsante aggiungi al carrello qui sotto è un <div> che ha la classe button-container:

La quantità si trova all’interno del link del carrello dopo /cart?add= e l’ID prodotto si trova subito dopo &id_product=.

L’ID prodotto è anche referenziato in data-id-product e la quantità in .data-minimal_quantity

Questi valori vanno sostituiti con i tag Liquid nel Design in modo che i corretti ID prodotto e quantità vengano usati nell’HTML generato.

Con queste modifiche, il pulsante aggiungi al carrello finale apparirà così:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Add to Cart" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Errori comuni nella console #

Clerk.js registra molti errori nella console, che puoi usare per effettuare il debug dei problemi.

Cliccando sul link dell’errore otterrai maggiori informazioni su cosa è andato storto, che puoi usare per il debug autonomo o inviare al nostro supporto che ti aiuterà. Sotto trovi una lista degli errori più comuni.

LogicalError: Unknown content #

Questo errore compare se lo snippet inserito fa riferimento a un Content che non esiste, nell’attributo data-template.

Per correggere, assicurati che il nome nel codice di incorporamento corrisponda a un blocco Content creato in my.clerk.io.

Puoi cliccare su Edit Content per qualsiasi Content per vedere quale riferimento utilizzare.

AuthenticationError: Invalid API endpoint #

Questo errore si verifica se hai usato la classe clerk nel tuo HTML da qualche parte. Questa classe è riservata per i nostri snippet, poiché Clerk.js la usa per identificare gli elementi da renderizzare.

Per correggere, rinomina la classe, ad esempio in clerk-product.

ParsingError: Invalid type of argument product #

Questo errore significa che l’ID fornito per un prodotto ha un tipo o una sintassi errati.

Ad esempio, se i tuoi ID prodotto sono interi, devono essere tali anche nel codice di incorporamento. Ricorda anche le parentesi intorno all’ID per farne una lista.

<span 
  class="clerk" 
  data-template="@product-page" 
  data-products="[123]">
</span>

ParsingError: Invalid type of argument category #

Questo errore significa che l’ID fornito per una categoria ha un tipo o una sintassi errati.

Nella maggior parte dei casi, succede se il placeholder nell’embedcode della categoria non è stato sostituito da un ID reale:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="INSERT_CATEGORY_ID">
</span>

L’output del codice deve invece contenere l’ID della categoria:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Se hai copiato lo snippet manualmente, assicurati di selezionare il tuo sistema shop nel menu a discesa Choose your platform prima di copiare lo snippet. Verrà così adattato alla logica della tua piattaforma per selezionare il corretto ID categoria.

Se la tua piattaforma non è elencata, aggiungi manualmente la logica per selezionare il corretto ID categoria in base alla funzionalità del tuo shop online.

AuthenticationError: Incorrect public API key #

Questo errore compare se la chiave API pubblica che hai fornito non corrisponde ad alcun account in Clerk.io.

Per correggere, accedi a my.clerk.io, e vai a Developers > API Keys. Qui trovi la Public API Key che puoi aggiungere nello script di tracking Clerk.js direttamente nel codice o nelle impostazioni per la tua integrazione, a seconda della piattaforma.

Invio di dati di vendita da un sistema POS/ERP #

Per alcuni e-commerce è rilevante caricare dati di vendita provenienti da altri sistemi oltre allo shop, ad esempio se vuoi ottimizzare l’algoritmo in base alle vendite di un negozio fisico o di un negozio B2B.

Clerk.io non differenzia gli ordini provenienti da diverse fonti - fintanto che puoi fornire un ID, un timestamp e una lista di prodotti acquistati, possono essere caricati su Clerk.io.

L’approccio consigliato è usare la API CRUD che permette di automatizzare completamente il compito. Implementando queste chiamate API, puoi inviare dati ordini direttamente al tuo Store su Clerk.io.

Crea semplicemente una chiamata POST all’endpoint /orders nel tuo sistema ERP o e-commerce, esegui il job a intervalli regolari, ad esempio una volta al mese, e potrai usare gli ordini offline per migliorare Recommendations e risultati Search online.

In alternativa, puoi caricare un file CSV manualmente, senza bisogno di codificare nulla. Puoi leggere più informazioni sui file CSV qui.

Conversione di valuta #

Ci sono diversi modi di gestire la conversione di valuta in Clerk.io. Qui di seguito un metodo semplice.

Invia oggetti prezzo #

Clerk ha bisogno di conoscere i prezzi di ogni prodotto nelle diverse valute. Il modo più semplice per farlo è inviarli come oggetto JSON codificato come stringa di prezzi formattati, con la ISO valuta come chiave, nel tuo Data Feed.

"products": [
  {
    "id": 1,
    "name": "Cheese",
    "description": "A nice piece of cheese.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "on_sale": true,
    // String-encoded JSON examples
    "prices_formatted": '{"USD":"$100", "EUR":"€87.70", "GBP":"£68.68"}',
    "list_prices_formatted": '{"USD":"$120", "EUR":"€97.70", "GBP":"£78.68"}'  
  },
  {
    "id": 2,
    "name": "A pound of nuts",
    "description": "That's a lot of nuts!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "on_sale": false,
    // String-encoded JSON example
    "prices_formatted": '{"USD":"$150", "EUR":"€142", "GBP":"£120"}' ,
    "list_prices_formatted": '{"USD":"$150", "EUR":"€142", "GBP":"£120"}'
  }
]

Crea un formattatore #

In Clerk.js puoi definire funzioni JavaScript da usare con i tuoi Design.

Qui puoi definire una funzione che prende il tuo price-dict come argomento, e restituisce il prezzo per una specifica valuta, sulla base della logica frontend che preferisci.

Assicurati di sostituire currency con la valuta attualmente selezionata dal frontend.

Clerk('config', {
  key: 'Your_API_Key',
  formatters: {
      currency_selector: function (price_list) {
      const currency = "EUR";
      price_groups_obj = JSON.parse(price_list)
        return price_groups_obj[currency];
      }
  }
});

Usa il formattatore #

Dopo aver definito il formatter, puoi usarlo nel tuo design con la sintassi seguente:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Prezzi specifici per cliente #

Per mostrare prezzi completamente unici in base a quale cliente è loggato, crea un Event in Clerk.io che inserisce il prezzo corretto prima che i prodotti vengano renderizzati.

Events sono funzioni Javascript che vengono eseguite prima o dopo che Clerk.io mostra i prodotti.

Questo metodo è utilizzabile se puoi recuperare i prezzi dal tuo server direttamente da una funzione Javascript, nel frontend in base a product ID e customer ID.

Per mostrare prezzi individuali per cliente, il codice deve essere eseguito subito dopo la risposta.

Qui sotto un esempio di evento semplice.

<span class="clerk" data-template="@home-page-popular"></span>

<script>
  Clerk('on', 'response', function(content, data) {
     console.log(data.result);
  });
</script>

La funzione accetta l’argomento data, che è l’intera response che Clerk.io restituisce dall’API.

Prezzi individuali per cliente #

Se hai bisogno di mostrare prezzi completamente unici in base a quale cliente è loggato, devi impostare un Event che inserisce il prezzo corretto dopo che i prodotti sono stati renderizzati.

Gli eventi sono funzioni Javascript che vengono eseguite prima o dopo che Clerk.io mostra i prodotti.

Questo approccio presuppone che tu possa recuperare i prezzi dal tuo server con una chiamata AJAX nel frontend, ad esempio tramite product ID e customer ID.

Il modo migliore è prima creare un contenitore placeholder per il prezzo nel tuo design e poi sostituirlo con il prezzo restituito dalla chiamata AJAX.

Un esempio:

<div class="clerk-price-container">
   <span class="clerk-price">
      Loading price...
   </span>
</div>

Puoi poi usare l’evento Clerk per aspettare che i prodotti siano renderizzati, effettuare la richiesta al server prezzo usando il product ID e l’ID del cliente, prima di sostituire il valore nell’HTML.

Un esempio di come farlo:

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, data){
    for (i = 0; i < data.product_data.length; i++) {
        var product = data.product_data[i];
          var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
          let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
          price_container.innerText = custom_price;
      }
  })
  </script>

Il codice sopra presuppone che tu possa identificare un cliente loggato con INSERT_CUSTOMER_ID e che tu abbia una funzione come FETCH_PRICE_FROM_SERVER che ritorna il prezzo per prodotto in base al cliente.

price_container serve a individuare il prodotto giusto via ID presente in data-clerk-product-id, che Clerk.js aggiunge a tutti i prodotti.

Infine viene sostituito il testo interno, “Loading price…” in questo esempio, con il prezzo restituito dalla chiamata AJAX.

Prezzi per gruppi cliente #

La configurazione dei prezzi per gruppi cliente consiste in 4 passaggi:

Includi i diversi prezzi nel data feed
Includi una variabile che recupera l’attuale customer group ID
Crea una funzione per recuperare il prezzo corretto
Mostra il prezzo nel Design

Includi gli oggetti prezzo #

Inizia aggiungendo un attributo a tutti i prodotti che contiene tutte le diverse opzioni di prezzo, assicurandoti di correlare ogni prezzo a un particolare gruppo cliente.

Questo va inviato come oggetto JSON codificato come stringa. Ad esempio:

"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"

Variabile Customer ID #

Aggiungi a Clerk.js una variabile globale dinamica che recupera l’ID del gruppo cliente attuale e lo aggiunge come valore.

Il valore del Customer Group ID deve essere equivalente alla chiave del prezzo corrispondente nel Data Feed. Ad esempio, un utente che deve vedere il prezzo del gruppo 2, l’ID sarà “GROUP2”.

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

Recupera il prezzo #

Ora puoi creare un Formatter, che prende il customer_group come argomento e restituisce il prezzo corretto.

Fallo scrivendo una funzione che recupera il prezzo per il gruppo cliente specifico come chiave nel price-dict in base all’ID customer_group.

Aggiungilo nella config di Clerk.js. Qui sotto un esempio chiamato getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

Mostra il prezzo #

Quando il formatter final_price è stato creato, puoi utilizzarlo direttamente nel tuo Design, insieme alla lista customer_group_prices creata al passaggio 1:

<li style="text-align: center; width: 180px;">
	<a href="{{ product.url }}">
		<img sre="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product | getPrice }}
	</div>
</li>

HTTP Auth Syncing #

Spesso l’autenticazione HTTP viene usata su siti di staging per evitare visitatori indesiderati.

Questo, in molti casi, bloccherà anche l’importer di Clerk e normalmente mostrerà un errore 401 Unauthorized nei log di sincronizzazione.

Puoi facilmente verificare l’importer inserendo i dati di autenticazione nell’URL di import come qui sotto, in Data > Configuration su my.clerk.io:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Nessun ordine tracciato #

Clerk.io deve tracciare continuamente le vendite dall’e-commerce per mantenere aggiornati i risultati in base al comportamento dei clienti. Tuttavia, alcune impostazioni dello shop possono causare errori nel tracciamento delle vendite.

Qui sotto, scopri come effettuare il debug del tracciamento delle vendite con una configurazione Clerk.js e vedere i problemi e soluzioni più comuni.

Prima di iniziare #

Assicurati di aver installato:

Lo script di tracking di Clerk.js su tutte le pagine
Lo script di sales-tracking sulla pagina di conferma ordine.

Questi sono necessari per tracciare le vendite in generale usando Clerk.js.

Controlla i log #

Nella maggior parte dei casi, il tracciamento vendite fallisce a causa di errori negli ID visitatore o prodotto della chiamata di vendita inviata a Clerk dopo il completamento dell’ordine. Per fare debug, devi eseguire un ordine di test.

In alcuni casi, però, potrebbe dipendere dallo script di tracciamento stesso e poter essere identificato guardando i log in my.clerk.io > Developers > Logs.

Se il tracciamento vendite fallisce per un errore nello script, spesso vedrai l’errore nella pagina. Clicca su Details per vedere di più.

Se non vedi errori nei log, il modo più semplice per identificare altri problemi di sales-tracking è fare un ordine di test.

Debug degli ordini di test #

In questo esempio usiamo Chrome per mostrare come fare debug del tracciamento vendite con un ordine di test, ma altri browser hanno funzionalità simili.

Sul tuo sito, metti alcuni prodotti nel carrello.
Procedi al Checkout.
Prima di effettuare l’ordine, apri la Console del browser.
Trova Network e cerca “clerk”.
Effettua l’ordine per arrivare alla pagina di conferma ordine.
Clicca sulla chiamata che inizia con sale (di solito sale?key=…).

Qui vedrai i dati inviati e ricevuti dall’endpoint API di tracciamento vendite. Clicca su Preview per identificare eventuali errori che possono impedire di tracciare le vendite.

Qui sotto ci sono errori comuni sul tracking delle vendite.

Invalid Syntax In Argument: products #

Questo errore si verifica se gli ID prodotto inviati hanno una sintassi errata. Gli errori più comuni sono:

Gli ID prodotto vengono inviati come stringhe nel tracking delle vendite ma su Clerk.io sono interi (o viceversa).
La lista degli ID prodotto contiene caratteri di formattazione testo invece di puro JSON: "products":\[\\"id"\\:\\"123-m"\\\].

Missing Argument X #

Questo significa che non vengono inviati tutti i dati necessari a Clerk.io per tracciare la vendita.

Assicurati di includere tutti gli attributi dati richiesti dal tracking delle vendite.

Nessuna chiamata effettuata #

Se non vedi la chiamata a sale anche con entrambi gli script installati, probabilmente Clerk.js non è stato caricato correttamente. Verifica così:

Apri la Console del browser
Digita “Clerk”.
Se Clerk.js non è stato caricato vedrai un ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Se è questo il caso, controlla la configurazione di Clerk.js:

Assicurati che Clerk.js sia installato su tutte le pagine.
Assicurati che non venga bloccato da altra funzionalità Javascript.

Nessun impatto Clerk #

Se tracci con successo le vendite su my.clerk.io, ma nessuna di queste risulta influenzata da Clerk.io, potresti avere un errore nell’impostazione del visitor-tracking / click-tracking.

Inizia assicurandoti che il visitor-tracking funzioni, facendo quanto segue:

Clicca su qualsiasi prodotto tramite Search o Recommendations di Clerk.io
Procedi a fare un ordine contenente quel prodotto
Accedi a my.clerk.io e vai su Order Details
Aspetta che l’ordine appaia.

Se il visitor-tracking funziona, vedrai il valore e l’impatto del prodotto aggiunto tramite Clerk.io, in Tracked Orders:

Se non vedi alcun value added per l’ordine fatto, le sezioni seguenti mostrano errori comuni che possono esserne causa.

API Setups #

Se imposti Clerk.io con un’integrazione custom via API, devi abilitare attivamente il visitor-tracking. Leggi come fare in questo articolo API.

ID prodotto errati #

Perché il visitor-tracking funzioni, il tracciamento click e quello delle vendite devono tracciare gli stessi ID prodotto che riceviamo con l’importer. Di solito se non funziona è perché stai tracciando gli ID delle varianti invece che quelli parent o l’SKU invece dell’ID.

Per verificare, procedi così:

In my.clerk.io, vai su Data > Orders e clicca l’ID di un ordine effettuato.
Se Clerk.io non individua il prodotto, vedrai un ID e un segnaposto image:
Vai a Data > Products e cerca il nome del prodotto aggiunto. Qui puoi vedere l’ID atteso per il prodotto.

Usa queste informazioni per impostare il sales-tracking sugli ID giusti.

Cambi ID visitatore #

Clerk.io usa un visitor ID per identificare ogni sessione, compresi i prodotti cliccati e acquistati. Per questo, gli ID dovrebbero restare uguali almeno per l’intera sessione, e possibilmente tra sessioni.

Questo visitor ID viene creato automaticamente se usi Clerk.js, ma se usi setup API o personalizzi gli ID, potresti cambiarli per errore.

Questo errore è raro ma puoi verificarlo così:

Apri le impostazioni Network del browser e filtra su “clerk”.
Controlla una chiamata undefined relativa a search o recommendations.
In payload puoi vedere l’attuale Visitor ID. Lo puoi vedere per tutte le chiamate relative a Clerk.io
Prosegui cliccando il prodotto e fai un ordine con quel prodotto.
Sulla Order Success page, controlla di nuovo in Network e trova la chiamata a sale?.
Assicurati che il campo visitor nel payload corrisponda all’ID visto al punto 3.

Se gli ID visitor non corrispondono, individua la causa del cambiamento. Un motivo comune sono gli script che rigenerano l’ID per ogni nuova pagina caricata. Aggiorna il codice per riutilizzare lo stesso visitor ID per ogni pagina.

Aggiorna a Clerk.js 2 #

Clerk.js 2 è una versione più veloce e flessibile della nostra libreria JavaScript che rende l’installazione di Clerk.io su ogni e-commerce molto semplice.

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, segui questi passaggi per aggiornare correttamente.

Le due principali differenze in Clerk.js 2 sono:

I Design in my.clerk.io utilizzano Liquid, ma possono anche essere facilmente creati col Design Editor.
Lo script deve essere inserito proprio prima del tag nel template del tuo e-commerce.

Crea i Design #

Poiché Clerk.js 2 adotta un approccio differente ai Design, devi crearne di nuovi.

Puoi creare i tuoi Design Clerk.js 2 ridisegnandoli nel Design Editor, oppure convertendo i tuoi vecchi Design in codice in Liquid, come spiegato nella guida qui sotto. Di seguito trovi una descrizione di come convertire i tuoi vecchi Design in codice in Liquid.

Opzione 1: Design con Design Editor #

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona un tipo di design diverso da Blank e dagli un nome. Consigliamo di aggiungere “V2” così è chiaro che stai usando design Clerk.js 2 per questo.
Nel Design Editor, clicca su uno degli elementi esistenti come nome, immagine, pulsante, ecc. per modificarlo, oppure aggiungi nuovi elementi al Design.
Fai clic su Publish Design quando hai finito e vai a Step 2 nella guida.
Infine, vai su Recommendations/Search > Elements e cambia il tuo Content Clerk.io per usare il nuovo Design, poi clicca su Update Content.
Questo farà sì che temporaneamente non appaiano sul tuo webshop, fino a quando non avrai inserito Clerk.js 2 come descritto più avanti in questa guida.

Opzione 2: Conversione dei Design #

Poiché Clerk.js 2 utilizza il più flessibile linguaggio template Liquid, è necessario convertire i Design in questo linguaggio.

Inizia andando su my.clerk.io >Recommendations/Search > Designs > New Design.
Seleziona Blank > Code e dagli un nome. Consigliamo di aggiungere “V2” così è chiaro che stai usando design Clerk.js 2 per questo.
Clicca su Create Design.
Otterrai così un design vuoto con Product HTML e CSS che puoi utilizzare.
Torna alla panoramica dei design e clicca su Edit Design per il tuo Design Clerk.js 1. Consigliamo di farlo in una nuova scheda così puoi copiare facilmente il codice.
Ora devi copiare il vecchio Design Clerk.js 1 nel tuo nuovo Design Clerk.js 2.
- Noterai che nel nuovo non c’è il Container Code.
- Questo perché Liquid utilizza i for loop per visualizzare tutti i prodotti.
- Copia il tuo vecchio Product HTML dentro il for-loop, il tuo vecchio Container Code intorno ad esso e copia anche il CSS.
Converti il Design nella sintassi di Liquid. La differenza principale è che i vecchi Design utilizzavano la sintassi {{ formatter attribute }} mentre la sintassi di v2 è {{ product.attribute | formatter }}.
Passa in rassegna tutti i tuoi attributi e modificali secondo il nuovo formato.
Se stai usando istruzioni {{#if}} o {{#is}}, devono essere convertite anch’esse. Usa la sintassi {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" e la classe :target dal container code nella versione Clerk.js 2, poiché non sono più supportati.
Di seguito un esempio di design Clerk.js 1 e la versione completamente convertita:

Clerk.js 1 Design #

// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- Questo codice crea lo slider tramite il suo ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Clerk.js 2 Design #

<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

Ora clicca su Update Design per salvare le modifiche.
Infine, vai su Recommendations/Search > Elements e cambia il tuo Content block per usare il nuovo Design.
Clicca su Update Content. Questo farà sì che temporaneamente non appaiano sul tuo webshop, fino a quando non avrai completato Step 2. Scegli il nuovo Design per tutti i Content che vuoi aggiornare.

Sostituisci lo script #

Inizia localizzando il file template utilizzato per mostrare tutte le pagine del webshop, dove lo script originale Clerk.js si trova vicino al fondo.
Rimuovi il vecchio script Clerk.js dal file. Dovrebbe essere simile a questo:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Vai su my.clerk.io > Developers > Tracking Code. Qui troverai il codice Clerk.js 2.
Copia questo codice, inseriscilo subito prima del tag </head> nel template, poi salva.

Congratulazioni! Ora stai utilizzando la versione migliorata Clerk.js 2! Puoi consultare la documentazione completa per Clerk.js 2 qui.

Gestione di require.js #

Questa sezione si applica solo usando Clerk.js 1.

In alcune configurazioni, Require.js impedisce il caricamento di Clerk.js, il che significa che non verranno mostrati né slider né risultati di search. In questi casi, nel console apparirà il seguente errore:

Uncaught ReferenceError: Clerk is not defined

Ci sono due modi per gestire Require.js. Entrambi gli approcci richiedono modifiche al tracking-script, che hai inserito in fondo a tutte le pagine.

Includere “clerk” in Require.js #

L’approccio migliore è tentare di far riconoscere Clerk.io a Require.js.

Puoi farlo inserendo require(\['clerk'\], function() {}); in fondo al tracking script:

Ignorare Require.js #

Se la soluzione sopra non funziona, è possibile ignorare Require.js.

Puoi farlo inserendo window.__clerk_ignore_requirejs = true; in cima al tracking script:

Dopo aver utilizzato uno di questi approcci, Require.js sarà ora compatibile con Clerk.io.

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