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 negozio, nell’installazione del tracciamento e nella sincronizzazione dei tuoi dati.

Collegare il tuo negozio #

Il primo passo per installare Clerk è collegare il tuo Store con il 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 #

Accedi a my.clerk.io. La prima volta che effettui l’accesso, vedrai la pagina Aggiungi Nuovo Store.
Inserisci il Nome e il Dominio del tuo webshop.
Scegli Shopify come Piattaforma e seleziona la tua Valuta.
Clicca su Add Store.

Installa il tracciamento dei visitatori #

Nel backend di Shopify, vai su Online Store > Themes.
Clicca su ... > Edit code per il tema che vuoi modificare.
Apri settings_schema.json e aggiungi lo snippet delle impostazioni Clerk in fondo, poco 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 lo snippet Clerk di tracciamento visitatori 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 }}"
    }
  });

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

Apri theme.liquid e aggiungi questo poco prima di </head>:

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

Installa il tracciamento degli 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 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 #

La sincronizzazione dei dati collega il tuo negozio Shopify a Clerk, consentendo a Clerk di accedere ai tuoi prodotti, ordini, clienti e altre informazioni del negozio. Questo permette a Clerk di fornire consigli e risultati di ricerca personalizzati basati sui dati reali del tuo negozio. Segui i passaggi nella guida Sync Data per configurare la sincronizzazione dei dati.

Più domini/lingue #

Il modo più semplice per implementare Clerk su più domini nelle configurazioni standard è creare un Store separato per ogni dominio su my.clerk.io e sincronizzarli con ciascun tuo dominio linguistico Shopify.

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

Configurazione Store #

Inizia creando il tuo Store principale e segui la Setup Guide per collegare il tuo Store a Clerk. Scegli le Recommendations e/o Search che vuoi mostrare sul tuo webshop.
Quando hai completato la prima configurazione, clicca su "+ Add new Store" – l’ultima opzione nell’elenco a discesa (di solito sotto al tuo Store/i esistente/i e nome azienda):

Nella pagina Add New Store, inserisci i dettagli del 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 Elements e i Designs dal tuo Store principale.
Segui nuovamente la Setup Guide per attivare Clerk cliccando su Settings > Setup Guides per Sync Data per il nuovo dominio.
Una volta completata la Data Sync, il tuo dominio sarà pronto e utilizzerà la stessa impostazione dello Store principale.
Ripeti questo processo per ciascuno dei tuoi domini linguistici Shopify.
Infine, modifica lo script di tracciamento nel tema Shopify per includere la Public Key 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 }}"
      }
    });

    // 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 %}
    });

    ; (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 -> Edit -> Select Design anche nella lingua corretta.

Magazzini multipli #

Se hai un singolo Store con più magazzini e lingue, dovrai creare più app Clerk per garantire una sincronizzazione dei dati rapida.

Questo serve a impedire che i negozi condividano lo stesso rate limit e la rate di ripristino nell’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 finché non avrai il 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.