Elements

Optionen

Fügen Sie Clerk.io-Elemente ganz einfach zu Ihrer Website hinzu.

Allgemein #

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

Die Designs werden bei Clerk.io gespeichert, und es ist nur notwendig, einen kleinen Embedcode auf der Seite einzufügen, auf der Produkte angezeigt werden sollen. Dies kann über den Bereich Embedded Code oder den Bereich Injection erfolgen.

Beliebig viele Element-Blöcke können auf einem einzelnen Design basieren, oder Sie können für jedes Element eigene Designs erstellen.

Sie können Ihre bestehenden Elements überprüfen und neue erstellen, indem Sie auf Search/Recommendations und anschließend Element im Seitenmenü klicken:

Jeder eindeutige Element-Block wird durch eigene Einstellungen gesteuert. Sie können für alle Element-Blöcke einen eindeutigen Namen wählen, der auch als Tracking-Label dient.

Die Settings-Seite jedes Element-Blocks ist in vier Abschnitte unterteilt, die über Edit Element zugänglich sind.

Benennen Sie Ihr Element #

Steuert den Name und die Tracking-Labels für den Element-Block.

Produktlogik auswählen #

Definiert, welche Produkttypen im Element angezeigt werden sollen.

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

Design wählen #

Hier können Sie auswählen, wie viele Produkte angezeigt werden und auf welchem Design das Element basieren soll. Wenn Sie eine title/headline-Variable in Ihrem Design haben, können Sie hier auch die Titel angeben, die für das Element angezeigt werden sollen.

In die Website einfügen #

Element-Blöcke sind an einen embedcode angehängt, der das Rendern auf allen Seiten ermöglicht, auf denen Sie Clerk.js eingefügt haben. Sie können entweder den Embedcode einfach an die gewünschte Stelle für dieses Element einfügen oder unser Injection-Feature nutzen.

Beachten Sie, dass Embedcodes möglicherweise Variablen wie product IDs, category IDs oder email benötigen, je nach Logik.

Verwendung von Embedded Code #

Embedcode ist ein kleiner Code-Schnipsel, den Sie in Ihre Website einfügen können. Er ist über die Option Using embedded code zu finden:

Verwendung von Injection #

Injection ist eine Funktion, mit der Sie Element-Blöcke in Ihre Website einfügen können, ohne den Embedcode manuell hinzufügen zu müssen. Dies erfolgt durch Auswahl von Using injection:

Nachfolgend eine Beschreibung der verschiedenen Injection-Optionen:

OptionBeschreibung
Eindeutiger CSS-Selektor zur IdentifizierungGeben Sie einen eindeutigen CSS-Selektor ein, der den Element-Block auf der Seite identifiziert. Wählen Sie außerdem aus, wo das Element eingefügt werden soll; Nach, Vor, Innerhalb oder Ersetzen.
Duplikate ausschließenWählen Sie, ob Sie Produkte ausschließen möchten, die bereits in anderen Clerk-Element-Blöcken auf derselben Seite angezeigt werden.
Kategorie-ID, Produkt-ID, Email CSS-SelektorWenn die Logik Produkte aus einer bestimmten Kategorie, von einem bestimmten Produkt oder einer bestimmten Email-Adresse anzeigt, können Sie hier den CSS-Selektor der Kategorie-, Produkt- oder Email-ID einfügen.
Kategorie-, Produkt-, Email-AttributWenn die Logik Produkte aus einer bestimmten Kategorie, für ein bestimmtes Produkt oder eine bestimmte Email-Adresse anzeigt, können Sie hier das Attribut eingeben, das den Kategorie-, Produkt- oder Email-Wert enthält. Z. B. wenn das Attribut value-category="category-123" ist, geben Sie in diesem Feld "value-category" ein.
Kategorie-ID, Produkt-ID, Email ID aus Attribut extrahieren, indem der String entfernt wirdWenn das Attribut, das den Kategorie-, Produkt- oder Email-Wert enthält, Teil eines längeren Strings ist, können Sie hier den zu entfernenden Teil eingeben. Z. B. wenn das Attribut value="category-123" ist und Sie die ID extrahieren möchten, tragen Sie in dieses Feld "category-" ein.

