Shopify

Get Started

Verbinden Sie Ihren Shop #

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

Das folgende Video zeigt Ihnen Schritt für Schritt, was zu tun ist. Verwenden Sie den Rest des Leitfadens als Referenz :)

Nachdem Sie diese einfachen Schritte befolgt haben, werden Sie in der Lage sein, Ihre Live Demo Store, zu sehen, die Ihnen einen persönlichen Überblick darüber gibt, wie Sachbearbeiter.io in Ihrem Webshop funktionieren wird. Wenden Sie sich an Ihre Clerk.io Kontaktperson, um die Live-Demo zu sehen.

1. Laden hinzufügen #

  1. Melden Sie sich bei mein.kanzler.io an. Wenn Sie dies zum ersten Mal tun, sehen Sie die Seite “Neuen Laden hinzufügen”.

  2. Schreiben Sie die Name und Bereich Ihres Webshops

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

  4. Klicken Sie auf Shop hinzufügen.

2. Konfigurieren Sie die Shopify-Verbindung #

  1. Klicken Sie im Hauptmenü der Einrichtungsanleitung auf Synchronisieren Sie Ihre Daten

  2. Dieser Einrichtungsleitfaden zeigt Ihnen, was Sie in Ihrem Shopify-Backend tun müssen. Hier ist ein Überblick über die Schritte:

  3. Gehen Sie im Shopify-Backend zu Apps > Einstellungen für Apps und Verkaufskanäle > Apps entwickeln

  4. Klicken Sie auf Eine App erstellen in der oberen rechten Ecke

  5. Geben Sie der App einen Namen wie “Clerk.io” und wählen Sie sich selbst als App-Entwickler aus.

  6. Klicken Sie auf . App erstellen

  7. Klicken Sie auf Konfiguration und suchen Sie API-Integration verwalten. Klicken Sie auf Konfigurieren

  8. Wählen Sie unter Zugriffsbereiche der Admin-API Zugriff lesen (beginnt mit “read_”) für Folgendes aus

  • Kunden
  • Warenbestand
  • Seiten des Online-Shops
  • Bestellungen
  • Preisregeln
  • Produkte
  • Veröffentlichungen
  • Ladenlokale
  • Shopify Märkte
  • Shop-Inhalt
  • Übersetzungen

  1. Klicken Sie auf speichern.

  2. Klicken Sie auf App installieren und dann auf Installieren in dem angezeigten Popup.

  3. Klicken Sie auf die Registerkarte API-Anmeldeinformationen.

3. Synchronisieren Sie Ihren Shop #

  1. Kopieren Sie nun alle notwendigen Informationen in die Felder in my.clerk. io:
  • Shopify-Domäne (yourdomain.myshopify.com)
  • API-Schlüssel
  • Admin API-Zugangs-Token
  • API-Geheimschlüssel
  1. Klicken Sie auf Synchronisierung starten. Warten Sie, bis die Synchronisierung abgeschlossen ist. Trinken Sie vielleicht eine Tasse Kaffee, wenn Sie einen großen Produktkatalog haben ;)
  2. Das war’s!

4. Hinzufügen von Clerk.io zu deinem Theme #

  1. Installieren Sie das Besucher-Tracking (clerk.js)
  • Melden Sie sich im Shopify-Backend an und gehen Sie zu Online-Shop → Themes.
  • Klicken Sie rechts neben dem Thema, das Sie installieren möchten Clerk, auf "…" → Code bearbeiten.
  • Öffnen Sie die Datei settings_schema.json. Fügen Sie das Einstellungs-Snippet Clerk am Ende der Datei ein, kurz vor dem letzten ].
,  
{
"name": "Clerk settings",
"settings": [
   {
   "type": "header",
   "content": "Clerk"
   },
   {
   "type": "checkbox",
   "id": "enable_clerk",
   "label": "Enable Clerk",
   "default": true
   }
]
}
settins_schema.json screenshot
  • Drücken Sie . Speichern
  • Klicken Sie in der linken Leiste unter “Snippets” auf Add a new snippet namens clerk-tracking, und klicken Sie auf Done.
  • Fügen Sie das folgende Clerk.io-Tracking-Skript in die Datei ein und klicken Sie auf Speichern. Denken Sie daran, PUBLIC_KEY durch den öffentlichen API-Schlüssel Ihres Clerk Shops zu ersetzen.
Clerk.io-Tracking-Skript
<!-- 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 = 'PUBLIC_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 -->
  • Öffnen Sie die Datei theme.liquid. Fügen Sie den unten stehenden Verweis auf das Tracking-Skript in die Kopfzeile des Dokuments ein, direkt vor dem </head>-Tag.
{% if settings.enable_clerk %}
    {% render 'clerk-tracking' %}
{% endif %}
theme.liquid screenshot

5. Auftragsverfolgung installieren #

  • Gehen Sie im Shopify-Backend zu Einstellungen → Kunde Events.
  • Klicken Sie auf . Benutzerdefiniertes Pixel hinzufügen, nennen Sie es Clerk.io und klicken Sie auf Pixel hinzufügen.
  • Fügen Sie den folgenden Verkaufsverfolgungs-Code in das Code-Feld ein. Klicken Sie auf . Speichern.
  • Nach dem Speichern, klicken Sie auf Verbinden und bestätigen Sie Verbinden.
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,
        }),
    });
});
script for pixel tracking screenshot

