Applicazioni a pagina singola #
Quando una pagina viene caricata per la prima volta, la libreria Clerk.js lancia automaticamente 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 una sola 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 -->
Rendering del controllo #
Questo viene fatto con la funzione Clerk("content", "#ID").
Ogni volta che viene caricata una pagina, eseguire questi passaggi in ordine:
- Aggiungere lo snippet Clerk all’HTML. Assicurarsi che abbia un ID univoco a cui si possa fare riferimento.
- Eseguire
Clerk("content", "#ID")per renderlo
Quando il visitatore lascia la pagina, distruggere lo snippet, per assicurarsi di poterlo rendere di nuovo se il visitatore ritorna alla 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 documentazione di Dynamic Content qui
Impatto sulla velocità delle pagine #
Se utilizzate Google Page Speed Insights per analizzare le prestazioni del vostro sito (come dovreste fare, o almeno uno strumento equivalente) vedrete Clerk.js elencato sotto Leverage browser caching. Questo articolo vi spiegherà perché è una buona cosa.
Lo scopo di Clerk.js è di rendere super semplice l’inserimento dei risultati di Clerk.io in qualsiasi sito web. Clerk.js contiene un insieme di funzioni per gestire il tracciamento e i componenti UI, come la ricerca come si scrive, i cursori, i popup di uscita.
Quando aggiungiamo nuove funzionalità** di UI o apportiamo miglioramenti a quelle esistenti, queste vengono incluse in Clerk.js e devono essere scaricate dall’utente finale per poterle 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 dell’utente finale effettuerà il check-in con 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 a 60 minuti e quindi la richiesta verrà effettuata solo una volta per sessione o visita.
Come si può vedere nella schermata, si tratta di una pratica normale che (oltre a Clerk.io) è utilizzata da Google, Google Analytics, Facebook, New Relic, Trustpilot e molti altri.
Effettuare chiamate API #
È possibile utilizzare Clerk.js per effettuare chiamate API, utilizzando la funzione integrata Clerk.call(), che accetta 3 argomenti.
Esempio di chiamata #
Definire la funzione e chiamarla nel script di tracciamento.
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 #
La 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 Callback 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.
Errori comuni della console #
Quando si configura Clerk.io si possono incontrare dei problemi, per diverse ragioni.
Il problema più comune è che avete installato Clerk.io, ma i prodotti non vengono ancora visualizzati.
Questo articolo mostra i messaggi che Clerk.io mostra nella console e spiega come affrontarli per aiutarvi nel debug.
Se Clerk.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 il codice embed inserito fa riferimento a un contenuto del sito web che non esiste, in data-template.
Per risolvere il problema, assicurarsi che il nome dell’embedcode corrisponda a un Contenuto del sito web.
È sempre possibile fare clic su Modifica contenuto per qualsiasi Contenuto, per vedere quale dovrebbe essere il codice incorporato:
“AuthenticationError: Endpoint API non valido”. #
Questo errore si verifica normalmente se si è utilizzata la classe “clerk “ nel proprio HTML:
La classe “clerk “ è riservata all’uso con i nostri codici embed, in quanto viene utilizzata per gestire le chiamate al nostro server.
Per risolvere il problema, assicurarsi di dare alla classe un altro nome, ad esempio “clerk-product “ o un nome 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 integri, devono esserlo anche nell’embedcode. Inoltre, è importante ricordare le parentesi attorno all’ID, in quanto deve essere una lista.
<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 placeholder 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 deve 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->Inserisci nel sito web prima di copiare il codice incorporato:
Il codice di incorporamento cambierà in modo da includere la logica della piattaforma 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 a nessun account di Clerk.io:
Per risolvere il problema, effettuare il login a [my.clerk.io] (http://my.clerk.io) e andare a Impostazioni -> Chiavi API.
Qui è possibile controllare la chiave API pubblica e assicurarsi che sia la chiave utilizzata nello script di monitoraggio Clerk.io.
Conversione dei progetti per Clerk.js 2 #
Poiché Clerk.js 2 utilizza il più flessibile template language Liquid, è necessario convertire i progetti in questo linguaggio.
1. Iniziare andando su my.clerk.io -> Raccomandazioni / Ricerca -> Disegni e fare clic su Nuovo disegno:
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 Template il Product Slider (HTML) per le Raccomandazioni, se si sta lavorando sui progetti di Ricerca si dovrà scegliere Instant Search Dropdown (HTML) o Search Page (HTML).
4. Al termine, fare clic su Crea progetto.
5. Si otterrà così il codice HTML e CSS da sovrascrivere manualmente:
6. Tornare a Raccomandazioni / Ricerca -> Designs e fare clic su Modifica design per il vecchio design Clerk.js 1.
7. Ora è necessario copiare il vecchio progetto Clerk.js 1 nel nuovo progetto Clerk.js 2. Si noterà che non c’è Codice contenitore. Si noterà che non c’è codice contenitore nel nuovo progetto. Questo perché Liquid usa for loops per rendere tutti i prodotti. Copiare il vecchio Product HTML entro il ciclo for e il vecchio Container Code intorno ad esso:
8. Infine, copiare anche il CSS:
9. Ora è necessario convertire il progetto nella sintassi di Liquids. 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 {% raw %} {{#if}} o {{#is}} {% endraw %} dichiarazioni, anche queste devono essere convertite nella sintassi {% raw %} {% if product.attribute %} {% endraw %} Do something {% raw %} {%else%} {% endraw %} Do something else {% raw %} {% endif %} {% endraw %}:
12. A questo punto, fare clic su Aggiorna progetto per salvare le modifiche.
13. Infine, andare su Recommendations / Search -> Content e modificare il Contenuto di Clerk.io per utilizzare il nuovo Design.
14. Fare clic su Aggiornamento dei contenuti. Questo farà sì che temporaneamente non vengano visualizzati nel negozio online, finché non si è terminato il Fase 2.
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 un negozio fisico o di un negozio B2B.
Clerk.io non fa distinzione tra gli ordini provenienti da diverse fonti: purché sia possibile fornire un ID, un timestamp e un elenco di prodotti acquistati, questi 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 alla nostra 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 l’API CRUD, in quanto consente di automatizzare completamente l’operazione.
È sufficiente aggiungere una chiamata POST all’endpoint /orders del vostro sistema ERP o del 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 la conversione di valuta in Clerk.io. Di seguito viene illustrato un modo semplice per farlo funzionare.
1. Invio dei diversi prezzi nel feed #
Clerk deve conoscere i prezzi di ogni prodotto nelle diverse valute. Il modo più semplice per farlo è inviarli come un insieme di prezzi formattati, con il simbolo della valuta come chiave, nel vostro Data Feed.
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 #
Nel tracking script inserito in ogni pagina del vostro negozio, potete definire delle funzioni JavaScript, che possono essere utilizzate all’interno dei nostri modelli.
Qui è possibile definire una funzione che prende come argomento il dict del prezzo e restituisce il prezzo per una specifica valuta, che si può scegliere al posto della valuta nel dict del prezzo.
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 commessi #
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 avete bisogno di visualizzare prezzi completamente unici in base al cliente che ha effettuato l’accesso, dovete impostare un Evento in Clerk.io che inserisca il prezzo corretto prima che i prodotti vengano renderizzati.
Gli Eventi sono funzioni Javascript che vengono eseguite prima o dopo che Clerk.io mostri i prodotti.
Questo metodo può essere utilizzato se si possono cercare i prezzi dal server, direttamente da una funzione Javascript, nel frontend in base a un ID prodotto e a un ID cliente.
Per mostrare i prezzi dei singoli clienti, il codice deve essere eseguito 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, che sono l’intera risposta che Clerk.io invia dall’API.
Esempio di prezzi per singolo cliente #
La parte più importante della risposta è product_data che contiene ogni attributo dei prodotti che Clerk.io invia:
Questi dati possono essere manipolati, quindi i prezzi standard possono essere sostituiti da quelli specifici per il 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 due cose:
INSERT_CUSTOMER_ID deve essere sostituito da un codice che inserisce l’ID del cliente attualmente connesso.
FETCH_PRICE_FROM_SERVER deve 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 price di Clerk.io che può essere visualizzato nel Design in questo modo:
{% raw %} {{ price }} {% endraw %}
Questo metodo consente di visualizzare prezzi completamente unici, pur utilizzando la nostra soluzione Javascript facile da usare.
Prezzi del gruppo di clienti #
L’impostazione dei prezzi per gruppi di clienti consiste in 4 passaggi:
Includere i vari prezzi nel feed
Recuperare l’ID del gruppo di clienti attuale
Creare una funzione per recuperare il prezzo corrispondente
Mostrare il prezzo nel design
1. Includere i prezzi nel feed #
Iniziate aggiungendo un attributo a tutti i prodotti che contenga tutte le varie opzioni di prezzo, assicurandovi di correlare ogni prezzo a un particolare gruppo di clienti.
Questo può essere inviato come stringa codificata dettaglio JSON
Per esempio:
Prezzi
customer_group_prices = '{"GROUP1":179, "GROUP2": 140, "GROUP3": 100, "GROUP4":70}'
2. Recuperare l’ID del gruppo di clienti #
Implementare un piccolo script da qualche parte nella pagina che recupera l’ID del gruppo clienti del cliente corrente in una variabile JS.
L’ID del gruppo di clienti dovrebbe essere equivalente all’indice dell’elenco in cui è contenuto il prezzo corrispondente. Ad esempio, se il prezzo si trova in gruppo_clienti_prezzi[2], anche l’ID deve essere 2. Ad esempio:
Identità del gruppo di clienti
<script type="text/javascript">
const customer_group = GROUP2;
</script>
3. Creare una funzione per ottenere il prezzo #
Dopo aver incluso il prezzo nel feed e aver recuperato la variabile customer_group, si può creare una funzione TemplateFormatter che prende come argomento l’elenco customer_group_prices e restituisce il prezzo corrispondente.
Come descritto in precedenza, è ora possibile ottenere il prezzo dal gruppo di clienti specifico come chiave nel prezzo-dict, in base all’ID del gruppo_clienti.
La funzione deve essere inserita direttamente nello script di tracciamento dei visitatori, che in questo esempio si chiama prezzo_finale:
Formatters
Clerk('config', {
key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
formatters: {
final_price: function (customer_group_prices) {
price_groups_obj = JSON.parse(customer_group_prices)
var return_price = price_groups_obj[customer_group_key];
return return_price;
}
});
4. Mostra il prezzo nel modello #
Una volta creato il formattatore prezzo_finale, è possibile nominarlo direttamente nel progetto, insieme all’elenco gruppo_clienti_prezzi creato al punto 1:
Chiamata di funzione modello
5. Creazione di prezzi per gruppi di clienti tramite l’estensione di Clerk.js #
Mettendo insieme alcuni dei passaggi delle soluzioni precedenti, si ha la possibilità di creare i prezzi dei gruppi di clienti a cui fare riferimento nei progetti, includendoli nel file di estensione Clerk.js.
È possibile creare globali per i gruppi di clienti e formattatori per fare riferimento a questi gruppi nei progetti di Clerk.io, utilizzando un codice come quello riportato di seguito. Assicurarsi di sostituire INSERT_GROUP\_ID_HERE con gli ID dei gruppi.
globals: {
customer_group_id: INSERT_GROUP_ID_HERE
},
formatters:{
final_price: function(standard_price,group_price1, group_price2){
var customer_group = INSERT_GROUP_ID_HERE;
if (customer_group = 1){
return group_price1;
}
else if (customer_group = 1){
return group_price2;
}
else (){
return standard_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 Unauthorized nel log di sincronizzazione.
È possibile verificare facilmente l’importatore inserendo le informazioni di autenticazione nell’URL di importazione come di seguito, in Data Sync a my.clerk.io:
http://USER:PASS@www.ewoksRus.com/JSONFEED
Nessun ordine tracciato nel dashboard #
Clerk.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.
Di seguito, è possibile scoprire come eseguire il debug del tracciamento delle vendite 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 sulla vostra 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 inviata a Clerk dopo il completamento di un acquisto. Per eseguire il debug, è necessario effettuare un ordine di prova. Tuttavia, in alcuni casi il problema potrebbe essere legato allo script di tracciamento delle vendite stesso e può essere risolto esaminando i log in my.clerk.io => Data => Logs, come descritto di seguito.
Iniziare accedendo alla propria Clerk.io Dashboard, e andare su Dati -> Logs.
Se il monitoraggio delle vendite 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 si notano errori nei log, il modo più semplice per identificare altri problemi di tracciamento delle vendite è quello di effettuare un ordine di prova.
Debug con un ordine di prova #
La guida che segue utilizza Chrome come esempio per mostrare come eseguire il debug del tracciamento delle vendite con un ordine di prova, ma altri browser hanno caratteristiche simili.
Iniziate inserendo un paio di prodotti nel carrello.
Procedere al Checkout.
Prima di effettuare l’ordine, aprire la Console del browser.
Trovare Rete, e restringere i risultati per " Collettore”.
Effettuare l’ordine, in modo da visualizzare la pagina di conferma dell’ordine.
Fare clic sulla chiamata che inizia con vendita (di solito vendita?key=…) 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 gli ID prodotto inviati hanno una sintassi errata.
Gli errori più comuni sono:
Gli ID prodotto sono codificati a stringa nel sales-tracking, ma si utilizzano integri in [Clerk.io] (http://clerk.io/) o viceversa.
L’elenco degli ID prodotto contiene caratteri di formattazione del testo 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”. #
Ciò significa che non state inviando tutti i dati di cui Clerk.io ha bisogno per tracciare la vendita.
Assicurarsi di includere tutti i [dati-] [attributi nel tracciamento delle vendite].(http://help.clerk.io/it/integrations/any-webshop/get-started/#2-track-behaviour)
Errore 3: La chiamata non è mai stata effettuata #
Se non si riesce a vedere la chiamata a sale anche con entrambi gli script installati, allora qualcosa ha causato il caricamento errato dello script Clerk.js. Per capire se il problema è questo, provare a fare così:
Iniziare aprendo la Console nel browser.
Digitare “Clerk”.
Se Clerk.js non è stato caricato correttamente, verrà visualizzato un Errore di riferimento:
L’impiegato non ha alcun impatto sugli ordini #
Se le vendite vengono tracciate con successo in my.clerk.io, ma nessuna proviene da Clerk.io, potrebbe esserci un errore nella configurazione del visitor-tracking (click-tracking).
Iniziate ad assicurarvi che il visitor-tracking funzioni, procedendo come segue:
Cliccate su un prodotto attraverso la Ricerca o le Raccomandazioni di Clerk.io.
Procedere all’invio di un ordine contenente questo prodotto
Effettuare l’accesso a [my.clerk.io] (http://my.clerk.io) e andare su Dettagli dell’ordine.
Attendere che l’ordine venga visualizzato.
Se il visitor-tracking funziona, vedrete il valore e l’impatto del prodotto che avete aggiunto tramite Clerk.io, in Tracked Orders:
Se non vedete alcun valore aggiunto nell’ordine che avete effettuato, le sezioni seguenti mostrano gli errori più comuni che potrebbero causarlo.
1. Impostazioni API personalizzate in cui il tracciamento dei clic non è stato abilitato #
Se si configura Clerk.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 sbagliati #
Affinché il tracciamento dei visitatori funzioni, il tracciamento dei clic e delle vendite deve tracciare gli stessi ID prodotto che riceviamo nell’importatore.
Di solito, se questo non funziona, è perché si stanno tracciando gli ID delle varianti invece degli ID principali o semplicemente si sta tracciando lo SKU invece dell’ID.
Per verificare se il problema è questo, procedere come segue:
1. Andare a Dettagli ordine e fare clic sull’ID dell’ordine effettuato:
2. Se Clerk.io non è stato in grado di identificare il prodotto, vedrete solo l’ID e un
segnaposto immagine:
3. Andare su Dati -> Prodotti nel menu laterale e cercare il nome di
il prodotto aggiunto. Qui sarà possibile vedere l'ID previsto
per il prodotto:
4. Utilizzatelo per assicurarvi di tracciare gli ID corretti [nel sales-tracking] (http://help.clerk.io/it/integrations/any-webshop/get-started/).
3. Modifica dell’ID del visitatore durante la sessione #
Clerk.io utilizza un identificativo del visitatore per identificare ogni singolo visitatore/cliente e monitorare se acquista prodotti attraverso 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 i seguenti passaggi:
1. Aprire le impostazioni della Rete nel browser e restringere i risultati a “clerk”.
2. Iniziare a controllare tutte le chiamate “undefined “ che sono collegate alla ricerca o al
raccomandazioni.
3. In “payload “ è possibile controllare l’ID del visitatore corrente. Sarà possibile farlo per tutte le chiamate associate a Clerk.io
4. Procedere a fare clic sul prodotto ed effettuare un ordine con questo prodotto.
5. Nella pagina Ordine riuscito, controllare di nuovo la 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'utilizzo di Clerk.js 2 sul sito
webshop, ma Clerk.js 1 nella pagina **Order Success**. Controllate le vostre pagine per
assicurarsi di utilizzare lo stesso tipo di script ovunque. Utilizzate la schermata seguente
come riferimento.
In caso di dubbi, contattate il nostro servizio di assistenza tramite Live-Chat.
Errore della console ## Endpoint API non valido
La libreria Javascript di Clerk.io Clerk.js utilizza la classe specializzata “clerk”, per cercare i codici embed utilizzati per il rendering dei risultati.
Se nella console del browser viene visualizzato l’errore “Invalid API Endpoint “, di solito significa che la classe “clerk “ è stata accidentalmente utilizzata da qualche parte nell’HTML.
Ad esempio:
Per risolvere il problema, è sufficiente rinominare la classe in qualcos’altro. 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 Clerk.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 progetti in my.clerk.io utilizzano Liquid, ma possono anche essere facilmente creati utilizzando l’Editor di progetti.
Lo script deve essere inserito subito prima del tag** nel modello del webshop.
Fase 1: Conversione dei disegni #
Poiché Clerk.js 2 ha un approccio diverso ai disegni, è necessario crearne di nuovi.
È possibile creare i progetti di Clerk.js 2 in due modi:
1. Utilizzando l’intuitivo Editor di progetti per creare nuovi progetti, come descritto nei punti seguenti.
2. Convertire i vecchi progetti. [Seguire questa guida per vedere come fare].(http://help.clerk.io/it/integrations/any-webshop/clerkjs/#converting-designs-for-clerkjs-2)
1.1 Iniziare andando su my.clerk.io -> Raccomandazioni / Ricerca -> Disegni e fare clic su Nuovo disegno:
1.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 progetto.
1.3. Nel Design Editor, 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, fare clic su Publish Design e passare al Fase 2 della guida.
1.5. Infine, andare su Recommendations / Search -> Content e modificare il contenuto di Clerk.io per utilizzare il nuovo progetto.
1.6. Fare clic su Aggiornamento dei contenuti, in modo che non vengano temporaneamente visualizzati nel negozio web, fino a quando non si è terminato il Fase 2 Scegliere il nuovo design per tutti i contenuti che devono essere aggiornati.
1.7. Ecco! Ora siete pronti per 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 alla parte inferiore.
2.2. Rimuovere il vecchio script dal file:
2.3. Andare quindi a my.clerk.io -> Impostazioni -> Codice di tracciamento. Questa pagina ora contiene il codice di tracciamento di Clerk.js 2.
2.4. Copiare questo codice e inserirlo subito prima del tag nel modello:
2.5. Salvare il modello.
**Congratulazioni! Ora si sta utilizzando la configurazione di Clerk.js 2, molto migliorata!
È possibile consultare la documentazione completa di Clerk.js 2 qui: https://docs.clerk.io/docs/clerkjs-quick-start
Gestire require.js #
Questa guida si applica solo quando si utilizza Clerk.js 1.
In alcune configurazioni, Require.js impedisce il caricamento di Clerk.js, il che significa che non verranno visualizzati i cursori o i risultati della ricerca.
Quando ciò accade, nella console verrà visualizzato il seguente errore:
Uncaught ReferenceError: Clerk is not defined
Esistono due modi per gestire Require.js. Entrambi gli approcci richiedono di apportare modifiche al tracking-script, inserito in fondo a tutte le pagine.
Includere “impiegato” in Require.js #
L’approccio migliore è cercare di far riconoscere a Require.js Clerk.io.
È possibile farlo inserendo require([‘clerk’], function() {}); in fondo allo script di tracciamento:
Ignorare Require.js #
Se la soluzione precedente non funziona, è possibile ignorare Require.js.
Lo si può fare inserendo window._clerk_ignore_requirejs = true;
nella parte superiore 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 rimuovere gli script Visitor Tracking e Order Tracking aggiunti originariamente.
Un esempio di script Visitor Tracking da eliminare, situato in un file di intestazione:
Successivamente, è necessario rimuovere lo script Order Tracking dal webshop della piattaforma personalizzata.
Quando avete installato Clerk.io, probabilmente avete aggiunto l’Order Tracking a un modulo tracking script o a una pagina di conferma dell’ordine all’interno dei file del vostro tema, oppure a un modulo di tracking nel vostro negozio. Come per il Visitor Tracking, è sufficiente rimuovere lo script Order Tracking dal file del tema.
Esempio di posizione dell’Order Tracking qui sotto:
