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

Collegamento del negozio #

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. 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 su come Clerk funzionerà nel tuo webshop.

Aggiungi negozio #

Accedi a my.clerk.io. La prima volta che lo fai, visualizzerai 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 Aggiungi Store.

Installa il tracking dei visitatori #

Nel backend di Shopify, vai su 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.liquid e poi su Done.
Inserisci il tuo snippet di tracking dei visitatori Clerk nel nuovo file e clicca su Save. Sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key trovata su 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 {
        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 tracking 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 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 dati #

La sincronizzazione dei dati collega il tuo negozio Shopify a Clerk, permettendo a Clerk di accedere ai tuoi prodotti, ordini, clienti e altre informazioni del negozio. Questo consente a Clerk di fornire raccomandazioni personalizzate e risultati di ricerca basati sui dati reali del tuo negozio. Segui i passaggi nella guida Sincronizza dati per impostare la sincronizzazione dei dati.

Più domini/lingue #

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

Ciò ti consente di separare prodotti, vendite, valute, ecc. per tenere traccia di ogni dominio.

Configurazione Store #

Inizia creando il tuo Store principale e segui la Guida Rapida per collegare il tuo Store a Clerk. Scegli le Recommendations e/o Search che vuoi mostrare sul tuo webshop.
Una volta completata la configurazione iniziale, clicca su "+ Aggiungi nuovo Store" – l’ultima opzione nell’elenco a discesa (di solito si trova sotto il/i tuo/i Store esistenti e il nome dell’azienda):

Nella pagina di Aggiungi Nuovo Store, inserisci i dettagli del tuo dominio.
Clicca su Copia da Store esistente? e seleziona lo Store da cui vuoi copiare gli elementi. Poi clicca su Aggiungi Store. Questo trasferirà Elements e Designs dal tuo Store principale.
Segui nuovamente la Guida Rapida per attivare Clerk cliccando su Settings > Setup Guides per Sync Data per il nuovo dominio.
Una volta completata la Sync Data, il tuo dominio sarà pronto e utilizzerà la stessa configurazione del tuo Store principale.
Ripeti questo processo per ciascuno dei tuoi domini lingua Shopify.
Infine, modifica lo script di tracking nel tema Shopify per includere la chiave pubblica corretta per ogni dominio.

Ecco un esempio di script di tracking 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 Headlines in Element -> Edit -> Select Design anche nella lingua corretta.

Inventari multipli #

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

Ciò è necessario per evitare che gli Store condividano lo stesso rate limit e la velocità di ripristino nell’Shopify ADMIN API.

Nel backend Shopify, vai su Apps > Develop apps per il tuo Store.
Clicca sul pulsante Create an app, e ripeti questi passaggi fino ad avere tante app “Clerk.io” quante sono le sottodomini per il negozio.

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