Get Started

Bringen Sie Clerk in nur wenigen Schritten auf Ihrem Shopify-Shop zum Laufen. Diese Anleitung führt Sie durch die Verbindung Ihres Shops, die Installation des Trackings und die Synchronisierung Ihrer Daten.

Ihren Shop verbinden #

Der erste Schritt bei der Installation von Clerk ist die Verbindung Ihres Shops mit Ihrem Clerk-Konto.

Das unten stehende Video zeigt Ihnen Schritt für Schritt, was zu tun ist. Verwenden Sie den Rest der Anleitung als Referenz.

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

Shop hinzufügen #

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

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

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

4. Klicken Sie auf Add Store.

Besucher-Tracking installieren #

1. Gehen Sie in Ihrem Shopify-Backend zu Online Store > Themes.

2. Klicken Sie bei dem Theme, das Sie bearbeiten möchten, auf ... > Edit code.

3. Öffnen Sie settings_schema.json und fügen Sie das Clerk-Settings-Snippet am unteren Ende, direkt vor der letzten ], hinzu.

,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}

4. Klicken Sie auf Save.

5. Unter Snippets klicken Sie auf Add a new snippet mit dem Namen clerk-tracking und dann auf Done.

6. 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 von 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 -->

7. Öffnen Sie theme.liquid und fügen Sie Folgendes direkt vor </head> ein:

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

Order-Tracking installieren #

1. Gehen Sie in Shopify zu Settings > Customer Events.

2. Klicken Sie auf Add custom pixel, benennen Sie es Clerk.io und klicken Sie dann 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,
    }),
  });
});

4. Klicken Sie auf Connect und bestätigen Sie.

Daten synchronisieren #

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 sie “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. Gewähren Sie unter Admin API access scopes Lesezugriff (Scopes, die mit read_ beginnen) auf Folgendes:

   • Customers

   • Inventory

   • Locales

   • Markets

   • Online Store Pages

   • Orders

   • Products

   • Store Content

   • Translations

5. Klicken Sie auf Save, dann auf Install App → Install.

6. Öffnen Sie API Credentials und kopieren Sie Ihre Shopify-Domain sowie die API Key, Access Token und Secret Key der App.

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.

Vollständiges Installationsbeispiel #

Shopify hat die Methode zur Hinzufügung privater Apps aktualisiert. 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, was nötig ist, um Clerk in einem Shopify-Webshop einzurichten.

Mehrere Domains/Sprachen #

Die einfachste Möglichkeit, Clerk bei Standard-Setups auf mehreren Domains zu implementieren, besteht darin, für jede Domain einen separaten Store in my.clerk.io zu erstellen und diese mit jeder Ihrer Shopify-Sprachdomains zu synchronisieren.

So können Sie Produkte, Verkäufe, Währungen usw. getrennt halten und jede Domain individuell nachverfolgen.

Stores einrichten #

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

2. Nachdem Sie das erste Setup abgeschlossen haben, klicken Sie auf "+ Add new Store" – die letzte Option in der Dropdown-Liste (typischerweise unterhalb Ihres/Ihrer bestehenden Store(s) und Firmennamens):

3. Geben Sie auf der Add New Store-Seite Ihre Domain-Daten ein.

4. Klicken Sie auf Copy from existing Store? und wählen Sie den Store, von dem Sie Inhalte kopieren möchten. Klicken Sie dann auf Add Store. Hierdurch werden Content und Designs von Ihrem Hauptstore übertragen.

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

6. Nach Abschluss der Datensynchronisierung ist Ihre Domain bereit und übernimmt das gleiche Setup wie Ihr Hauptstore.

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

8. Ändern Sie abschließend das Tracking-Script in Ihrem Shopify-Theme, sodass für jede Domain der richtige Public Key verwendet wird.

Hier ein Beispiel für ein angepasstes Tracking-Script für mehrere Sprachen:

<!-- 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, die Headlines unter Content -> Edit -> Select Design ebenfalls in die richtige Sprache zu übersetzen.

Mehrere Lagerbestände #

Wenn Sie einen einzelnen Store mit mehreren Lagerbeständen und Sprachen haben, müssen Sie mehrere Clerk Apps erstellen, um eine schnelle Datensynchronisierung sicherzustellen.

So stellen Sie sicher, dass Stores nicht denselben 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 Create an app und wiederholen Sie diese Schritte, bis Sie für jede Subdomain Ihres Shops eine eigene “Clerk.io”-App erstellt haben.