Any (webshop)

FAQ

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

Applicazioni a pagina singola (PWA) #

Queste applicazioni sono chiamate anche Progressive Web Apps (PWA) e generalmente caricano il sito come una singola pagina utilizzando i framework, invece di caricare le singole pagine come di consueto.

Quando una pagina viene caricata per la prima volta, la libreria Commesso.js automaticamente lancia una funzione per rendere tutti i blocchi di contenuto della pagina.

Tuttavia, per le applicazioni a pagina singola che utilizzano framework come vue.js o next.js, le pagine vengono rese con javascript anziché con un caricamento di pagina standard.

Per questo motivo, è necessario controllare il rendering con Clerk.js, in modo che corrisponda al caricamento delle pagine nell’applicazione a pagina singola.

Includere Clerk.js #

Clerk.js deve essere caricato solo una volta, quando il sito viene caricato inizialmente. In seguito, la libreria sarà disponibile per tutta la sessione. Includerla subito prima di </head> nel proprio 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 -->

Controllo del rendering #

Per impostazione predefinita, Clerk.js esegue il rendering di qualsiasi elemento che abbia la classe clerk, indipendentemente dal fatto che sia stato inserito durante il caricamento iniziale della pagina o quando il DOM muta. È possibile controllare la tempistica, inserendo l’elemento quando è pronto per essere reso.

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

Ogni volta che viene caricata una pagina, eseguire i seguenti passaggi in ordine:

Aggiungere lo snippet Clerk all’HTML. Assicurarsi che abbia un selettore univoco che si possa indirizzare.
Eseguire Clerk("content", "SELECTOR") per renderlo.

Quando il visitatore lascia la pagina, distruggere lo snippet, per assicurarsi di poterlo rendere di nuovo se il visitatore torna sulla stessa pagina. Questo per garantire che Clerk.js non veda lo snippet come precedentemente reso, causando la mancata visualizzazione.

Esempio:

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

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

Per maggiori informazioni consultare la nostra documentazione per Contenuto dinamico qui

Impatto su Pagespeed #

Se utilizzate Approfondimenti sulla velocità della pagina di Google per analizzare le prestazioni del vostro sito (come dovreste fare, o almeno uno strumento equivalente), vedrete Commesso.js elencato sotto Leverage browser caching. Questo articolo vi spiegherà perché è una buona cosa.

Lo scopo di Commesso.js è di rendere super semplice l’inserimento dei risultati di Impiegato.io in qualsiasi sito web. Clerk.js contiene un un mucchio di funzioni per gestire i componenti di monitoraggio e UI, come la ricerca come tipo, i cursori, i popup di uscita.

Quando aggiungiamo nuovo caratteristiche dell’interfaccia utente o apportiamo miglioramenti a quelli esistenti, questi sono incluso in Clerk.js e devono essere scaricati dall’utente finale per poterli utilizzare.

Avere una scadenza della cache di 60 minuti significa che quando rilasciamo nuove funzionalità, queste saranno disponibili per tutti entro un massimo di 60 minuti. Più lungo è il tempo di cache, più a lungo tutti avranno accesso alle nuove funzionalità.

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 solo che il browser degli utenti finali effettuerà il check-in Clerk.io ogni 60 minuti. Se non sono state apportate modifiche a Clerk.js, non verrà scaricato nulla. . Questa richiesta di check-in è superveloce ed economica, poiché i dati vengono scaricati solo se è disponibile una nuova versione di Clerk.js.

Il tempo di scadenza della cache di 60 minuti è quindi un compromesso tra la riduzione al minimo delle richieste web e la diffusione di nuove funzionalità e miglioramenti. Ricordate che la maggior parte delle sessioni è di gran lunga inferiore ai 60 minuti e quindi la richiesta verrà effettuata una sola volta per sessione o visita.

Come si può vedere nello screenshot questo è un pratica normale che (così come Clerk.io) è utilizzato da Google, Google Analytics, Facebook, New Relic, Trustpilot e molti altri.

Effettuare chiamate API #

È possibile utilizzare Commesso.js per effettuare chiamate API, utilizzando la funzione integrata Clerk.call(), che prende 3 argomenti.

Esempio di chiamata #

