Shopify

Get Started

Installa Clerk su Shopify seguendo questi semplici passaggi

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

Collegare il tuo store #

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

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

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

Aggiungi store #

Accedi a my.clerk.io. La prima volta che lo fai, vedrai la pagina Aggiungi Nuovo Store.
Scrivi il Nome e il Dominio del tuo webshop.
Scegli Shopify come Piattaforma e seleziona la tua Valuta.
Clicca su Aggiungi 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 di 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.liquid 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 questo subito prima di </head>:

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

Installa il tracciamento ordini #

In Shopify, vai su Settings > Customer Events.
Clicca su Add custom pixel, chiamalo Clerk.io, poi clicca su Add pixel.
Incolla il tuo codice di Sales Tracking di Clerk 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 #

La sincronizzazione dei dati collega il tuo store Shopify a Clerk, permettendo a Clerk di accedere ai tuoi prodotti, ordini, clienti e le altre informazioni del tuo store. Questo consente a Clerk di fornire consigli personalizzati e risultati di search basati sui veri dati del tuo store. Segui i passaggi nella guida Sincronizza Dati per impostare la sincronizzazione dati.

Più domini/lingue #

Il modo più semplice per implementare Clerk su più domini in configurazioni standard è creare un Store separato per ciascun dominio in my.clerk.io e sincronizzarli con ognuno dei tuoi domini linguistici Shopify.

Questo consente di separare prodotti, vendite, valute, ecc. per gestire ogni dominio singolarmente.

Configurazione degli store #

Inizia creando il tuo Store principale e segui la Guida di Configurazione per collegare il tuo Store a Clerk. Scegli le Recommendations e/o Search che desideri mostrare sul tuo webshop.
Una volta completata la configurazione iniziale, clicca su "+ Add new Store" - l’ultima opzione nella lista a tendina (tipicamente sotto il/i Store esistente/i e il nome della tua azienda):

Nella pagina Aggiungi Nuovo Store, inserisci i dati del tuo dominio.
Clicca su Copy from existing Store? e seleziona lo store da cui vuoi copiare gli elementi. Poi clicca su Add Store. Questo trasferirà gli Elementi e i Design dal tuo Store principale.
Segui di nuovo la Guida di Configurazione per attivare Clerk cliccando su Settings > Setup Guides per Sincronizza dati per il nuovo dominio.
Una volta completata la Sincronizzazione Dati, il tuo dominio sarà pronto e utilizzerà la stessa configurazione del tuo Store principale.
Ripeti questo processo per ciascun dominio linguistico Shopify.
Infine, modifica lo script di tracciamento nel tema Shopify per includere la chiave pubblica corretta per ogni dominio.

Ecco un esempio dello 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 -->

Ricorda di tradurre le Headlines in Element -> Modifica -> Seleziona Design anche nella lingua corretta.

Più inventari #

Se hai un unico Store con molteplici inventari e lingue, sarà necessario creare più Clerk Apps per assicurare una sincronizzazione dati rapida.

Questo è fatto per evitare che gli Store condividano lo stesso rate limit e il rate di ripristino delle richieste nella Shopify ADMIN API.

Nel backend di Shopify, vai su Apps > Develop apps per il tuo Store.
Clicca il pulsante Crea un’app, e ripeti questi passaggi fino ad avere un numero di app “Clerk.io” equivalente ai sottodomini per lo shop.

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