Jtl

Get Started

Installiere Clerk auf JTL, indem du diesen einfachen Schritten folgst

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

Shop verbinden #

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

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

Shop hinzufügen #

Nachdem Sie sich bei my.clerk.io angemeldet haben, müssen Sie zunächst Ihren Shop hinzufügen:

Beispiel, wie es aussehen sollte
  1. Geben Sie den Name und die Domain Ihres Webshops ein.

  2. Wählen Sie JTL als Platform und wählen Sie Ihre Currency.

  3. Klicken Sie auf Add Store.

  4. Sobald der Shop erstellt wurde, wird eine E-Mail mit Ihren öffentlichen und privaten Schlüsseln an den Inhaber der Account-Email gesendet.

Verbindung konfigurieren #

Klicken Sie im Hauptmenü des Setup Guides auf Install Extension:

Install extension page

Auf der nächsten Seite sehen Sie, was Sie tun müssen, um die JTL-Verbindung zu konfigurieren.

Gehen Sie zu Ihrem Clerk-Plugin im JTL-Backend und fügen Sie die Public- und Private-Keys aus dem Clerk-Store in die jeweiligen Felder ein.

Shop synchronisieren #

Nachdem Sie den Zugriff erlaubt haben, müssen Sie lediglich Ihren Shop synchronisieren.

Gehen Sie zurück zum Setup Guide und klicken Sie auf Sync Your Data:

Sync your data page

Geben Sie die Details Ihres Shops ein und klicken Sie auf Start Sync.

Die JTL-Feed-URL sollte gemäß dieser Anleitung erstellt werden: Erstellung von Datenfeeds in JTL.

Vollständiges Installationsbeispiel #

WICHTIG: Sie sollten das Plugin (S360 Clerk) in Ihrem JTL-Backend unter Plugins installiert haben

Diese Dokumentation führt Sie durch folgende Schritte:

Shop hinzufügen #

Jeder Store in Clerk ist eine isolierte Umgebung mit eigenen Daten, API-Schlüsseln und einem Dashboard.

Das erste, was Sie bei der Einrichtung Ihres Clerk-Kontos tun müssen, ist, Ihren ersten Store zu erstellen:

Wie der Bildschirm zur Shoperstellung aussieht

Anschließend führt Sie der Setup Guide durch den weiteren Einrichtungsprozess.

Beachten Sie, dass bei jeder Shoperstellung eine E-Mail mit Public- und Private-Keys an den Inhaber des Firmenkontos gesendet wird. Damit wird ein sicherer Zugang zwischen Clerk und JTL hergestellt.

Trackingskripte installieren #

Mit dem S360 Clerk-Plugin können Sie sowohl Besucher- als auch Bestell-Trackingskripte aktivieren, die in Bereiche des Webshops eingefügt werden:

  • Das Besucher-Tracking-Skript, das Clerk initialisiert. Dieses muss im Header des Webshops eingebettet werden.

  • Das Bestelltracking-Skript, mit dem Bestellungen in Echtzeit nachverfolgt werden können. Dies wird normalerweise auf der Bestellbestätigungsseite installiert.

Sie können diese im JTL-Plugin unter dem Bereich ALLGEMEIN aktivieren:

Im Clerk-Plugin, wenn Sie etwas nach unten scrollen

Sind beide Skripte eingefügt, wird Clerk initialisiert.

Shop synchronisieren #

Um Ergebnisse anzuzeigen, muss Clerk mit den Produkten, Kategorien, Verkäufen, Seiten und Kunden von JTL in einem generierten Datenfeed synchronisiert werden.

Dies geschieht durch die Einrichtung eines Datenfeeds, sodass die Daten regelmäßig abgerufen werden können.

Weitere Informationen finden Sie in dieser Anleitung: Erstellung von Datenfeeds in JTL.

Wenn der Datenfeed generiert und Ihren Data Sync Einstellungen unter Systemstatus im my.clerk.io Backend hinzugefügt wurde.

Search und Recommendations hinzufügen #

Frontend-Elemente in Clerk bestehen aus zwei Teilen:

  • Einem Design, das die visuelle Darstellung der Produkte steuert. Dies kann an jeden gewünschten Stil angepasst werden, oder Sie verwenden eines unserer Standard-Design-Templates Vorlagen-Design zur Verwendung in Clerk.

  • Meistens verwenden Sie drei Designs: eines für Instant Search, die Search-Seite und Recommendations.