Vollständige Installation Beispiel #

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

In diesem Video erhalten Sie einen vollständigen Überblick über die Einrichtung von Clerk.io in einem Shopify-Webshop.

Mehrere Domains/Sprachen #

Der einfachste Weg, Sachbearbeiter.io in mehreren Domains in Standard-Konfigurationen zu implementieren, ist die Erstellung eines separater Speicher für jede Domain in mein.kanzler.io und die anschließende Synchronisierung mit jeder Ihrer Shopify-Sprachdomains.

Auf diese Weise können Sie Produkte, Verkäufe, Währungen usw. trennen, um die Übersicht über die einzelnen Domains zu behalten.

  1. Beginnen Sie mit der Erstellung Ihres Hauptspeicher und folgen Sie der Einrichtungsanleitung, um Ihren Shop mit Clerk.io zu verbinden, und wählen Sie die Empfehlungen und/oder Suchergebnisse, die Sie in Ihrem Webshop anzeigen möchten.

  2. Wenn Sie mit der Ersteinrichtung fertig sind, gehen Sie zurück zur Startseite von my.clerk.io (indem Sie auf das Sachbearbeiter.io Logo im Linke obere Ecke des Seitenmenüs klicken) und klicken Sie dann auf "+ Neuen Laden hinzufügen" die letzte Option der Scroll-Down-Liste (in der Regel unter dem/den bestehenden Shop(s) und Ihrem Firmennamen):

3. Klicken Sie auf Seite “Neuen Shop hinzufügen auf Erweitert, um alle Einstellungen zu sehen.

4. Geben Sie die Details Ihrer Domain ein und wählen Sie Ihren Hauptshop aus der Liste

Inhalt aus bestehendem Shop kopieren Dropdown-Menü und klicken Sie dann auf Shop hinzufügen.

Dadurch werden die Seiten Inhalt und Entwürfe aus Ihrem Hauptgeschäft übernommen.

5. Nun können Sie wieder der Setup-Anleitung folgen, um Sachbearbeiter.io zu aktivieren, indem Sie auf Erste Schritte klicken, um Daten synchronisieren für mit der neuen Domäne.

6. Dies ermöglicht Ihnen die Synchronisierung Ihrer Domain mit Ihrem Shop unter mein.kanzler.io durch

die Einrichtungsanleitung.

7. Wenn Daten synchronisieren fertig ist, ist Ihre Domain bereit und verwendet die gleiche

Einrichtung wie Ihr Hauptshop.

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

Denken Sie daran, auch die Überschriften auf Inhalt-> Bearbeiten -> Design auswählen in die richtige Sprache zu übersetzen.

Wenn Sie ein einzelnes Geschäft mit mehrere Beständen und Sprache haben, müssen Sie mehrere Clerk .io Apps erstellen, um schnell Datenabgleich zu gewährleisten. Dies geschieht, damit nicht mehrere Geschäfte dieselbe Preisgrenze und Wiederherstellungsrate in der Shopify ADMIN API verwenden.

  • Gehen Sie im Shopify-Backend zu Apps → Apps für Ihren Shop entwickeln.
  • Klicken Sie auf die Schaltfläche Eine App erstellen Schaltfläche.
  • Geben Sie der App einen Namen wie "Clerk.io" zusammen mit einem anderen Namen, z. B. "Clerk.io (DE)" und wählen Sie App-Entwickler. Wiederholen Sie diesen Vorgang, bis Sie das Äquivalent "Clerk.io" Apps zur Anzahl der Subdomains für den Shop haben.
  • Klicken Sie auf . App erstellen.
  • Klicken Sie auf . Konfiguration und suchen Sie Admin API Integration. Klicken Sie auf . Konfigurieren.
  • Unter Admin API-Zugriffsbereichewählen Sie Lesezugriff (beginnt mit "read_") für die folgenden Bereiche:
    • Produkte
    • Bestellungen
    • Kunden
    • Warenbestand
    • Online-Shop-Seiten
    • Inhalt des Shops
    • Übersetzungen
    • Märkte
    • Lokalitäten
    • Preisregeln
    • Veröffentlichungen
  • Klicken Sie auf . Speichern am oberen Rand des Bildschirms.
  • Klicken Sie auf . App installieren und dann installieren. in dem Popup-Fenster.
  • Klicken Sie auf die API-Berechtigungsnachweise Registerkarte.
  • Kopieren Sie nun Ihre Shops Shopify-Domäne(n) und die privaten Apps API-Schlüssel, Zugriffstoken und Geheimschlüssel in die Felder unter Einstellungen für die Datensynchronisation in my.clerk.io ein.
  • Wählen Sie eine Standard Bildgröße und klicken Sie auf Synchronisierung starten. Warten Sie, bis die Synchronisierung abgeschlossen ist. Trinken Sie vielleicht eine Tasse Kaffee, wenn Sie einen großen Produktkatalog haben.

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