Elements

Optionen

Fügen Sie Clerk.io-Elemente mühelos zu Ihrer Website hinzu.

Allgemeines #

Website Elements erleichtern die Arbeit mit Elements für Recommendations und Elements für Search results.

Die Designs werden bei Clerk.io gespeichert und Sie müssen nur einen kleinen Einbettungscode auf der Seite einfügen, auf der Sie Produkte anzeigen möchten. Dies kann über den Bereich Embedded Code oder den Bereich Injection erfolgen.

Beliebig viele Elementblöcke können auf einem einzigen Design basieren, oder Sie können separate Designs für jedes Element erstellen.

Um Elements anzusehen oder zu erstellen, öffnen Sie Search > Elements oder Recommendations > Elements im Seitenmenü.

Jeder einzigartige Element-Block wird über seine eigenen Einstellungen gesteuert. Sie können jedem Element-Block einen eindeutigen Namen geben, der auch als Tracking-Label dient.

Die Einstellungen-Seite jedes Element-Blocks ist in vier Abschnitte unterteilt, die Sie durch Klicken auf Edit Element aufrufen können.

Element benennen #

Steuert den Name und die Tracking-Labels des Element-Blocks.

Produktlogik wählen #

Definiert, welcher Produkttyp im Element angezeigt werden soll.

Sie können auch steuern, ob Filter angewendet werden sollen, beispielsweise wenn Sie nur Produkte über oder unter einem bestimmten Preis oder einer bestimmten Marke anzeigen möchten.

Design auswählen #

Hier können Sie wählen, wie viele Produkte angezeigt werden sollen und auf welchem Design das Element basiert. Wenn Sie eine title/headline Variable in Ihrem Design haben, können Sie hier die angezeigten Überschriften für das Element hinzufügen.

Facettenreihenfolge #

Wenn ein Element eine Facettenliste in seinem Design oder den Einfügeeinstellungen hat, können Sie die Attribute mit den gepunkteten Griffen neu anordnen. Ziehen Sie eine Zeile an die gewünschte Position und lassen Sie sie im gestrichelten Kasten los.

Um die Tastatur zu verwenden, fokussieren Sie eine Facettenzeile und drücken Alt + ↑ oder Alt + ↓. Screenreader geben die Bewegung an. Siehe Search facets oder category page facets für weitere Informationen.

In Webseite einfügen #

Element-Blöcke sind an einen Embedcode gebunden, der es ermöglicht, sie auf allen Seiten darzustellen, auf denen Clerk.js eingefügt wurde. Sie können den Embedcode einfach an der gewünschten Stelle einfügen oder unsere Injection-Funktion nutzen.

Beachten Sie, dass Einbettungscodes je nach Logik möglicherweise Variablen wie Produkt-IDs, Kategorie-IDs oder E-Mail benötigen.

Verwendung des eingebetteten Codes #

Der Embedcode ist ein kurzer Codeschnipsel, den Sie in Ihre Website einfügen. Wählen Sie Using embedded code in den Insert into website Einstellungen des Elements, um ihn zu kopieren.

Verwendung von Injection #

Injection ist eine Funktion, mit der Sie Element-Blöcke in Ihre Website einfügen können, ohne den Embedcode manuell zu ergänzen. Wählen Sie Using injection in den Insert into website Einstellungen des Elements, um es zu konfigurieren.

URL-Targeting #

Mit URL-Targeting steuern Sie genau, wo ein Element angezeigt wird. Fügen Sie beliebig viele URLs hinzu und wählen Sie dann, wie der Seitenpfad mit ihnen abgeglichen werden soll:

Option	Beschreibung
Includes one of	Zeigt das Element an, wenn die Seiten-URL einen der aufgeführten Werte enthält.
Is	Zeigt das Element nur auf dem exakten Pfad an.
Is not	Zeigt das Element auf jedem Pfad außer dem exakten Pfad an.
Does not include one of	Versteckt das Element, wenn die Seiten-URL einen der aufgeführten Werte enthält.

Nachfolgend eine Beschreibung der verschiedenen Injection-Optionen:

Option	Beschreibung
CSS-Selektor und Position auswählen	Geben Sie einen eindeutigen CSS-Selektor ein, der das Ziel auf der Seite identifiziert. Wählen Sie, wo das Element eingefügt werden soll: After, Before, Inside first, Inside last, oder Replace.
Ergebnisausrichtung	Beim Hinzufügen der Live Search per Injection wählen Sie, wie die Ergebnisse im Verhältnis zum Suchfeld ausgerichtet werden: Left, Center, Right, Below, oder Off.
Duplikate ausschließen	Wählen Sie aus, ob Sie Produkte ausschließen möchten, die bereits in anderen Clerk Elementblöcken auf derselben Seite angezeigt werden.
Kategorie-ID, Produkt-ID, Email-CSS-Selektor	Wenn die Logik so eingestellt ist, dass Produkte aus einer bestimmten Kategorie, einem bestimmten Produkt oder einer bestimmten Email-Adresse angezeigt werden, können Sie hier den CSS-Selektor der Kategorie-, Produkt- oder Email-ID eingeben.
Kategorie-, Produkt-, Email-Attribut	Wenn die Logik so eingestellt ist, dass Produkte aus einer bestimmten Kategorie, einem bestimmten Produkt oder für eine bestimmte Email-Adresse angezeigt werden, können Sie hier das Attribut eintragen, das den Wert der Kategorie, des Produkts oder der Email enthält. Beispiel: Wenn das Attribut `value-category="category-123"` ist, tragen Sie `"value-category"` in dieses Feld ein.
Kategorie-ID, Produkt-ID, Email-ID aus Attribut extrahieren und String entfernen	Wenn das Attribut, das den Wert für Kategorie, Produkt oder Email-Adresse enthält, Teil eines längeren Strings ist, können Sie den zu entfernenden String-Teil hier eintragen. Beispiel: Ist das Attribut `value="category-123"` und Sie möchten die ID extrahieren, tragen Sie `"category-"` in dieses Feld ein.

Mehrere IDs #

Für den Product ID CSS selector können Sie mehrere Elemente mit demselben Selektor ansprechen.

Wenn der Selektor mit mehreren Produkt-IDs übereinstimmt, sammelt Clerk alle passenden Werte und fasst sie zu einer Liste zusammen.

Dies ist praktisch bei Seiten wie Warenkörben, wo jede Zeile eine Produkt-ID enthält.

<input class="product-id" value="123">
<input class="product-id" value="456">
<input class="product-id" value="789">

Mit dem Selektor .product-id liest Clerk alle Werte wie oben als eine Produkt-ID-Liste aus.

IDs aus dem Clerk.js-Kontext lesen #

Wenn eine Logik eine Produkt-, Kategorie- oder Seiten-ID benötigt, kann die Injection-Funktion diese direkt aus dem Clerk('context', {...})-Aufruf lesen, den Clerk.js fürs Tracking nutzt.

Anstatt auf einen CSS-Selektor oder ein Attribut auf der Seite zu verweisen, wählen Sie Clerk.js context aus dem Read ID from Dropdown-Menü. Clerk.io verwendet dann den Wert, der für diesen ID-Typ im Kontext der aktuellen Seite gesetzt wurde.

Dies ist die einfachste Option, wenn die Plattform den Kontext bereits automatisch setzt — keine zusätzliche Konfiguration auf der Seite erforderlich.

Plattformen mit integriertem Kontext in der Extension #

Die folgenden Plattformen setzen den Clerk.js-Kontext automatisch als Teil ihrer offiziellen Clerk.io-Extension oder ihres Plugins:

Magento 1
Magento 2
WooCommerce
PrestaShop
Shopware 6

Plattformen mit Kontext im manuellen Clerk.js-Script #

Bei den folgenden Plattformen ist der Aufruf Clerk('context', {...}) im Standard Clerk.js-Tracking-Script inkludiert, das manuell beim Setup hinzugefügt wird:

Shopify
Dandomain
Lightspeed
SmartWeb
ScanNet
BigCommerce

Wenn Ihre Plattform oben nicht aufgeführt ist, können Sie diese Funktion trotzdem nutzen, indem Sie den Aufruf Clerk('context', {...}) manuell in Ihr Clerk.js-Tracking-Skript einfügen. Siehe die Clerk.js-Anleitung für Details.

Live schalten #

Nutzen Sie den Vorschaumodus, um ein Element in Ihrem Webshop zu testen, bevor es für Ihre Besucher sichtbar wird. Wenn es fertig ist, schalten Sie es aus der Elements-Liste in my.clerk.io live.

Vorschau ansehen #

Ein Element im Vorschaumodus bleibt für reguläre Besucher verborgen. Um es zu sehen, fügen Sie ?clerk_content_mode=preview an die URL der Seite an, auf der es installiert ist, und öffnen Sie dann diese URL. Zum Beispiel:

https://example.com/?clerk_content_mode=preview

Falls die URL bereits ein ? enthält, fügen Sie stattdessen &clerk_content_mode=preview hinzu. Das Öffnen einer Vorschau-URL ermöglicht Ihnen die Vorschau von Elementen; Es macht sie nicht für andere Besucher live.

Sichtbarkeit ändern #

Öffnen Sie in my.clerk.io Search > Elements oder Recommendations > Elements.
Finden Sie das Element, das Sie live schalten möchten. Klicken Sie in der Spalte Visible To auf Preview, um zu All visitors zu wechseln. Das Element ist nun live und ohne den Vorschau-Parameter in der URL sichtbar.
Um es wieder in den Vorschaumodus zu versetzen, klicken Sie in derselben Spalte auf All visitors. Es wechselt zurück zu Preview und ist nur sichtbar, wenn Sie den Vorschau-URL-Parameter verwenden.

