Get Started

Configura Clerk sul tuo store BigCommerce in pochi semplici passaggi. Questa guida ti accompagna nella connessione del tuo store, nell’installazione degli script di tracking e nella sincronizzazione dei tuoi dati.

Connessione del tuo store #

Dopo aver seguito questi semplici passaggi potrai vedere la tua Live Demo, che ti offre una panoramica personale di come Clerk funzionerà sul tuo webshop, prima di configurare il resto del sistema.

Aggiungi store #

Dopo aver effettuato l’accesso su my.clerk.io, la prima cosa da fare è aggiungere il tuo store:

1. Inserisci il Nome e il Dominio del tuo negozio online.

2. Scegli la Lingua e la Valuta, e seleziona BigCommerce come Platform.

3. Clicca su Add Store.

Installa il tracciamento dei visitatori #

In BigCommerce, devi essere loggato come Store Owner per accedere a queste impostazioni.

1. Nell’area di amministrazione di BigCommerce, vai su Storefront > My Themes > Advanced > Edit Theme Files.

2. Nella barra laterale sinistra, apri templates > layout > base.html e incolla lo script di tracking nella sezione <head> appena prima di </head>.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script');
    e.type = 'text/javascript';
    e.async = true;
    e.src = 'https://cdn.clerk.io/clerk.js';
    var s = d.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(e, s);
    w.__clerk_q = w.__clerk_q || [];
    w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments); };
  })(window, document);

  Clerk('config', { key: 'insert_api_key' });

  // Clerk.js Context
  Clerk('context', {
    product: {{#if cart.items}}[
      {{#each cart.items}}
        "{{product_id}}"{{#unless @last}},{{/unless}}
      {{/each}}
    ]{{else}}{{#if product.id}}"{{product.id}}"{{else}}null{{/if}}{{/if}},

    category: {{#if category.id}}"{{category.id}}"{{else}}null{{/if}},
    page: {{#if page_type}}"{{page_type}}"{{else}}null{{/if}}
  });
  {{#if customer.email}}
  Clerk('call', 'log/email', { email: '{{customer.email}}' });
  {{/if}}
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key che trovi su my.clerk.io > Developers > API Keys.

5. Clicca Save & apply file.

Installa il tracciamento degli ordini #

1. Nell’area di amministrazione di BigCommerce, vai su Settings > Advanced > Data Solutions.

2. Abilita Affiliate Conversion Tracking e clicca su Save.

3. Apri Affiliate Conversion Tracking e clicca su Connect se BigCommerce ti chiede di abilitare la connessione.

4. Incolla il seguente codice nella parte inferiore di Conversion Tracking Code e clicca su Save.

<!-- 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 -->

<!-- Start of Clerk sales tracking -->
<script>
  Clerk('call', 'log/sale/bigcommerce', { sale: '%%ORDER_ID%%' });
</script>
<!-- End of Clerk sales tracking -->

Sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key che trovi su my.clerk.io > Developers > API Keys..

Sincronizza i dati #

La sincronizzazione dei dati collega il tuo store BigCommerce a Clerk, consentendo a Clerk di accedere ai tuoi prodotti, ordini, clienti e altre informazioni del negozio. Questo permette a Clerk di offrire raccomandazioni personalizzate e risultati di ricerca basati sui dati reali del tuo shop. Segui le istruzioni nella guida Sync Data per configurare la sincronizzazione dei dati.

Anteprima degli elementi #

Per iniziare a visualizzare in anteprima gli elementi Clerk nel tuo webshop, è necessario accedere prima al tema su cui hai aggiunto Clerk.

Accedi al portale amministrativo di BigCommerce, poi apri Storefront > My Themes.

Trova il tuo tema, clicca sul menu a tre puntini, quindi seleziona Customize.

Dopo aver cliccato “Customize”, ti verrà data la possibilità di selezionare uno stile del tema da personalizzare.

Scegli lo stile che corrisponde al tuo tema. Ad esempio, scegli Light per un tema chiaro.

Seleziona lo stile del tema, poi clicca su “Continue”.

Quando entri nella pagina Preview, assicurati di selezionare “Preview” in alto allo schermo.

Usa il menu nell’angolo in alto a sinistra per scegliere la pagina del webshop che vuoi visualizzare in anteprima.

Nota:

In modalità Preview, BigCommerce non permette di trasferire le variabili ad una pagina raggiunta con clic.

Ad esempio, se aggiungi prodotti al carrello in modalità Preview, questi non saranno nel carrello dopo che clicchi proseguendo.

Per testare elementi Clerk che richiedono il passaggio di variabili da una pagina all’altra, assicurati di “hardcodare” tali variabili per il test.

Ad esempio, imposta la query di ricerca su una parola chiave specifica o scegli un determinato ID prodotto aggiunto al carrello.