Shopify

Get Started

Installieren Sie Clerk.io in Shopify, indem Sie diese einfachen Schritte befolgen.

Verbindung Ihres Stores #

Der erste Schritt bei der Installation von Clerk.io besteht darin, Ihren Store mit Ihrem Clerk.io-Konto zu verbinden.

Das untenstehende Video zeigt Ihnen Schritt für Schritt, was zu tun ist. Nutzen Sie den Rest der Anleitung als Referenz :)

Nachdem Sie diese einfachen Schritte befolgt haben, können Sie Ihren Live-Demo-Store sehen, der Ihnen einen persönlichen Überblick darüber gibt, wie Clerk.io in Ihrem Webshop funktioniert.

1. Store hinzufügen #

  1. Melden Sie sich bei my.clerk.io an. Beim ersten Login sehen Sie die Seite zum Hinzufügen eines neuen Stores.

  2. Geben Sie den Namen und die Domain Ihres Webshops ein

  3. Wählen Sie Shopify als Plattform und wählen Sie Ihre Währung aus

  4. Klicken Sie auf Store hinzufügen

2. Besucher-Tracking installieren #

  1. Gehen Sie in Ihrem Shopify-Backend zu Online Store > Themes.
  2. Klicken Sie auf ... > Edit code für das Theme, das Sie ändern möchten.
  3. Öffnen Sie settings_schema.json und fügen Sie das Clerk-Einstellungs-Snippet ganz unten, direkt vor der letzten ], hinzu.
,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}
  1. Klicken Sie auf Save.
  2. Unter Snippets, klicken Sie auf Add a new snippet mit dem Namen clerk-tracking und dann auf Done.
  3. Fügen Sie Ihr Clerk-Besucher-Tracking-Snippet in die neue Datei ein und klicken Sie auf Save. Ersetzen Sie INSERT_PUBLIC_API_KEY durch Ihren Public Key aus 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 }}"
    }
  });

  {% 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 -->
  1. Öffnen Sie theme.liquid und fügen Sie dies direkt vor </head> ein:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

3. Bestell-Tracking installieren #

  1. Gehen Sie in Shopify zu Settings > Customer Events.
  2. Klicken Sie auf Add custom pixel, benennen Sie es Clerk.io, dann klicken Sie auf Add pixel.
  3. Fügen Sie Ihren Clerk Sales Tracking Code ein und klicken Sie auf 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. Klicken Sie auf Connect und bestätigen Sie.

4. Synchronisieren Sie Ihre Daten #

  1. Gehen Sie in Shopify zu Apps > App and sales channel settings und klicken Sie auf Develop apps.
  2. Klicken Sie auf Create app, benennen Sie es “Clerk.io”, wählen Sie den App-Entwickler und klicken Sie erneut auf Create app.
  3. Klicken Sie auf Configuration → Admin API integration → Configure.
  4. Unter Admin API access scopes gewähren Sie Lesezugriff (Scopes beginnend mit read_) auf Folgendes:
    • Kunden
    • Inventar
    • Sprachen
    • Märkte
    • Online-Shop-Seiten
    • Bestellungen
    • Produkte
    • Store-Inhalte
    • Übersetzungen
  5. Klicken Sie auf Save, dann auf Install App → Install.
  6. Öffnen Sie API Credentials und kopieren Sie Ihre Shopify-Domain sowie den API Key der App, Access Token und Secret Key.
  7. Gehen Sie zu my.clerk.io > Data > Configuration und fügen Sie diese Werte in das Formular ein. Wählen Sie gegebenenfalls eine Standardbildgröße aus und klicken Sie dann auf Start Sync.

Komplette Installationsbeispiel #

Shopify hat die Art und Weise aktualisiert, wie Private Apps hinzugefügt werden. Wir arbeiten an einer neuen Version des Videos. Bis dahin sehen Sie hier, wie Sie eine Private App hinzufügen.

In diesem Video erhalten Sie einen vollständigen Überblick darüber, wie man Clerk.io auf einem Shopify-Webshop einrichtet.

Mehrere Domains/Sprachen #

Die einfachste Möglichkeit, Clerk.io in Standard-Setups über mehrere Domains hinweg zu implementieren, besteht darin, für jede Domain einen separaten Store in my.clerk.io zu erstellen und diese mit den einzelnen Shopify-Sprachdomains zu synchronisieren.

Dadurch können Sie Produkte, Verkäufe, Währungen usw. trennen, um jede Domain im Überblick zu behalten.

  1. Erstellen Sie zunächst Ihren Haupt-Store und folgen Sie der Setup-Anleitung, um Ihren Store mit Clerk.io zu verbinden. Wählen Sie die Recommendations und/oder Search, die Sie in Ihrem Webshop anzeigen möchten.

  2. Wenn Sie den ersten Setup abgeschlossen haben, klicken Sie auf "+ Neuen Store hinzufügen" – die letzte Option in der Dropdown-Liste (normalerweise unterhalb Ihrer bestehenden Stores und Ihrem Firmennamen):

3. Geben Sie auf der Neuen Store hinzufügen-Seite Ihre Domain-Details ein.

4. Klicken Sie auf Von bestehendem Store kopieren? und wählen Sie den Store aus, von dem Sie Inhalte kopieren möchten. Dann klicken Sie auf Store hinzufügen. Dadurch werden die Inhalte und Designs Ihres Haupt-Stores übernommen.

5. Folgen Sie erneut der Setup-Anleitung, um Clerk.io zu aktivieren, indem Sie auf Settings > Setup Guides klicken, um Daten zu synchronisieren für die neue Domain.

6. Nach Abschluss der Daten-Synchronisierung ist Ihre Domain bereit und nutzt dieselbe Konfiguration wie Ihr Haupt-Store.

7. Wiederholen Sie diesen Vorgang für jede Ihrer Shopify-Sprachdomains.

8. Zum Schluss passen Sie das Tracking-Script in Ihrem Shopify Theme an, um für jede Domain den richtigen Public Key einzufügen.

Hier ein Beispiel für ein Tracking-Script, das für mehrere Sprachen angepasst wurde:

<!-- 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 }}"
      }
    });

    ; (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 -->
Denken Sie daran, Überschriften in Content -> Edit -> Select Design auch in die richtige Sprache zu übersetzen.

Mehrere Inventare #

Wenn Sie einen einzelnen Store mit mehreren Inventaren und Sprachen haben, müssen Sie mehrere Clerk.io-Apps erstellen, um eine schnelle Daten-Synchronisierung zu gewährleisten. Dies ist notwendig, damit Stores nicht dasselbe Rate-Limit und die Wiederherstellungsrate in der Shopify ADMIN API teilen.

  • Gehen Sie im Shopify-Backend zu Apps > Develop apps für Ihren Store.
  • Klicken Sie auf den Button App erstellen und wiederholen Sie diese Schritte, bis Sie die gleiche Anzahl von „Clerk.io“-Apps wie Unterdomains für den Shop haben.

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.