Definire la funzione e chiamarla nella cartella tracking-script.

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: '{$clerk_public_key}',
        collect_email: {$clerk_datasync_collect_emails},
        language: '{$language}',
        formatters: {
             log_price: function(price) {
             console.log(price);
          }
      },
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

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

Risposta #

risposta a un oggetto JavaScript, con lo stato della chiamata API e il risultato.

JavaScript

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

Lavorare con la risposta #

Utilizzare una funzione Richiamo per gestire la risposta

HTML

<script>
  Clerk("call",
    (
      "search/categories",
        {
          'query': "men",
          'limit': "10"
        },
        function(x){
          var cat = x.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);
         }
      }
   )
</script>

Questo esempio restituisce le categorie corrispondenti alla query e le presenta come testo. In questo modo è possibile effettuare chiamate alla nostra API in modo semplice e veloce.

Pulsanti Aggiungi al carrello #

Questi pulsanti funzionano in modo diverso per ogni piattaforma e la loro funzionalità può cambiare a seconda dei plugin utilizzati. Poiché i design di Clerks sono costituiti da HTML E CSS, di solito è possibile aggiungere questa funzionalità se si capisce come funziona sul proprio sito.

Alcuni pulsanti “add-to-cart” richiedono l’esecuzione di Javascript per poter funzionare. In questi casi, è necessario eseguire nuovamente lo script o la funzione richiesta dopo che Clerk ha inserito i risultati. Verificate come fare con Eventi.

Ispezionare il pulsante Aggiungi al carrello per identificare il codice ad esso associato, ad esempio in una pagina di categoria. Il codice è solitamente un elemento <div> o button. Copiare l’intero codice HTML del pulsante.

Copiare e incollare questo codice nell’elemento Design. Ora è necessario identificare le variabili nel codice. Il più delle volte, è necessario trovare il punto in cui il codice utilizza:

ID prodotto
Quantità del prodotto

Sostituite i valori dell’ID prodotto con la variabile Liquid {{ product.id }} e la quantità con un attributo se la inviate, ad esempio {{ product.qty }} o lasciatela semplicemente a 1 se i clienti acquistano un solo prodotto alla volta.

Incollate il codice nell’HTML del vostro progetto.

È possibile modificare il progetto utilizzando i CSS al di sotto dell’HTML.

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

La quantità appare nel link del carrello dopo /cart?add= e l’ID prodotto dopo &id_product=.

L’ID del prodotto è anche citato in data-id-product e la quantità del prodotto in . .data-minimal\_quantity

Questi valori saranno sostituiti con i segnaposto liquidi nel Design, in modo che i prodotti e le quantità appropriate siano referenziati una volta in funzione sul vostro webshop.

Con queste modifiche, il codice sottostante può essere aggiunto al progetto, dove si desidera che venga visualizzato:

<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 della console #

Quando si configura Impiegato.io si possono incontrare dei problemi, per una serie di motivi diversi.

Il problema più comune è che avete installato Impiegato.io, ma i prodotti non vengono ancora mostrati.

Questo articolo mostra i messaggi che Impiegato.io mostra nella console e spiega come affrontarli per aiutarvi nel debug.

Se Impiegato.io incontra un errore, e sappiamo qual è, verrà visualizzato un messaggio nella console:

Facendo clic sul collegamento all’errore si ottengono ulteriori informazioni sull’errore, che possono essere utilizzate per eseguire il debug dell’errore stesso o per inviarle al nostro team di supporto che vi aiuterà.

Questi sono gli errori più comuni della console:

“LogicalError: Contenuto sconosciuto ‘insert-name’” #

Questo errore viene visualizzato se l’embedcode inserito fa riferimento a un Contenuto del sito web che non esiste, in modello dati.

Per risolvere il problema, assicurarsi che il nome nell’embedcode corrisponda a un contenuto Contenuto del sito web.

È sempre possibile fare clic su Modifica del contenuto per qualsiasi Contenuto, per vedere quale dovrebbe essere l’embedcode:

“AuthenticationError: Endpoint API non valido” #

Questo errore si verifica normalmente se si è utilizzata la classe “impiegato” nel proprio HTML:

La classe “impiegato” è riservata all’uso con i nostri codici embed, in quanto serve a gestire le chiamate al nostro server.

