Shopify

Get Started

Installa Clerk su Shopify seguendo questi semplici passaggi

Metti Clerk in funzione sul tuo negozio Shopify in pochi passaggi. Questa guida ti accompagna nella connessione del tuo negozio, nell’installazione del tracciamento e nella sincronizzazione dei tuoi dati.

Connessione del tuo negozio #

Il primo passaggio per installare Clerk è collegare il tuo Store al tuo account Clerk.

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

Dopo aver seguito questi semplici passaggi, potrai vedere il tuo Live Demo Store, che ti offre una panoramica personale di come Clerk funzionerà sul tuo webshop.

Aggiungi negozio #

Accedi a my.clerk.io. La prima volta che lo fai, vedrai la pagina Add New Store.
Inserisci il Nome e il Dominio del tuo webshop.
Scegli Shopify come Platform e seleziona la tua Valuta.
Clicca su Add Store.

Installa il tracciamento dei visitatori #

Nel backend di Shopify, vai a Online Store > Themes.
Clicca su ... > Edit code per il tema che desideri modificare.
Apri settings_schema.json e aggiungi lo snippet delle impostazioni Clerk in fondo, appena prima dell’ultima ].

,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}

Clicca su Save.
Sotto Snippets, clicca su Add a new snippet chiamato clerk-tracking e clicca su Done.
Inserisci il tuo snippet di tracciamento visitatori Clerk nel nuovo file e clicca su Save. Sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key da my.clerk.io > Developers > API Keys.

<!-- 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 = (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 = 'INSERT_PUBLIC_API_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('Error:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Apri theme.liquid e aggiungi questa parte subito prima di </head>:

{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

Installa il tracciamento degli ordini #

In Shopify, vai a Settings > Customer Events.
Clicca su Add custom pixel, nomina il pixel Clerk.io, poi clicca su Add pixel.
Incolla il tuo codice di Clerk Sales Tracking e clicca su Save.

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

Clicca su Connect e conferma.

Sincronizza i dati #

In Shopify, vai su Apps > App and sales channel settings e clicca su Develop apps.

Clicca su Create app, dai il nome “Clerk.io”, scegli lo sviluppatore dell’app, poi clicca nuovamente su Create app.
Clicca su Configuration → Admin API integration → Configure.

Sotto Admin API access scopes, concedi accesso in sola lettura (scopes che iniziano con read_) ai seguenti elementi:
- Customers
- Inventory
- Locales
- Markets
- Online Store Pages
- Orders
- Products
- Store Content
- Translations

Clicca su Save, poi su Install App → Install.
Apri API Credentials e copia il tuo Shopify Domain e le chiavi API, Access Token e Secret Key dell’app.

Vai su my.clerk.io > Data > Configuration e incolla questi valori nel modulo. Scegli una dimensione d’immagine di default se richiesto, quindi clicca su Start Sync.

Esempio di installazione completa #

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

In questo video puoi ottenere una panoramica completa di ciò che serve per configurare Clerk su un webshop Shopify.

Più domini/lingue #

Il modo più semplice per implementare Clerk su più domini nelle configurazioni standard è creare uno Store separato per ogni dominio su my.clerk.io e sincronizzarli con ciascuno dei tuoi domini linguistici Shopify.

Questo permette di separare prodotti, vendite, valute ecc. per monitorare ciascun dominio.

Configurazione dei negozi #

Inizia creando il tuo Store principale e segui la Guida di Configurazione per collegare il tuo Store a Clerk. Scegli le Recommendations e/o la Search che desideri visualizzare sul tuo webshop.
Quando hai completato l’impostazione iniziale, clicca su "+ Add new Store" - l’ultima opzione nel menu a discesa (di solito sotto il tuo Store esistente e il nome dell’azienda):

Nella pagina Add New Store, inserisci i dettagli del tuo dominio.
Clicca su Copy from existing Store? e seleziona lo Store dal quale vuoi copiare i contenuti. Poi clicca su Add Store. Questo trasferirà Content e Designs dal tuo Store principale.
Segui nuovamente la Guida di Configurazione per attivare Clerk cliccando su Settings > Setup Guides e Sync Data per il nuovo dominio.
Una volta completata la Data Sync, il tuo dominio sarà pronto e userà la stessa configurazione del tuo Store principale.
Ripeti questa procedura per ciascuno dei tuoi domini Shopify in lingua.
Infine, modifica lo script di tracciamento nel tuo tema Shopify per inserire la chiave pubblica corretta per ciascun dominio.

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

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

  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('Error:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Ricordati di tradurre le Headlines in Content -> Edit -> Select Design anche nella lingua corretta.

Inventari multipli #

Se hai un unico Store con più inventari e lingue, dovrai creare più App Clerk per garantire una sincronizzazione dati veloce.

Questo serve per evitare che gli Store condividano lo stesso rate limit e la stessa velocità di ripristino nella Shopify ADMIN API.

Nel backend di Shopify, vai su Apps > Develop apps per il tuo Store.
Clicca sul pulsante Create an app e ripeti questi passaggi fino a ottenere un numero di app “Clerk.io” equivalente al numero di sottodomini del negozio.

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