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 lediglich einen kleinen Embed-Code auf der Seite einfügen, auf der Sie Produkte anzeigen möchten. Dies kann über den Abschnitt Embedded Code oder den Abschnitt Injection erfolgen.

Eine beliebige Anzahl von Element-Blöcken kann auf einem einzelnen Design basieren, oder Sie erstellen separate Designs für jedes Element.

Sie können Ihre bestehenden Elements einsehen und neue erstellen, indem Sie in der Seitenleiste auf Search/Recommendations und dann auf Element klicken:

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

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

Benennen Sie Ihr Element #

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

Produktlogik auswählen #

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

Sie können auch steuern, ob Filters angewendet werden sollen – zum Beispiel, wenn Sie nur Produkte über oder unter einem bestimmten Preis oder von einer bestimmten Marke anzeigen möchten.

Design auswählen #

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

In die Webseite einfügen #

Element-Blöcke sind an einen Embedcode gebunden, der es ermöglicht, sie auf allen Seiten anzuzeigen, auf denen Sie Clerk.js eingefügt haben. Sie können den Embedcode ganz einfach dort platzieren, wo dieses Element angezeigt werden soll, oder unsere Injection-Funktion verwenden.

Beachten Sie, dass Embed-Codes möglicherweise Variablen wie product IDs, category IDs oder email benötigen, abhängig von der Logik.

Verwendung von Embedded Code #

Embedcode ist ein kleiner Codeschnipsel, den Sie in Ihre Webseite einfügen können. Er kann ausgewählt werden, indem Sie Using embedded code wählen:

Verwendung von Injection #

Injection ist eine Funktion, mit der Sie Element-Blöcke auf Ihrer Webseite einfügen können, ohne den Embedcode manuell hinzufügen zu müssen. Sie wird durch Auswahl von Using injection ausgeführt:

Unten finden Sie eine Beschreibung der verschiedenen Injection-Optionen:

Mehrere IDs #

Mit dem Product ID CSS Selector können Sie mehrere Elemente mit demselben Selektor ansprechen.

Wenn der Selektor mehrere Produkt-IDs trifft, sammelt Clerk alle passenden Werte und führt sie zu einer Liste zusammen.

Das ist nützlich auf Seiten wie Warenkörben, wo jede Zeile eine Product 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 obenstehenden Werte als eine Produkt-ID-Liste.

IDs aus dem Clerk.js-Kontext lesen #

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

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

Dies ist die einfachste Option, wenn die Plattform den Kontext bereits automatisch setzt – keine zusätzliche Konfiguration auf der Seite selbst nötig.

Plattformen mit automatischem 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 #

Die folgenden Plattformen enthalten den Aufruf Clerk('context', {...}) in ihrem Standard-Clerk.js-Tracking-Script, das manuell während der Einrichtung hinzugefügt wird:

• Shopify
• Dandomain
• Lightspeed
• SmartWeb
• ScanNet
• BigCommerce

Wenn Ihre Plattform oben nicht aufgeführt ist, können Sie diese Funktion trotzdem verwenden, indem Sie den Aufruf Clerk('context', {...}) manuell zu Ihrem Clerk.js-Tracking-Script hinzufügen. Details finden Sie im Clerk.js guide.

Headlines #

Das Verwalten von Headlines ist mit dem Standard-Setup in Element ganz einfach.

Auf der Seite Edit Element 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 sofort nach dem Neuladen Ihres Webshops angezeigt.

Dynamische Textfeld-Tags #

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

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

Tags verwenden die Syntax {{ variable }} und können jeden gewünschten Namen haben.

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

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

Klicken Sie auf Save & Close und Sie können nun die Headline aus Ihrem Element-Tab 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 als Eingabefeld aus Element genutzt werden.

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

Doppelte Produkte entfernen #

Die Nutzung dieser Funktion bewirkt, dass mehrere Clerk.io-Recommendations nacheinander und nicht gleichzeitig geladen werden, was die Ladezeit der Seite etwas erhöht.

Achten Sie darauf, dass sich dieser Mehraufwand lohnt, um Duplikate zu vermeiden.

Clerk.js bietet zwei einfache Möglichkeiten, um Duplikate über mehrere Recommendation-Elemente auf derselben Seite hinweg 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 aus der Liste oder durch Angabe eines CSS-Selectors.

Die andere Option 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-Selector für den anderen Block sein, von dem Duplikate verhindert werden sollen.

Im untenstehenden Beispiel schließt das Element .clerk2 jedes Produkt aus, das im Element .clerk1 vorkommt, und das Element .clerk3 schließt Produkte aus, 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 begrenzen, sodass nur die ersten n Produkte ausgeschlossen werden (eine clevere Möglichkeit, wenn Sie z.B. ein Element mit 20 Produkten haben, aber immer nur vier gleichzeitig sichtbar sind).

Dies geschieht über die Option :limit(n) (wobei n die erste Anzahl der Produkte ist, die Sie ausschließen möchten).

Hier ist dasselbe Beispiel wie oben, allerdings bezieht sich die Ausschluss-ID 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 der Produkt-IDs sein, die in dem Block nicht angezeigt werden sollen.

Beispiel:

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

Seitenaufruf-Insights #

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

Im Popup werden die letzten 7 Tage angezeigt:

• Top 10 Seiten, auf denen das Element erschien
• Einzelne Aufrufzahlen pro Seite
• Gesamtaufrufe auf allen Seiten
• Direkte Links zu den Seiten

Nutzen Sie dies zur Überprüfung der Platzierung und um zu identifizieren, welche Seiten die meiste Sichtbarkeit für jedes Element liefern. Wenn ein Element keine jüngeren Aufrufe hat, zeigt das Abzeichen No und das Popup bleibt leer.