Per risolvere il problema, assicurarsi di dare alla classe un altro nome, per esempio “impiegato-prodotto” o simile.

“ParsingError: Tipo di argomento prodotto non valido”. #

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

Ad esempio, se gli ID dei prodotti sono numeri interi, devono esserlo anche nell’embedcode. Inoltre, è importante ricordare le parentesi attorno all’ID, poiché deve essere un elenco:

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

“ParsingError: Tipo di categoria di argomento non valido”. #

Come nel caso precedente, questo significa che l’ID fornito per una categoria è sbagliato.

Nella maggior parte dei casi, ciò accade se il codice segnaposto nell’embedcode della categoria non è stato sostituito da un ID effettivo:

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

L’output del codice dovrebbe contenere l’ID della categoria, in questo modo:

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

Per risolvere il problema, selezionare il sistema del negozio nel menu a discesa di Modifica contenuto->Inserire nel sito web prima di copiare il codice incorporato:

Il codice incorporato cambierà in modo da includere la logica delle piattaforme per selezionare l’ID della categoria corretta:

Nelle configurazioni personalizzate, tuttavia, è necessario impostare la propria logica nel codice embed.

“AuthenticationError: Chiave API pubblica errata” #

Questo errore viene visualizzato se la chiave API pubblica fornita non corrisponde ad alcun account in Clerk.io:

Per risolvere il problema, effettuare il login a mio.clerk.io e andare su Impostazioni -> Chiavi API

Qui si può controllare Chiave API pubblica e assicurarsi che questa sia la chiave usata nello script di tracciamento Impiegato.io

Conversione dei progetti per Clerk.js 2 #

Poiché Clerk.js 2 utilizza il più flessibile modello di lingua Liquido, è necessario convertire i progetti in questo linguaggio.

1. Iniziare andando su mio.clerk.io e poi su Recommendations / Search > Designs > New Design.

2. Selezionare il tipo di design, il tipo di contenuto e assegnare un nome al design (si consiglia di aggiungere " V2" in modo che sia evidente che si sta utilizzando Clerk.js2). Quindi fare clic su Crea design.

3. Scegliere come Modello il sito Cursore di prodotti (HTML) per le Raccomandazioni; se si sta lavorando sui progetti di Ricerca, si dovrà scegliere Ricerca immediata a discesa (HTML) o Pagina di ricerca (HTML).

4. Al termine, fare clic su Crea design

5. Si otterrà così il codice HTML e CSS da sovrascrivere manualmente:

6. Tornare a Raccomandazioni / Ricerca -> Design e fare clic su Modifica design per il vecchio Clerk.js 1 Design.

7. Ora è necessario copiare il vecchio progetto Clerk.js 1 nel nuovo progetto Clerk.js 2 . Si noterà che c’è no Codice contenitore nel nuovo progetto. Questo perché Liquid usa cicli for per rendere tutti i prodotti. Copiare il vecchio HTML del prodotto dentro il ciclo for e il vecchio Codice contenitore intorno:

8. Infine, copiare anche il CSS:

9. Ora è necessario convertire il design in sintassi Liquidi. La differenza principale è che i vecchi progetti utilizzavano la sintassi

{% raw %} {{ formatter attribute }}   {% endraw %}

mentre la sintassi della v2 è

{% raw %} {{ product.attribute \| formatter }}   {% endraw %}

10. Esaminare tutti gli attributi e modificarli nel nuovo formato:

11. Se si utilizzano le dichiarazioni {% raw %} {{#if}} o {{#is}} {% endraw %}, anche queste devono essere convertite nella sintassi {% raw %} {% if product.attribute %} {% endraw %} Fai qualcosa {% raw %} {%else%} {% endraw %} Fai qualcos’altro {% raw %} {% endif %} {% endraw %} :

12. Fare clic su Aggiornare il design per salvare le modifiche.

13. Infine, andare su Raccomandazioni / Ricerca -> Contenuto e modificare il contenuto di Impiegato.io per utilizzare il nuovo design.

14. Fare clic su Aggiornare i contenuti. Questo farà sì che temporaneamente non vengano visualizzati nel webshop, fino a quando non si è terminato Passo 2. Scegliere il nuovo design per tutti i contenuti che devono essere aggiornati.

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

Per alcuni webshop, è importante caricare i dati di vendita da sistemi diversi dal webshop stesso, ad esempio se si desidera ottimizzare l’algoritmo in base alle vendite di negozio fisico o Negozio B2B.

Clerk.io non fa distinzione tra gli ordini provenienti da diverse fonti: purché si possa fornire un ID, timestamp ed elenco dei prodotti acquistati,, essi possono essere caricati:

https://docs.clerk.io/reference/order-resource

È possibile caricare gli ordini in uno dei due modi seguenti:

Con un file CSV come spiegato qui
Implementando le chiamate al nostro API CRUD, che vi permette di inviare i dati degli ordini direttamente al vostro negozio in Clerk.io.

Con un file CSV sarete in grado di caricare manualmente le vendite nei momenti in cui lo desiderate, senza dover ricorrere alla codifica.

L’approccio consigliato è quello di utilizzare API CRUD,, che consente di automatizzare completamente l’operazione.

È sufficiente aggiungere una chiamata POST all’endpoint /ordini nel vostro sistema ERP o nel vostro webshop, eseguire il lavoro a intervalli regolari, ad esempio una volta al mese, e sarete in grado di utilizzare gli ordini offline per incrementare le raccomandazioni e i risultati di ricerca online.

Conversione di valuta #

Esistono diversi modi per lavorare con conversione di valuta in Impiegato.io . Di seguito viene illustrato un modo semplice per farlo funzionare.

1. Invio dei diversi prezzi nel feed #

Clerk deve conoscere il prezzi di ciascun prodotto nel diverse valute. Il modo più semplice per farlo è quello di inviarli come una serie di prezzi formattati, con il simbolo della valuta come chiave, nel vostro Alimentazione dei dati.

Esempio:

JSON

   "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",
            "prices_formatted": "{'USD':'$100', 'EUR':'€ 87.70', 'GBP':'£ 68.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",
            "prices_formatted": "{'USD':'$150', 'EUR':'€142', 'GBP':'£120'}"
         }
    ]

2. Creazione di un formattatore #

Nella pagina script di tracciamento inserita in ogni pagina del negozio, è possibile definire JavaScript funzioni che possono essere utilizzate all’interno dei nostri modelli.

Qui si può definire una funzione che prende prezzo-detto come argomento e restituisce il prezzo per una specifica valuta valuta, che si può scegliere in base alla posizione della valuta nella pagina del negozio. prezzo-detto.

Assicurarsi che il codice sostituisca valuta con la valuta attualmente scelta dal frontend.

JavaScript

  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];
            }
        }
   });

3. Utilizzo del formattatore nei progetti di Clerk #

Infine, è possibile utilizzare questa funzione come parte del proprio progetto.

HTML

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

Prezzi specifici per il cliente #

Se si desidera visualizzare prezzi completamente unici in base al cliente che ha effettuato l’accesso, è necessario configurare un Evento in Impiegato.io che inserisce il prezzo corretto prima che i prodotti siano reso.

Eventi sono funzioni Javascript che vengono eseguite prima o dopo Impiegato.io mostra i prodotti.

Questo metodo può essere utilizzato se si possono cercare i prezzi dal server, direttamente da una funzione Javascript, nel frontend, basandosi su un ID prodotto e un ID cliente.

Per mostrare i prezzi dei singoli clienti, il codice deve essere eseguito subito dopo la risposta.

Esempio generale #

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

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

La funzione prende come argomento i dati, ovvero l’intero risposta che Impiegato.io invia dall’API.

Esempio di prezzi per singolo cliente #

La parte più importante della risposta è prodotto_dati che contiene ogni attributo prodotto che Impiegato.io invia:

Questi dati possono essere manipolato, quindi i prezzi standard possono essere sostituiti con quelli specifici del cliente prima del rendering.

Un semplice esempio di come farlo può essere visto qui:

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

<script>
   var customer_id = INSERT_CUSTOMER_ID;
   Clerk('on', 'response', function(content, data) {
      console.log(data.product_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);
         product.price = custom_price;
      }
   });
</script>

Nel codice, è necessario sostituire 2 cose:

INSERIRE_CLIENTE_ID dovrebbe essere sostituito da un codice che inserisce l’ID del cliente attualmente connesso.
RECUPERA IL PREZZO DAL SERVER dovrebbe essere sostituito da una funzione Javascript Ajax che utilizza l’ID del prodotto e l’id del cliente per trovare il prezzo corretto.

Il prezzo viene quindi assegnato all’attributo Impiegato.io prezzo che può essere visualizzato nel sito Design in questo modo:

 {% raw %} {{ price }} {% endraw %}

L’utilizzo di questo metodo consente di visualizzare prezzi completamente unici, pur utilizzando la nostra soluzione Javascript facile da usare.

Prezzi del gruppo di clienti #

La configurazione di prezzi del gruppo di clienti consiste in 4 passi:

Includere i vari prezzi nel file alimentazione dei dati
Includere una variabile che recupera l’attuale ID del gruppo di clienti
Creare un sito funzione per recuperare il prezzo rilevante.
Mostrare il prezzo nella finestra Design

1. Includere i prezzi nel feed di dati #

Iniziare aggiungendo a tutti i prodotti un attributo che contenga tutti i varie opzioni di prezzo, assicurandosi di correlare ogni prezzo a un particolare gruppo di clienti.

Questo può essere inviato come codificato in stringhe Oggetto JSON . Tenete presente che il carattere \ è necessario per sfuggire alle virgolette.

Ad esempio:

Prezzi

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

2. Variabile per l’ID del gruppo di clienti #

Aggiungere un variabile globale in clerk.js dinamico che recupera il ID gruppo clienti del cliente corrente e lo aggiunge come variabile.

Il valore dell’ID del gruppo di clienti deve essere equivalente al valore chiave prezzo corrispondente nel feed di dati. Ad esempio, un utente che deve vedere il prezzo del gruppo 2, allora l’ID deve essere “GRUPPO2”. Ad esempio:

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

3. Creare una funzione per recuperare il prezzo #

Dopo aver incluso il prezzo nel feed di dati e aver aggiunto la variabile gruppo_cliente, è possibile creare una funzione Formattatore di template, che prende come argomento gruppo_cliente e restituisce il prezzo corrispondente.

Come descritto in precedenza, ora è possibile recuperare il prezzo dal gruppo di clienti specifico come chiave nel prezzo-dict, in base all’ID gruppo_cliente.

La funzione deve essere inserita direttamente in script di tracciamento dei visitatori, che in questo esempio si chiama ottenere il prezzo:

Clerk('config', {
  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;
    }
    }
  }
});

4. Mostrare il prezzo nel modello #

Una volta creato il formattatore prezzo finale, lo si può nominare direttamente nel proprio Design, insieme all’elenco gruppo_clienti_prezzi creato al punto 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>

5. Mettere insieme il tutto #

Mettendo insieme alcuni dei passaggi delle soluzioni precedenti, si ha la possibilità di creare prezzi per gruppi di clienti a cui fare riferimento nei progetti, includendoli nel file di estensione clerk.js.

È possibile creare globali per gli ID dei gruppi di clienti e formattatori per recuperare i prezzi dei gruppi nei progetti Clerk.io, come nell’esempio seguente. Assicurarsi di sostituire INSERISCI_GRUPPO_ID_QUI con l’ID del gruppo corrente.

Clerk('config', {
  key: 'PUBLIC_KEY',
  globals: {
    customer_group_key: "INSERT_GROUP_ID_HERE"
  },
  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;
    }
    }
  }
});

Sincronizzazione con HTTP Auth #

Spesso l’autenticazione HTTP viene utilizzata sui siti di staging per evitare visitatori indesiderati.

In molti casi, questo blocca anche l’importatore Clerk e in genere visualizza un errore 401 Non autorizzato nel log di sincronizzazione.

È possibile verificare facilmente l’importatore inserendo le informazioni di autenticazione nell’URL di importazione, come di seguito, in Data Sync in my.clerk.io:

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

Nessun ordine tracciato nel dashboard #

Impiegato.io ha bisogno di tracciare continuamente le vendite del webshop per mantenere i risultati aggiornati sul comportamento dei clienti.

Tuttavia, alcune impostazioni di un webshop possono far fallire il tracciamento delle vendite.

Qui di seguito, potete scoprire come eseguire il debug del sales-tracking e vedere quali sono i problemi e le soluzioni più comuni.

Prima di iniziare #

Assicuratevi di aver installato:

Lo script di tracciamento Clerk.js su tutte le pagine
Lo script di tracciamento delle vendite su tutte le pagine Pagina di successo dell’ordine.

Questi sono necessari per tracciare le vendite in generale.

Debug #

Nella maggior parte dei casi, il tracciamento delle vendite fallisce a causa di errori negli ID visitatore o negli ID prodotto della chiamata di vendita che viene inviata a Clerk dopo il completamento di un acquisto. Per eseguire il debug, è necessario creare un ordine di prova. Tuttavia, in alcuni casi il problema potrebbe essere legato allo script di tracciamento delle vendite stesso e può essere verificato esaminando i log in my.clerk.io => Data => Logs, come descritto di seguito.

Iniziare con la dashboard di Clerk e andare in Data > Logs

Se il sales-tracking non funziona a causa di un errore nello script, spesso è possibile vedere l’errore nella parte superiore della pagina.

Fate clic su Dettagli per saperne di più:

Se non è possibile vedere alcun errore nei registri, il modo più semplice per identificare altri problemi di tracciamento delle vendite è quello di inserire una ordine di prova.

Debug con un ordine di prova #

La guida che segue utilizza Cromo come esempio per mostrare come eseguire il debug del tracciamento delle vendite con un ordine di prova, ma altri browser dispongono di funzioni simili.

Iniziate inserendo un paio di prodotti nel carrello.
Procedere a Cassa.
Prima di effettuare l’ordine, aprire il browser Console.
Cercare Rete, e restringere i risultati per " impiegato".
Effettuare l’ordine, in modo da vedere il pagina di conferma dell’ordine.
Fare clic sulla chiamata che inizia con vendita (di solito vendita?chiave=…) per vedere i dettagli che vengono inviati e ricevuti dal monitoraggio delle vendite. Facendo clic su Anteprima è possibile individuare facilmente eventuali errori che causano il mancato monitoraggio delle vendite.

Errore 1: “Sintassi non valida nell’argomento: prodotti”. #

Questo errore si verifica se il sito ID prodotto inviato ha una sintassi errata.

Gli errori più comuni sono:

Gli ID prodotto sono codificato in stringhe nel sales-tracking, ma si utilizza Integri in Impiegato.io o viceversa
L’elenco degli ID prodotto contiene formattazione del testo caratteri come questo: “products”:[\“id”\:\“123-m”\]. Il formato dovrebbe essere JSON puro, per eliminare qualsiasi formattazione.
Gli ID prodotto inviati con la chiamata non esistono nei dati sincronizzati con Clerk.

Errore 2: “Argomento X mancante”. #

Questo significa che non state inviando tutti i dati di cui Impiegato.io ha bisogno per tracciare la vendita.

Assicurarsi di includere tutti i dati gli attributi dei dati nel tracciamento delle vendite.

Errore 3: la chiamata non viene mai effettuata #

Se non si riesce a vedere la chiamata a vendita anche con entrambi gli script installati, allora qualcosa ha causato il caricamento errato dello script Clerk.js. Per capire se il problema è questo, provate a fare così:

Iniziate aprendo il sito Console nel vostro browser
Digitare “Clerk”.
Se Clerk.js è stato non caricato correttamente, verrà visualizzato un messaggio ReferenceError:

Clerk non ha alcun impatto sugli ordini #

Se le vendite vengono tracciate con successo inclerk.io, ma nessuna di esse proviene da Clerk.io, è possibile che si sia verificato un errore nella configurazione di visitor-tracking (click-tracking).

Iniziate ad assicurarvi che tracciamento dei visitatori funzioni, procedendo come segue:

Cliccate su un qualsiasi prodotto attraverso Clerk.io’s Ricerca o . Raccomandazioni
Procedere all’invio di un ordine contenente questo prodotto
Accedere a mio.clerk.io e andare su Dettagli dell’ordine
Attendere che l’ordine venga visualizzato.

Se tracciamento dei visitatori funziona, vedrete il valore e l’impatto del prodotto aggiunto tramite Clerk.io, in Ordini tracciati:

Se non vedete valore aggiunto nell’ordine che avete effettuato, le sezioni seguenti mostrano gli errori più comuni che potrebbero causarlo.

1. Configurazioni API personalizzate in cui il tracciamento dei clic non è stato abilitato #

Se si imposta Impiegato.io con un’integrazione personalizzata direttamente con l’API, è necessario abilitare attivamente il tracciamento dei visitatori.

Questa guida mostra come abilitarlo.

2. Vengono tracciati ID prodotto errati #

Affinché tracciamento dei visitatori funzioni, il tracciamento dei clic e delle vendite deve tiene conto degli stessi ID prodotto ricevuti dall’importatore.

Di solito, se questo non funziona, è perché si sta tracciando ID variante di tracciamento invece di ID principali o semplicemente SKU invece di ID.

Per verificare se il problema è questo, procedere come segue:

1. Andare su Dettagli dell’ordine e cliccare sull’ID dell’ordine effettuato:

2. Se Impiegato.io non è stato in grado di identificare il prodotto, si vedrà solo ID e un’indicazione

immagine segnaposto:

3. Andare su Dati -> Prodotti nel menu laterale e cercare il nome di

   prodotto aggiunto. Qui sarà possibile visualizzare l'ID previsto

   per il prodotto:

4. Utilizzatelo per assicurarvi di rintracciare l’ID corretto nella tracciabilità delle vendite.

3. Modifiche dell’ID del visitatore durante la sessione #

Impiegato.io utilizza un ID visitatore per identificare ogni singolo visitatore/cliente e tenere traccia dell’acquisto di prodotti da parte del cliente. Clerk.io.

Questo ID visitatore viene creato automaticamente quando si utilizza Clerk.js per la configurazione.

Questo errore è raro, ma è possibile verificare l’ID visitatore seguendo questi passaggi:

1. Aprire le impostazioni di Rete nel browser e restringere i risultati a “clerk”.

2. Iniziare a controllare tutte le chiamate di “non definito” che sono collegate alla ricerca o al

   raccomandazioni.

3. In “carico utile” è possibile controllare le chiamate ID visitatore. correnti Sarà possibile farlo per le chiamate tutti associate a Clerk.io

4. Cliccare sul prodotto ed effettuare un ordine con questo prodotto.

5. Nella pagina Successo dell’ordine, controllare di nuovo la propria rete e trovare la chiamata

  a " **vendita?".** 6\. Assicurarsi che "visitor" nel "payload" corrisponda all'ID visitatore che si è visto.

  al punto 3.

7. Se gli ID visitatore non coincidono, è necessario assicurarsi di non cambiare accidentalmente

   accidentalmente. Una causa comune per la modifica dell'ID visitatore potrebbe essere l'uso di Clerk.js 2 sul sito

   webshop, ma Clerk.js 1 sulla pagina **Successo dell'ordine**. Controllate le vostre pagine per

   assicurarsi di utilizzare ovunque lo stesso tipo di script. Utilizzate la schermata seguente

   come riferimento.

In caso di dubbi, contattare il nostro supporto tramite Live-Chat. Errore della console ## Endpoint API non valido

ClerkLa libreria Javascript di .io Commesso.js utilizza la classe specializzata “commesso”, per cercare i codici embed utilizzati per il rendering dei risultati.

Se nella console del browser viene visualizzato l’errore “Endpoint API non valido”, di solito significa che la classe “impiegato” è stata accidentalmente utilizzata da qualche parte nell’HTML.

Ad esempio:

Per risolvere questo problema, è sufficiente rinominare la classe con un’altra. Qualsiasi classe, tranne “impiegato”, può essere utilizzata per lo styling:

Aggiornamento a Clerk.js 2 #

Clerk.js 2 è una versione più veloce e molto più flessibile della nostra libreria JavaScript che rende l’installazione di Impiegato.io su qualsiasi negozio web un gioco da ragazzi.

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, è necessario seguire i seguenti passaggi per eseguire correttamente l’aggiornamento.

Le due differenze principali di Clerk.js 2 sono:

I design di mio.clerk.io utilizzano Liquido, ma possono anche essere facilmente creati utilizzando il Design Editor.
Lo script deve essere inserito proprio prima dell’opzione nel modello del webshop.

Fase 1: Conversione dei progetti #

Poiché Clerk.js 2 ha un approccio diverso ai design, è necessario crearne di nuovi.

È possibile creare i disegni di Clerk.js 2 in due modi:

1. Utilizzando l’intuitivo Editor di design per creare nuovi progetti, come descritto nei punti seguenti.
2. Convertire i vecchi progetti. Seguite questa guida per vedere come fare.

1.1 Iniziate con l’accedere a my.clerk.io -> Raccomandazioni / Ricerca -> Disegni e modelli e fate clic su Nuovo design:

1.2 Selezionate il tipo di design, il tipo di contenuto e assegnate un nome al design (vi consigliamo di aggiungere " V2" in modo che sia evidente che state usando Clerk.js2). Quindi fare clic su Crea design.

1.3. Nel sito Editor di design, fare clic su uno qualsiasi degli elementi esistenti, come il nome, l’immagine, il pulsante ecc. per modificarlo o aggiungere nuovi elementi al design per aggiungere ulteriori informazioni sui prodotti.

1.4. Al termine, fate clic su Pubblicare il design e passate a Passo 2 nella guida.

1.5. Infine, andare su Raccomandazioni / Ricerca -> Contenuto e modificare il Contenuto di Impiegato.io per utilizzare il nuovo Design.

1.6. Fare clic su Aggiornare i contenuti. Questo farà sì che temporaneamente non vengano visualizzati sul vostro webshop, finché non avrete finito con Passo 2. Scegliete il nuovo design per tutti i contenuti che devono essere aggiornati.

1.7. Ecco! Ora si è pronti a passare a Clerk.js 2.

Passo 2: Sostituzione dello script #

2.1. Iniziate individuando il file del modello che viene utilizzato per mostrare tutte le pagine del webshop e dove si trova lo script Clerk.js originale, vicino al fondo.

2.2. Rimuovere il vecchio script dal file:

2.3. Andare quindi a my.clerk.io -> Impostazioni -> Codice di tracciamento. Questa pagina contiene ora il codice di tracciamento Clerk.js 2.

2.4. Copiate questo codice e inseritelo subito prima del tag nel modello:

2.5. Salvare il modello.

Congratulazioni! Ora si sta utilizzando la configurazione molto migliorata di Clerk.js 2!

È possibile consultare la documentazione completa di Clerk.js 2 qui: https://docs.clerk.io/docs/clerkjs-quick-start

Gestione di require.js #

Questa guida si applica solo quando si usa Clerk.js 1.

In alcune configurazioni, Require.js impedisce il caricamento di Clerk.js, il che significa che non verranno mostrati i cursori o i risultati della ricerca.

Quando ciò accade, nella console viene mostrato il seguente errore:

Uncaught ReferenceError: Clerk is not defined

Esistono due modi per gestire Require.js. Entrambi gli approcci richiedono di modificare il sito tracking-script, inserito nella parte inferiore di tutte le pagine.

Includere “clerk” in Require.js #

L’approccio migliore consiste nel far sì che Require.js riconosca Clerk.io.

È possibile farlo inserendo require([‘clerk’], function() {}); in fondo allo script di tracciamento:

Ignorando Require.js #

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

Lo si può fare inserendo window._clerk_ignore_requirejs = true;

all’inizio dello script di tracciamento:

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

Disinstallazione #

Per disinstallare Clerk.io dal vostro negozio web, dovrete rimuoviamo gli script Visitor Tracking e Order Tracking aggiunti originariamente.

Un esempio dello script Visitor Tracking da eliminare, situato in un file di intestazione:

Successivamente, è necessario rimuovere lo script Tracciamento dell’ordine dal webshop della piattaforma personalizzata.

Quando avete installato Clerk.io, probabilmente avete aggiunto il monitoraggio degli ordini a un modulo di script di tracciamento o una pagina di conferma dell’ordine file del vostro tema o a un modulo di monitoraggio nel vostro negozio. Come per il Visitor Tracking, è sufficiente rimuovere lo script Order Tracking dal file del tema.

Esempio di posizione del tracciamento degli ordini qui sotto: