Shopify

Get Started

Installa Clerk.io su Shopify seguendo questi semplici passaggi.

Collegare il tuo Negozio #

Il primo passo per installare Clerk.io è collegare il tuo Negozio al tuo account Clerk.io.

Il video qui sotto ti mostra cosa fare, passo dopo passo. Usa il resto della guida come riferimento :)

Dopo aver seguito questi semplici passaggi, sarai in grado di vedere il tuo Negozio Demo Live, che ti offre una panoramica personale su come Clerk.io funzionerà nel tuo webshop.

1. Aggiungi Negozio #

  1. Accedi a my.clerk.io. La prima volta che lo fai, vedrai la pagina Aggiungi Nuovo Negozio.

  2. Scrivi il Nome e il Dominio del tuo webshop.

  3. Scegli Shopify come Piattaforma e seleziona la tua Valuta.

  4. Clicca su Aggiungi Negozio.

2. Configura la Connessione Shopify #

  1. Dal menu principale della Guida all’Installazione, clicca su Sincronizza i tuoi dati.

  2. Questa guida all’installazione mostra cosa devi fare nel tuo backend Shopify. Ecco un riepilogo dei passaggi:

  3. Nel backend Shopify, vai su App > Impostazioni delle app e dei canali di vendita > Sviluppa app.

  4. Clicca su Crea un’app nell’angolo in alto a destra.

  5. Dai all’app un nome come “Clerk.io” e seleziona te stesso come Sviluppatore dell’app.

  6. Clicca su Crea app.

  7. Clicca su Configurazione e trova Integrazione API Admin. Clicca su Configura.

  8. Sotto Ambiti di accesso API Admin, seleziona Accesso in lettura (inizia con “read_”) per i seguenti:

  • Clienti
  • Inventario
  • Pagine del Negozio Online
  • Ordini
  • Regole sui prezzi
  • Prodotti
  • Pubblicazioni
  • Locali del negozio
  • Mercati Shopify
  • Contenuto del Negozio
  • Traduzioni

  1. Clicca su Salva.

  2. Clicca su Installa App e poi su Installa nel popup che appare.

  3. Clicca sulla scheda Credenziali API.

3. Sincronizza il tuo Negozio #

  1. Ora copia e incolla tutte le informazioni necessarie nei campi in my.clerk.io:
  • Dominio Shopify (tuodominio.myshopify.com)
  • Chiave API
  • Token di accesso API Admin
  • Chiave Segreta API
  1. Clicca su Inizia Sincronizzazione. Aspetta che la sincronizzazione finisca. Magari prendi una tazza di caffè se hai un grande catalogo di prodotti ;)
  2. Questo è tutto!

4. Aggiungere Clerk.io al tuo tema #

  1. Installa il Tracciamento dei Visitatori (clerk.js)
  • Accedi al backend di Shopify e vai su Negozio Online → Temi.
  • A destra del tema in cui desideri installare Clerk, clicca su "…" → Modifica codice.
  • Apri il file settings_schema.json. Inserisci il frammento delle impostazioni di Clerk in fondo al file, appena prima dell’ultimo ].
,  
{
"name": "Impostazioni Clerk",
"settings": [
    {
    "type": "header",
    "content": "Clerk"
    },
    {
    "type": "checkbox",
    "id": "enable_clerk",
    "label": "Abilita Clerk",
    "default": true
    }
]
}
  • Premi Salva
  • Nella barra di sinistra, sotto “Frammenti”, clicca su Aggiungi un nuovo frammento chiamato clerk-tracking, e clicca su Fatto.
  • Inserisci il seguente script di tracciamento Clerk.io nel file e clicca su Salva. Ricorda di sostituire PUBLIC_KEY con la chiave API pubblica del tuo Negozio Clerk.
<!-- Inizio dello strumento di Personalizzazione E-commerce di Clerk.io - www.clerk.io -->
<script type="text/javascript">
    (function (w, d) {
        var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
        e.src = (d.location.protocol == 'https:' ? 'https' : 'http') + '://cdn.clerk.io/clerk.js';
        var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
        w.__clerk_q = w.__clerk_q || []; w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments) };
    })(window, document);
    let publicKey = 'PUBLIC_KEY';
    Clerk('config', {
        key: publicKey,
        formatters: {
            currency_converter: function (price) {
                var converted_price = (price * Shopify.currency.rate);
                return (converted_price).toString();
            }
        },
        globals: {
            currency_iso: '{{ cart.currency.iso_code }}',
            currency_symbol: '{{ cart.currency.symbol }}'
        }
    });

    {% if customer %}
        Clerk('call', 'log/email', { email:  '{{ customer.email }}' });
    {% endif %}

    document.addEventListener('DOMContentLoaded', (e) => {
        (async function fetchVisitorId() {
          let visitorId = window.sessionStorage.getItem('visitor_id');
          try {
            if (!visitorId) {
              const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
              const data = await response.json();
              visitorId = data.visitor;
              window.sessionStorage.setItem('visitor_id', data.visitor);
            }
            Clerk('config', {
              visitor: visitorId,
            });
          } catch (error) {
            console.error('Errore:', error);
          } finally {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          }
        })();
      });
</script>
<!-- Fine dello strumento di Personalizzazione E-commerce di Clerk.io - www.clerk.io -->
  • Apri il file theme.liquid. Inserisci il riferimento allo script di tracciamento nel header del documento, appena prima del tag </head>.
{% if settings.enable_clerk %}
    {% render 'clerk-tracking' %}
{% endif %}

5. Installa il Tracciamento degli Ordini #

  • Nel backend di Shopify, vai su Impostazioni → Eventi Clienti.
  • Clicca su Aggiungi pixel personalizzato, chiamalo Clerk.io e clicca su Aggiungi pixel.
  • Inserisci il seguente Codice di Tracciamento delle Vendite nel campo del codice. Clicca su Salva.
  • Dopo aver salvato, clicca su connetti e conferma connetti.
analytics.subscribe("clerk_pixel_context", (event) => {
    browser.localStorage.setItem("clerkPixelContext", JSON.stringify(event.customData));
});

analytics.subscribe("checkout_completed", async (event) => {
    const pixelContextRaw = await browser.localStorage.getItem("clerkPixelContext");
    const pixelContext = await JSON.parse(pixelContextRaw);
    const checkout = event.data.checkout;
    fetch(`https://api.clerk.io/v2/log/sale/shopify`, {
        method: "POST",
        mode: "cors",
        body: JSON.stringify({
            sale: checkout.order.id,
            key: pixelContext.localeApiKey,
            visitor: pixelContext.visitor,
        }),
    });
});

Esempio di installazione completa #

Shopify ha aggiornato il modo in cui vengono aggiunte le App Private. Stiamo lavorando a una nuova versione del video. Fino ad allora, vedi come aggiungere una App Privata qui.

In questo video puoi ottenere una panoramica completa di cosa serve per configurare Clerk.io su un webshop Shopify.

Domini/languages multipli #

Il modo più semplice per implementare Clerk.io su più domini in configurazioni standard è creando un Negozio separato per ogni dominio in my.clerk.io e sincronizzandoli con ciascuno dei tuoi domini di lingua Shopify.

Questo ti consente di separare prodotti, vendite, valute, ecc. per tenere traccia di ciascun dominio.

  1. Inizia creando il tuo Negozio principale e segui la Guida all’Installazione per collegare il tuo Negozio a Clerk.io. Scegli le Raccomandazioni e/o la Ricerca che desideri visualizzare nel tuo webshop.

  2. Quando hai completato la configurazione iniziale, clicca su "+ Aggiungi nuovo Negozio" - l’ultima opzione nel menu a discesa (di solito si trova sotto il tuo/i Negozio/i esistente/i e il nome della tua azienda):

3. Nella pagina Aggiungi Nuovo Negozio, inserisci i dettagli del tuo dominio.

4. Clicca su Copia da Negozio esistente? e seleziona il Negozio da cui desideri copiare il contenuto. Poi clicca su Aggiungi Negozio. Questo trasferirà il Contenuto e i Design dal tuo Negozio principale.

5. Segui di nuovo la Guida all’Installazione per attivare Clerk.io cliccando su Impostazioni -> Guide all’Installazione per Sincronizzare i Dati per il nuovo dominio.

6. Una volta completata la Sincronizzazione dei Dati, il tuo dominio sarà pronto e utilizzerà la stessa configurazione del tuo Negozio principale.

7. Ripeti questo processo per ciascuno dei tuoi domini di lingua Shopify.

8. Infine, modifica lo script di tracciamento nel tuo tema Shopify per includere la chiave pubblica corretta per ciascun dominio.

Ecco un esempio dello script di tracciamento modificato per includere più lingue:

<!-- Inizio dello strumento di Personalizzazione E-commerce di Clerk.io - 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);

  document.addEventListener("DOMContentLoaded", (e) => {
    let publicKey;
    switch (Shopify.locale) {
      case 'nl':
        publicKey = 'KEY';
        break;
      case 'en':
        publicKey = 'KEY';
        break;
      case 'es':
        publicKey = 'KEY';
        break;
      case 'it':
        publicKey = 'KEY';
        break;
      case 'fr':
        publicKey = 'KEY';
        break;
      case 'de':
        publicKey = 'KEY';
        break;
    }

    Clerk("config", {
      key: publicKey,
      formatters: {
        currency_converter: function (price) {
          var converted_price = (price * Shopify.currency.rate);
          return (converted_price).toString();
        }
      },
      globals: {
        currency_iso: "{{ cart.currency.iso_code }}",
        currency_symbol: "{{ cart.currency.symbol }}",
        clerkShopLocale: "{{ shop.locale }}",
        template_name: "{{ template.name }}",
        clerkCountry: "{{ routes.root_url }}"
      }
    });

    ; (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Errore:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- Fine dello strumento di Personalizzazione E-commerce di Clerk.io - www.clerk.io -->

Inventari Multipli #

Se hai un singolo Negozio con più inventari e lingue, dovrai creare più App Clerk.io per garantire una sincronizzazione rapida dei dati. Questo è fatto in modo che i Negozio non condividano lo stesso limite di velocità e il tasso di ripristino nell’API ADMIN di Shopify.

  • Nel backend di Shopify, vai su Apps > Develop apps per il tuo Negozio.
  • Clicca sul pulsante Crea un’app e ripeti questi passaggi fino a quando non hai un numero equivalente di app “Clerk.io” rispetto al numero di sottodomini per il negozio.

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