Optionen

Allgemein #

Website Elements erleichtert 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 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 im Seitenmenü auf Search/Recommendations und anschließend auf Element klicken:

Jeder einzigartige Elementblock wird über eigene Einstellungen gesteuert. Sie können jedem Elementblock einen eindeutigen Namen geben, der auch als tracking-Label dient.

Die Settings-Seite jedes Elementblocks ist in vier Abschnitte unterteilt, auf die Sie durch Klicken auf Edit Element zugreifen können.

Benennen Sie Ihr Element #

Steuert den Namen und die Labels für das Tracking des Elementblocks.

Produktlogik wählen #

Definiert, welche Art von Produkten im Element angezeigt werden sollen.

Sie können außerdem steuern, ob Filters angewendet werden sollen, wenn Sie beispielsweise nur Produkte oberhalb oder unterhalb eines bestimmten Preises oder einer bestimmten Marke anzeigen möchten.

Design auswählen #

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

In die Website einfügen #

Elementblöcke werden einem embedcode zugewiesen, der sie auf allen Seiten renderbar macht, auf denen Clerk.js eingefügt wurde. Sie können entweder einfach den embedcode an der gewünschten Stelle einfügen oder unsere Injection-Funktion nutzen.

Beachten Sie, dass Einbettungscodes je nach Logik Variablen wie product IDs, category IDs oder email benötigen können.

Verwendung von Embedded Code #

Der Embedded Code ist ein kleiner Code-Schnipsel, den Sie in Ihre Website einfügen können. Er ist zu finden, indem Sie Using embedded code wählen:

Verwendung von Injection #

Injection ist eine Funktion, mit der Sie Elementblöcke in Ihre Website einfügen können, ohne den Einbettungscode manuell hinzuzufügen. Dies geschieht durch Auswahl von Using injection:

Nachfolgend eine Beschreibung der verschiedenen Injection-Optionen:

Mehrere IDs #

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

Wenn der Selektor auf mehrere Produkt-IDs passt, sammelt Clerk alle übereinstimmenden Werte und fasst sie zu einer Liste zusammen.

Dies ist nützlich auf Seiten wie Warenkörben, bei denen jeder Posten ein Produkt-ID-Element 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 obigen Werte als eine Produkt-ID-Liste aus.

Headlines #

Die Verwaltung von Headlines ist mit dem Standard-Setup in Element einfach.

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

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

Die Änderung wird angezeigt, sobald Sie Ihren Webshop aktualisieren.

Dynamische Textfeld-Tags #

Unsere Standarddesigns verwenden Tags, um für jedes Element verschiedene Headlines festzulegen.

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

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

Gehen Sie zunächst zu Designs und klicken Sie auf Edit Design für das entsprechende Design:

Fügen Sie auf der Seite Edit Design ein Headline-Tag mit {{ headline }} im HTML Section ein:

Klicken Sie auf Save & Close und anschließend können Sie eine Headline im Element-Tab eintragen.

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 als Eingabefeld aus Element verwendet werden.

Diese Tags können ebenfalls in jedem Textfeld in einem Design Editor-Design genutzt werden.

Entfernen von doppelten Produkten #

Die Nutzung dieser Funktion führt dazu, dass mehrere Clerk.io-Recommendations nacheinander und nicht 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 Wege, Duplikate über mehrere Recommendations-Elemente auf derselben Seite zu vermeiden.

Der eine ist die Verwendung der Option Exclude Duplicates im Abschnitt Inject Element, wobei Sie das Clerk-Element bestimmen, von dem Sie Duplikate ausschließen möchten – entweder durch Auswahl aus der Liste oder durch Angabe eines CSS-Selectors.

Die andere Option ist das Hinzufügen des Attributs data-exclude-from am Clerk-Block, von dem Sie Duplikate ausschließen möchten. Der Wert des Attributs sollte ein CSS-Selektor für den anderen Block sein, von dem keine Duplikate übernommen werden sollen.

Im folgenden Beispiel 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 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 darauf beschränken, nur die ersten n Produkte auszuschließen (praktisch, wenn Sie ein Element mit 20 Produkten haben, aber zu einem Zeitpunkt nur vier sichtbar sind).

Dies geschieht über die Option :limit(n) (wobei n die erste Anzahl von auszuschließenden Produkten ist).

Hier das gleiche Beispiel wie oben, aber der Ausschluss bezieht sich nur auf 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 mit den Produkt-IDs sein, die im Block nicht angezeigt werden sollen.

Zum Beispiel:

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

Page views insight #

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

Das Popup zeigt für die letzten 7 Tage:

• Die 10 wichtigsten Seiten, auf denen das Element angezeigt wurde
• Einzelne Seitenaufrufe pro Seite
• Gesamte Aufrufe über alle Seiten hinweg
• Direkte Links zu den Seiten

Nutzen Sie dies, um die Platzierung zu überprüfen und herauszufinden, welche Seiten die meiste Sichtbarkeit zu jedem Element beitragen. Wenn ein Element keine aktuellen Aufrufe hat, zeigt das Badge No und das Popup bleibt leer.