Überschriften #

Mit dem Standard-Setup in Element lassen sich Überschriften einfach verwalten.

Auf der Seite Edit Element klicken Sie auf Select Design, um das Eingabefeld Headline zu sehen:

Ändern Sie den Text in der Headline-Box und klicken Sie auf Save.

Die Änderung wird sofort nach Aktualisierung Ihres Webshops angezeigt.

Dynamische Textfeld-Tags #

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

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

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

Wechseln Sie zu Designs und klicken Sie auf Edit Design des Designs, das Sie ändern möchten:

Auf der Seite Edit Design fügen Sie im HTML Section: einen Überschriften-Tag mit {{ headline }} ein.

Klicken Sie auf Save & Close und Sie können eine Überschrift im Tab Element eingeben.

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

Alles, was Sie in HTML Section mit der Syntax {{ variable }} schreiben, kann als Eingabefeld aus Element verwendet werden.

Diese Tags können auch in jedem Textfeld eines Design Editor-Designs verwendet werden.

Doppelte Produkte entfernen #

Die Nutzung dieser Funktion führt dazu, dass mehrere Clerk.io Recommendations nacheinander statt gleichzeitig geladen werden, was die Ladezeit der Seite erhöht.

Stellen Sie sicher, dass sich der Kompromiss bei der Ladezeit lohnt, um Duplikate zu vermeiden.

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

Eine Möglichkeit ist die Option Exclude Duplicates im Bereich Inject Element, bei der Sie das Clerk-Element auswählen, von dem Sie Duplikate ausschließen möchten – entweder aus der Liste oder per CSS-Selektor.

Die andere Möglichkeit ist, das Attribut data-exclude-from an dem Clerk-Block hinzuzufügen, von dem Sie die Duplikate entfernen möchten. Der Wert des Attributs sollte ein CSS-Selektor für den anderen Block sein, um Duplikate zu verhindern.

Im folgenden Beispiel schließt das Element .clerk2 jedes Produkt aus, das sich im Element .clerk1 befindet, und das Element .clerk3 schließt alle Produkte aus, die sich entweder im .clerk1 oder .clerk2 Element befinden.

<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 darauf beschränken, nur die ersten n Produkte auszuschließen (z. B. sinnvoll, wenn Sie ein Element mit 20 Produkten haben, aber jeweils nur vier sichtbar sind).

Dies geschieht über die :limit(n)-Option (wobei n die erste Anzahl der auszuschließenden Produkte ist).

Hier dasselbe Beispiel wie oben, aber der Ausschluss-ID 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 die Anzeige bestimmter Produkte zu vermeiden, fügen Sie einfach das Attribut data-exclude zu einem bestehenden Embedcode hinzu.

Dies sollte eine Liste der Produkt-IDs sein, die nicht in dem Block angezeigt werden sollen.

Zum Beispiel:

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

Einblicke in Seitenaufrufe #

In den Listen unter Search > Elements und Recommendations > Elements können Sie mit der Maus über das grüne Yes/No-Badge in der Spalte Seen in last 24h fahren, um eine schnelle Übersicht zu erhalten.

Das Popup zeigt für die letzten 7 Tage:

  • Top 10 Seiten, auf denen das Element angezeigt wurde
  • Einzelne Aufrufzahlen pro Seite
  • Gesamtansichten über alle Seiten hinweg
  • Direkte Links zu den Seiten

Verwenden Sie dies, um die Platzierung zu überprüfen und herauszufinden, welche Seiten für jedes Element die meiste Sichtbarkeit bringen. Wenn ein Element keine aktuellen Aufrufe hat, wird das Badge mit No angezeigt 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.