Beispiel eines Empfehlungssliders mit unserem Design Editor
  • Einem Content mit einem zugehörigen embedcode, der die Produkte anzeigt. Jeder Content hat in seinem Embedcode einen bestimmten Namen, den Sie in das entsprechende Feld Clerk TemplateName eintragen möchten. Dies dient der Kommunikation zwischen Ihrem Webshop und dem jeweiligen Clerk Content.

Der Setup Guide führt Sie durch die Positionierung der einzelnen Elemente in den meisten JTL-Setups.

Am Ende Ihrer Einrichtung sollten die Einstellungen im Plugin wie folgt aussehen. Die folgenden Bilder dienen nur zur Veranschaulichung.

Credentials
OptionBedeutung
API KeyIhr von Clerk erhaltener API Key
Private KeyIhr privater Legacy-API-Key von Clerk. Wird benötigt, um den Zugriff auf den Datenfeed einzuschränken.
LanguageSprache des Datenfeeds
KundengruppePreise für die Kundengruppe
CurrencyWährung im Datenfeed
Faceted designDesign der Facetten
Tracking and Search settings
KomponenteOptionBedeutung
AllgemeinCookieless Tracking verwendenTracking ohne Verwendung von Cookies
Warenkorb-Tracking verwenden?Informiert Clerk über Änderungen am Warenkorb (allgemeines Tracking des Warenkorbs)
E-Mails anonymisierenE-Mail-Adressen werden anonym (als Hash) an Clerk gesendet.
Live Suche (Header)Live Suche aktivieren?Ist dies deaktiviert, wird die Clerk Live Suche nicht im Frontend angezeigt.
Selektor LivesearchLive Search Selector unabhängig von Clerk
Clerk TemplateName LivesucheTemplate für die Live Suche (Clerk Backend → Search → Content → Live Search → In Webseite einfügen → Im Code den Wert von “data-template="@WERT’”)
Anzahl der Suchvorschläge in der Live SucheAnzahl der anzuzeigenden Suchvorschläge
Anzahl der Kategorie-VorschlägeAnzahl der anzuzeigenden Kategorie-Vorschläge
Anzahl der Seiten-VorschlägeAnzahl der anzuzeigenden Seiten-Vorschläge
PositionPosition des Live-Suchergebnisses in Bezug zum Selektor
Search (Ergebnisseite)Ergebnisseite aktivieren?Ist dies deaktiviert, wird die Clerk Ergebnisseite nicht im Frontend angezeigt.
Clerk TemplateName SearchTemplate für die Live Suche (Clerk Backend → Search → Content → Search → In Webseite einfügen → Im Code den Wert von “data-template="@WERT’”)
Position FacettenPosition der Facetten
Facetten in URL anzeigenFacetten in der URL anzeigen
Clerk Facets AttributeKommagetrennte Liste der verfügbaren Facetten (JTL-Merkmale)
Clerk Facets Attributes Multiple ValuesKommagetrennte Liste der verfügbaren Facetten mit Mehrfachwerten (JTL-Merkmale für ODER-Filterung)
Data feed and Recommendation settings
KomponenteOptionBedeutung
DatenfeedCron-VerarbeitungWie der Cron ausgelöst wird, um den Datenfeed zu generieren (ausführlich erklärt im Abschnitt Möglichkeiten der Datenfeed-Erstellung)
BatchsizeBatchgröße der Produkte im Feed (genauer erklärt im Abschnitt Batchsize)
ProduktseiteProduktslider aktivieren?Ist dies deaktiviert, wird der Slider auf der Produktseite nicht im Frontend angezeigt.
Artikel-Selector-SliderSelector für den Artikelslider unabhängig von Clerk
Clerk TemplateName ArticleNamen der Slidervorlagen, die ausgegeben werden sollen. Mehrere Namen können als kommagetrennte Liste angegeben werden.
Slider EinfügemethodeWie der Slider dem Selektor hinzugefügt wird (After, Append, Before, Prepand, ReplaceWith)
Duplikate filternVerhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)
WarenkorbseiteWarenkorbsilder aktivieren?Ist dies deaktiviert, wird der Slider auf der Warenkorbseite nicht im Frontend angezeigt.
Warenkorb-Selector-SliderSelector für den Warenkorbslider unabhängig von Clerk
Clerk TemplateName Shopping CartNamen der Slidervorlagen, die ausgegeben werden sollen. Mehrere Namen können als kommagetrennte Liste angegeben werden.
Slider EinfügemethodeWie der Slider dem Selektor hinzugefügt wird (After, Append, Before, Prepand, ReplaceWith)
Duplikate filternVerhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)
PowerstepPowerstep-Slider aktivieren?Ist dies deaktiviert, wird der Slider im Powerstep nicht im Frontend angezeigt.
Powerstep-SelectorSelector für den Powerstep-Slider unabhängig von Clerk
Clerk TemplateName PowerstepNamen der Slidervorlagen, die ausgegeben werden sollen. Mehrere Namen können als kommagetrennte Liste angegeben werden.
Powerstep EinfügemethodeWie der Slider dem Selektor hinzugefügt wird (After, Append, Before, Prepand, ReplaceWith)
Duplikate filternVerhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)
Category and exit intent settings
KomponenteOptionBedeutung
KategorieseiteKategorieseiten-Slider aktivieren?Ist dies deaktiviert, wird der Slider auf der Kategorieseite nicht im Frontend angezeigt.
Kategorie-Selector-SliderSelector für den Kategorieslider unabhängig von Clerk
Clerk TemplateName Shopping CartNamen der Slidervorlagen, die ausgegeben werden sollen. Mehrere Namen können als kommagetrennte Liste angegeben werden.
Slider EinfügemethodeWie der Slider dem Selektor hinzugefügt wird (After, Append, Before, Prepand, ReplaceWith)
Duplikate filternVerhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)
Exit IntentExit Intent Slider aktivieren?Ist dies deaktiviert, wird die Exit Intent nicht im Frontend angezeigt.
Clerk TemplateName Exit IntentTemplate für den Exit Intent

