Shopify

Get Started

Installa Clerk.io su Shopify seguendo questi semplici passaggi

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

Prima della configurazione #

Shopify e Clerk.io hanno ciascuno una parte nel processo di configurazione. Il lato Shopify fornisce l’accesso, l’app e il tracciamento del negozio. Il lato Clerk.io collega il negozio, configura la sincronizzazione e avvia l’importazione dei dati.

Shopifymy.clerk.io
Crea e installa l’app, aggiungi il tracciamento e fornisci il dominio Shopify per la sincronizzazione.Aggiungi il negozio, configura la sincronizzazione Shopify, avvia la prima sincronizzazione e verifica i dati importati.

Dominio Shopify #

Il dominio Shopify è necessario quando si configura la sincronizzazione. Utilizza l’indirizzo .myshopify.com anche se il negozio utilizza un dominio pubblico personalizzato.

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

Shopify utilizza l’indirizzo myshopify.com per identificare il negozio. Scopri di più nella documentazione dei domini di Shopify.

Connessione 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 negozio online.

Aggiungi negozio #

  1. Accedi su my.clerk.io. La prima volta che lo fai, vedrai la pagina Aggiungi Nuovo Store.

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

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

  4. Clicca su Add Store.

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

Installa il tracciamento dei visitatori #

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

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

  3. Apri settings_schema.json e aggiungi lo snippet delle impostazioni Clerk in fondo al file, 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. Clicca su Save.

  2. Sotto Snippets, clicca su Add a new snippet e chiamalo clerk-tracking.liquid, quindi clicca su Done.

  3. 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);
  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 blocco 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. Clicca su Add custom pixel, denominalo Clerk.io, quindi clicca su Add pixel.

  3. Imposta il requisito del permesso del pixel su Not required. Questa è l’impostazione raccomandata per la configurazione predefinita di Clerk.io perché Clerk.io utilizza il tracciamento senza cookie e non imposta cookie persistenti. Il pixel quindi verrà eseguito indipendentemente dall’accettazione da parte del visitatore dei cookie di marketing, analisi o preferenze. Scopri di più sulla soluzione senza cookie di Clerk.io.

    Se hai configurato Clerk.io per utilizzare ID visitatore persistenti, imposta il requisito del permesso su Analytics invece. Questo è necessario solo se la tua configurazione personalizzata utilizza effettivamente cookie persistenti; non è richiesto per la configurazione senza cookie predefinita.

  4. Incolla il tuo codice di tracciamento vendite 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. Clicca su Connect e conferma.
Insert pixel tracking

Sincronizza i dati #

L’app e la sincronizzazione sono configurate nella guida Sincronizza Dati. Segui prima i passaggi Shopify, quindi completa i passaggi my.clerk.io per collegare le credenziali, inserire il dominio .myshopify.com e avviare la prima sincronizzazione.

Mercati e lingue #

Se la tua configurazione Shopify utilizza più lingue, mercati o domini, configura tutto prima di andare live.

  1. Completa prima la configurazione di base descritta 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 sedi dell’inventario se la disponibilità prodotti deve essere suddivisa per location.
  5. Avvia una nuova sincronizzazione e verifica gli URL dei prodotti in ciascuna lingua/dominio del negozio.

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

Se non sei sicuro di quali codici di lingua stia utilizzando il tuo Store, chiedi all’assistente Sidekick di Shopify di elencare le lingue configurate per il negozio.

Utilizza la guida dettagliata di mappatura qui: Impostazioni di integrazione Shopify.

Ricordati di tradurre le Headlines in Element -> Edit -> Select Design per ogni lingua.

Cambia chiavi API #

Se la tua configurazione utilizza store Clerk.io separati per ogni mercato, ogni store ha la propria chiave API. Utilizza request.locale.iso_code di Shopify per assegnare automaticamente la chiave corretta ad ogni caricamento pagina.

Sostituisci il contenuto di clerk-tracking.liquid con lo snippet completo qui sotto. Aggiungi una voce {% when %} per ogni locale e imposta {% else %} con la chiave del tuo store predefinito:

<!-- 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 tua configurazione prevede più Shopify Store (non solo più lingue all’interno di uno stesso negozio), crea uno store Clerk.io per ogni Shopify store:

  1. In my.clerk.io, clicca su + Add new Store.
  2. Copia i contenuti dallo store principale durante la creazione.
  3. Collega e sincronizza ogni Shopify store separatamente.
  4. Utilizza la chiave pubblica corrispondente per ogni storefront nel tracciamento.

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