Shopify

Get Started

Installa Clerk.io su Shopify seguendo questi semplici passaggi

Configura Clerk.io nel tuo negozio Shopify in pochi semplici passi. Questa guida ti accompagna nel collegamento del tuo negozio, nell’installazione del tracking e nella sincronizzazione dei tuoi dati.

Prima della configurazione #

Shopify e Clerk.io hanno entrambe un ruolo nella configurazione. Da parte di Shopify vengono forniti l’accesso, l’app e il tracciamento dello storefront. Da parte di Clerk.io si collega il negozio, si configura la sincronizzazione e si inizia l’importazione dei dati.

Shopifymy.clerk.io
Trova il dominio Shopify e il codice collaboratore, approva l’accesso come collaboratore, crea e installa l’app e aggiungi il tracking.Aggiungi il negozio, configura la sincronizzazione Shopify, avvia la prima sincronizzazione e verifica i dati importati.

Accesso a Shopify #

Se una terza parte come Clerk.io sta configurando o risolvendo problemi dell’integrazione, avrà bisogno del dominio attuale myshopify.com del negozio e dell’accesso come collaboratore per accedere al backend di Shopify.

Trova il dominio #

  1. In Shopify, vai su Settings > Domains.
  2. Copia l’indirizzo attuale .myshopify.com del negozio.

Utilizza l’indirizzo .myshopify.com per le impostazioni di integrazione Shopify, anche se il webshop usa un dominio pubblico personalizzato. Shopify usa l’indirizzo myshopify.com per identificare il negozio e per l’accesso admin. Per maggiori informazioni, consulta la documentazione sui domini Shopify.

Trova il codice #

  1. In Shopify, vai su Settings > Users.
  2. Se il negozio fa parte di un’organizzazione, apri Users. In caso contrario, apri Users & permissions.
  3. Fai clic su Security.
  4. Fai clic sul codice collaboratore a quattro cifre per copiarlo.

La terza parte userà questo codice quando invierà una richiesta di collaborazione. Approva la richiesta sotto Settings > Users → Requests. Consulta la documentazione sugli account collaboratori di Shopify per i passaggi più aggiornati.

Proprietà della configurazione #

Il team del negozio Shopify o una terza parte con i permessi necessari su Shopify può completare i passaggi relativi a Shopify. L’accesso come collaboratore non include automaticamente il permesso di sviluppare app. Se la terza parte non può creare o installare l’app, il team del negozio Shopify completa tali passaggi e condivide in sicurezza Client ID e Client Secret dell’app con la persona che configura la sincronizzazione su my.clerk.io.

Collegamento del tuo negozio #

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

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

Aggiungi negozio #

  1. Accedi a my.clerk.io. La prima volta che effettui l’accesso vedrai la pagina Aggiungi Nuovo Negozio.

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

  3. Scegli Shopify come Platform e scegli la tua Currency.

  4. Clicca su Add Store.

Il dominio Shopify .myshopify.com viene inserito successivamente in Data > Configuration quando la sincronizzazione viene configurata.

Installa il tracking dei visitatori #

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

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

  3. Apri settings_schema.json e aggiungi il frammento delle impostazioni Clerk in fondo, appena 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, fai clic su Add a new snippet chiamato clerk-tracking.liquid e poi clicca su Done.

  3. Inserisci il frammento di codici di tracking visitatori di 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);
  const 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 codice appena prima di </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Installa il tracking 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. Imposta il requisito di permesso del pixel su Not required. Questa è l’impostazione raccomandata per la configurazione Clerk.io predefinita poiché Clerk.io utilizza il tracking senza cookie e non imposta cookie persistenti. Il pixel verrà quindi eseguito indipendentemente dall’accettazione dei cookie di marketing, analisi o preferenze da parte del visitatore. Maggiori informazioni su Clerk.io e la soluzione senza cookie.

    Se hai configurato Clerk.io in modo personalizzato per utilizzare gli ID visitatore persistenti, imposta il requisito dei permessi su Analytics. Questo è necessario solo se la configurazione personalizzata effettivamente utilizza cookie persistenti; non è richiesto per la configurazione senza cookie predefinita.

  4. Incolla il 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,
    }),
  });
});
  1. Fai clic su Connect e conferma.
Insert pixel tracking

Sincronizza i dati #

L’app e la sincronizzazione vengono configurate nella guida Sync Data. Segui prima i passaggi relativi a Shopify, poi completa i passaggi su my.clerk.io per collegare le credenziali, inserire il dominio .myshopify.com e avviare la prima sincronizzazione.

Mercati e località #

Se la configurazione di Shopify utilizza più lingue, mercati o domini, configura questa parte prima della messa 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 location di inventario se vuoi limitare lo stock per posizione.
  5. Avvia una nuova sincronizzazione e verifica gli URL dei prodotti per ogni lingua/dominio dello storefront.

Shop Locale/Shopify Locale deve usare il codice lingua standardizzato di Shopify, ad esempio da per la Danimarca e sv per la Svezia.

Se non sei sicuro di quali codici locale usa il tuo negozio, chiedi all’assistente Sidekick di Shopify di elencare i locale configurati per il negozio.

Usa la guida di mapping dettagliata qui: Shopify integration settings.

Ricorda di tradurre le Headline in Element -> Edit -> Select Design per ciascuna lingua.

Cambia le chiavi API #

Se la configurazione usa un negozio Clerk.io diverso per ogni mercato, ogni negozio avrà la sua chiave API. Usa request.locale.iso_code di Shopify per assegnare automaticamente la chiave corretta a ogni caricamento pagina.

Sostituisci il contenuto di clerk-tracking.liquid con il frammento completo qui sotto. Aggiungi una voce {% when %} per ogni locale e imposta {% else %} come chiave predefinita del negozio:

<!-- 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);
  {% case request.locale.iso_code %}
    {% when 'da' %}
      {% assign publicKey = 'YOUR_DANISH_KEY' %}
    {% when 'sv' %}
      {% assign publicKey = 'YOUR_SWEDISH_KEY' %}
    {% else %}
      {% assign publicKey = 'YOUR_DEFAULT_KEY' %}
  {% endcase %}
  const publicKey = '{{ publicKey }}';
  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 -->

Configurazione multi-store #

Se la configurazione comprende più negozi Shopify (non solo più lingue all’interno di un unico negozio), crea un negozio Clerk.io per ogni negozio Shopify:

  1. In my.clerk.io, clicca su + Add new Store.
  2. Copia i contenuti dal negozio principale durante la creazione.
  3. Collega e sincronizza ciascun negozio Shopify separatamente.
  4. Usa la chiave pubblica corrispondente per ciascun storefront nel tracking.

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