Mehrere Domains #

Die einfachste Möglichkeit, Clerk in mehreren Domains in Standard-Setups zu implementieren, besteht darin, für jede Domain einen separaten Store in my.clerk.io zu erstellen und diese dann jeweils mit Ihrer JTL-Sprachdomain zu synchronisieren.

So können Sie Produkte, Verkäufe, Währungen etc. je Domain getrennt halten.

  1. Starten Sie mit der Erstellung Ihres Hauptstores und folgen Sie dem Setup Guide zum Verbinden Ihres Stores mit Clerk, und wählen Sie die Recommendations und/oder Search Results, die Sie in Ihrem Webshop anzeigen möchten.

  2. Nachdem Sie die Grundeinrichtung abgeschlossen haben, kehren Sie zur Startseite von my.clerk.io zurück (indem Sie auf das Clerk-Logo in der oberen linken Ecke des Seitenmenüs klicken) und klicken dann auf "+ Add new store" ganz unten in der Auswahlliste (in der Regel unter Ihren bestehenden Stores und dem Firmennamen):

Add new store dropdown
  1. Auf der Seite Add New Store klicken Sie auf Advanced, um alle Einstellungen zu sehen.
Advanced settings
  1. Tragen Sie die Details Ihrer Domain ein und wählen Sie Ihren Hauptstore aus dem Dropdown-Menü Copy Content From Existing Store aus. Klicken Sie dann auf Add Store. Damit werden Content und Designs von Ihrem Hauptstore übernommen.
Copy content from existing store
  1. Nun können Sie den Setup Guide erneut aufrufen, um Clerk für die neue Domain zu aktivieren, indem Sie auf Getting Started und dann Sync Data klicken.
Getting started page
  1. Damit können Sie Ihre Domain über den Setup Guide mit Ihrem Store bei my.clerk.io synchronisieren.

  2. Nach Abschluss der Data Sync ist Ihre Domain bereit und verwendet das gleiche Setup wie Ihr Hauptstore.

  3. Wiederholen Sie diesen Vorgang für jede Ihrer JTL-Sprachdomains. Denken Sie daran, auch die Headlines im Content-> Edit -> Select Design auf die richtige Sprache zu übersetzen.

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