Die Sichtbarkeit wird für jedes Element separat eingestellt, wiederholen Sie dies also für jedes Element, das Sie live schalten möchten.

Nach dem Livegang öffnen Sie Ihren Webshop ohne clerk_content_mode=preview in der URL und überprüfen, ob jedes Element auf den gewünschten Seiten angezeigt wird.

Überschriften #

Das Verwalten von Überschriften ist mit dem Standard-Setup im Element einfach.

Auf der Seite Edit Element klicken Sie auf Select Design, um das Feld Headline zu finden.

Ändern Sie den Text im Headline-Feld und klicken Sie auf Save.

Die Änderung wird direkt nach dem Aktualisieren Ihres Webshops angezeigt.

Dynamische Textfeld-Tags #

Unsere Standarddesigns verwenden Tags, um verschiedene Überschriften für jedes Element zu setzen.

Diese Tags können in jedem Textfeld in Design Editor Designs und überall in Code Designs verwendet werden.

Tags haben die Syntax {{ variable }} und können beliebig benannt werden.

Öffnen Sie Designs und klicken Sie auf Edit Design für das Design, das Sie ändern möchten.

Setzen Sie auf der Edit Design-Seite {{ headline }} in den HTML-Abschnitt ein.

Klicken Sie auf Save & Close und Sie können dann in Ihrem Element-Tab eine Überschrift schreiben.

Sie können beliebig viele Textfelder hinzufügen, Headline ist nur ein Beispiel.

Alles, was Sie im HTML Section mit der {{ variable }}-Syntax schreiben, kann anschließend als Eingabefeld aus Element verwendet werden.

Diese Tags können auch in einem beliebigen Textfeld eines Design Editor Desings verwendet werden.

Doppelte Produkte entfernen #

Wenn Sie diese Funktion verwenden, werden mehrere Clerk.io Recommendations nacheinander geladen, anstatt gleichzeitig. Das erhöht die Ladezeit der Seite.
Stellen Sie sicher, dass sich dieser Kompromiss zur Vermeidung von Duplikaten lohnt.

Clerk.js bietet zwei einfache Möglichkeiten, Duplikate über mehrere Recommendations-Elemente auf derselben Seite zu verhindern.

Die eine ist die Exclude Duplicates Option im Bereich Inject Element zu verwenden und das Clerk-Element, aus dem Sie Duplikate ausschließen möchten, entweder per Liste auszuwählen oder einen CSS-Selektor anzugeben.

Die andere Option ist, das data-exclude-from Attribut am Clerk-Block zu setzen, aus dem Sie die Duplikate entfernen möchten. Der Wert des Attributs sollte ein CSS-Selektor für den anderen Block sein, von dem Duplikate verhindert werden sollen.

Im Beispiel unten schließt das .clerk2 Element alle Produkte aus, die im .clerk1 Element enthalten sind, und das .clerk3 Element alle Produkte, die entweder in .clerk1 oder .clerk2 Elementen enthalten sind.

<span class="clerk clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  data-exclude-from=".clerk1"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  data-exclude-from=".clerk1,.clerk2"
  data-template="@clerk-banner-3">
</span>

Sie können den Ausschluss auch einschränken, nur die ersten n Produkte auszuschließen (sinnvoll z.B. bei einem Element mit 20 Produkten, von denen aber immer nur vier sichtbar sind).

Dies erfolgt über die Option :limit(n) (wobei n die erste Anzahl an Produkten ist, die ausgeschlossen werden sollen).

Hier das gleiche Beispiel wie oben, aber der Ausschluss-Selektor betrifft nur die ersten fünf Produkte:

<span class="clerk clerk1"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  id="clerk2"
  data-exclude-from=".clerk1:limit(5)"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  id="clerk3"
  data-exclude-from=".clerk1:limit(5),.clerk2:limit(5)"
  data-template="@clerk-banner-3">
</span>

Bestimmte Produkte ausschließen #

Um bestimmte Produkte nicht anzuzeigen, fügen Sie einfach das Attribut data-exclude zu einem bestehenden Embedcode hinzu.

Dies sollte eine Liste der Produkt-IDs sein, die Sie in diesem Block nicht anzeigen möchten.

Beispiel:

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654]">
</span>

Seitenansichten-Insight #

In den Listen unter Search > Elements und Recommendations > Elements bewegen Sie den Mauszeiger über das grüne Ja/Nein-Badge in der Spalte Seen in last 24h, um ein schnelles Insight zu öffnen.

Das Popup zeigt die letzten 7 Tage:

Die Top 10 Seiten, auf denen das Element erschien
Einzelne Aufrufzahlen pro Seite
Gesamtaufrufe über alle Seiten
Direkte Links zu den Seiten

Nutzen Sie dies, um die Platzierung zu überprüfen und herauszufinden, welche Seiten die meiste Sichtbarkeit für jedes Element erzeugen. Falls ein Element keine aktuellen Aufrufe hat, zeigt das Badge No und das Popup bleibt leer.

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