Optionen

Allgemein #

Website Elements erleichtert die Arbeit mit Sliders 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 Element-Blöcke können auf einem einzelnen Design basieren, oder Sie können für jedes Element separate Designs erstellen.

Sie können Ihre bestehenden Elemente überprüfen und neue erstellen, indem Sie auf Search/Recommendations und dann Element im Seitenmenü klicken:

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

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

Seitenaufrufe-Einblick #

In den Listen unter Search > Elements und Recommendations > Sliders bewegen Sie die Maus über das grüne Ja/Nein-Abzeichen in der Spalte Seen in last 24h, um einen schnellen Einblick zu öffnen.

Das Popup zeigt für die letzten 7 Tage:

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

Verwenden Sie dies, um die Platzierung zu überprüfen und herauszufinden, welche Seiten die meiste Aufmerksamkeit für jedes Element generieren. Wenn ein Element keine aktuellen Aufrufe hat, wird das Abzeichen No angezeigt, und das Popup bleibt leer.

Benennen Sie Ihr Element #

Steuert den Name und die Labels für das Tracking des Element-Blocks.

Produktlogik wählen #

Legt fest, welche Art von Produkten im Element angezeigt werden sollen.

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

Design auswählen #

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

In die Website einfügen #

Element-Blöcke sind mit einem Embedcode verknüpft, der es ermöglicht, sie auf allen Seiten anzuzeigen, auf denen Sie Clerk.js eingefügt haben. Sie können entweder einfach den Embedcode dort einfügen, wo Sie dieses Element anzeigen möchten, oder unsere Injection-Funktion verwenden.

Beachten Sie, dass für Embedcodes möglicherweise Variablen wie product IDs, category IDs oder email benötigt werden, abhängig von der Logik.

Verwendung des Embedcode #

Der Embedcode ist ein kleiner Code-Schnipsel, den Sie in Ihre Website einfügen können. Sie finden ihn unter Using embedded code:

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 geschieht, indem Sie Using injection auswählen:

Nachfolgend eine Beschreibung der verschiedenen Injection-Optionen:

Headlines #

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

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

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

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

Dynamische Textfeld-Tags #

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

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 jeden Namen haben, den Sie wählen.

Gehen Sie zunächst zu Designs und klicken Sie Edit Design für das Design, das Sie ändern möchten:

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

Klicken Sie auf Save & Close und Sie können dann eine Überschrift über Ihre Element-Registerkarte schreiben.

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

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

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

Doppelte Produkte entfernen #

Die Verwendung dieser Funktion erzwingt das sequentielle Laden mehrerer Clerk.io Recommendations anstelle des gleichzeitigen Ladens und erhöht somit die Seitenladezeit.

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

Clerk.js bietet zwei einfache Möglichkeiten, Duplikate in mehreren Recommendations-Slidern auf derselben Seite zu verhindern.

Eine Möglichkeit ist die Option Exclude Duplicates im Bereich Inject Element zu verwenden und das Clerk-Element auszuwählen, von dem Sie Duplikate ausschließen möchten – entweder durch Auswahl aus der Liste oder Angabe eines CSS-Selektors.

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

Im folgenden Beispiel schließt der .clerk2-Slider jedes Produkt aus, das im .clerk1-Slider enthalten ist, und der .clerk3-Slider schließt jegliche Produkte aus, die sich entweder im .clerk1- oder .clerk2-Slider 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 das Ausschließen auch darauf beschränken, nur die ersten n Produkte auszuschließen (praktisch, wenn Sie einen Slider mit 20 Produkten haben, aber immer nur vier auf einmal sichtbar sind).

Dies erfolgt über die :limit(n)-Option (wobei n die erste Anzahl an Produkten ist, die Sie ausschließen möchten).

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

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

Beispiel:

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