Shopify

Get Started

Installa Clerk su Shopify seguendo questi semplici passaggi

Configura Clerk sul tuo negozio Shopify in pochi semplici 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 Negozio al tuo account Clerk.

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

Aggiungi negozio #

  1. Accedi su my.clerk.io. La prima volta che lo fai, vedrai la pagina di aggiunta di un nuovo negozio.

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

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

  4. Fai clic su Aggiungi negozio.

Installa il tracciamento dei visitatori #

  1. Nel backend di Shopify, vai su Online Store > Themes.

  2. Fai clic su ... > Edit code per il tema che desideri modificare.

  3. Apri settings_schema.json e aggiungi in fondo lo snippet delle impostazioni di Clerk, subito prima dell’ultima ].

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

  1. Fai clic su Save.

  2. Sotto Snippets, clicca su Add a new snippet chiamato clerk-tracking.liquid e fai clic su Done.

  3. Inserisci lo snippet di tracciamento visitatori Clerk nel nuovo file e fai clic 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 }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% 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 {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  1. Apri theme.liquid e aggiungi questo subito prima di </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Installa il tracciamento degli ordini #

  1. In Shopify, vai su Settings > Customer Events.

  2. Fai clic su Add custom pixel, assegnagli il nome Clerk.io, poi clicca su Add pixel.

  3. Incolla il codice di Sales Tracking Clerk e fai clic 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,
    }),
  });
});
  1. Fai clic su Connect e conferma.
Insert pixel tracking

Sincronizzazione dei dati #

La sincronizzazione dei dati collega il tuo negozio Shopify a Clerk, consentendo a Clerk di accedere a prodotti, ordini, clienti e altre informazioni del negozio. Questo permette a Clerk di offrire raccomandazioni personalizzate e risultati di ricerca basati sui reali dati del tuo store. Segui i passaggi nella guida alla sincronizzazione dei dati per configurare la sincronizzazione dei dati.

Mercati e localizzazioni #

Se il tuo setup Shopify utilizza più lingue, mercati o domini, configura questi aspetti prima di andare online.

  1. Completa prima la configurazione di base in questa guida.
  2. Apri my.clerk.io > Data > Configuration.
  3. Configura le impostazioni specifiche per mercato (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Aggiungi le posizioni di magazzino se lo stock deve essere suddiviso per località.
  5. Avvia una nuova sincronizzazione e verifica gli URL dei prodotti per ogni lingua/dominio del negozio.

Shop Locale/Shopify Locale deve utilizzare il codice locale standard di Shopify, ad esempio da per la Danimarca e sv per la Svezia.

Se non sei sicuro dei codici locali utilizzati dal tuo negozio, chiedi all’assistente Sidekick di Shopify di elencare le localizzazioni configurate per il negozio.

Consulta la guida dettagliata alla mappatura qui: Impostazioni di integrazione Shopify.

Ricordati di tradurre le Intestazioni in Element -> Modifica -> Seleziona design per ogni lingua.

Configurazione multi-store #

Se la tua configurazione copre più negozi Shopify (e non solo più lingue all’interno di uno stesso negozio), crea un negozio Clerk.io per ogni Shopify store:

  1. In my.clerk.io, clicca su + Aggiungi nuovo negozio.
  2. Copia i contenuti dallo store principale durante la creazione.
  3. Collega e sincronizza ciascun negozio Shopify separatamente.
  4. Usa la Public Key corrispondente per ciascun storefront nel tracciamento.

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