Optionen

Allgemein #

Website-Elemente erleichtern die Arbeit mit Elementen für Recommendations und Elementen für Search results.

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

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

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

Jeder einzelne Element-Block wird von eigenen Einstellungen gesteuert. Sie können jedem Element-Block einen eindeutigen Namen geben, der gleichzeitig als Tracking-Label fungiert.

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

Benennen Sie Ihr Element #

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

Produktlogik wählen #

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

Sie können auch steuern, ob Filter angewendet werden sollen, wenn Sie beispielsweise nur Produkte oberhalb oder unterhalb eines bestimmten Preises 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 in Ihrem Design eine title/headline-Variable haben, können Sie die anzuzeigenden Titel auch direkt hier erfassen.

In die Website einfügen #

Element-Blöcke sind an einen Embedcode gebunden, über den sie auf allen Seiten angezeigt werden können, auf denen Sie Clerk.js eingebunden haben. Sie können entweder den Embedcode einfügen, wo das Element erscheinen soll, oder unsere Injection-Funktion nutzen.

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

Verwendung von Embedded Code #

Embed-Code ist ein kleiner Code-Schnipsel, den Sie in Ihre Website einfügen. Er kann gefunden werden, indem Sie Using embedded code auswählen:

Verwendung von Injection #

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

URL-Targeting #

Nutzen Sie URL-Targeting, um genau zu steuern, wo ein Element erscheint. Fügen Sie beliebig viele URLs hinzu und wählen Sie dann, wie der Seitenpfad diesen entsprechen soll:

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 mit mehreren Produkt-IDs übereinstimmt, sammelt Clerk alle gefundenen Werte und fügt sie zu einer Liste zusammen.

Dies ist nützlich auf Seiten wie Warenkörben, wo jede Zeile ein Produktelement mit 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 aus.

IDs aus Clerk.js-Kontext lesen #

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

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

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

Plattformen mit Kontext in der offiziellen Erweiterung #

Die folgenden Plattformen setzen den Clerk.js-Kontext automatisch als Teil der offiziellen Clerk.io-Erweiterung oder -Plugins:

• Magento 1
• Magento 2
• WooCommerce
• PrestaShop
• Shopware 6

Plattformen mit Kontext im manuellen Clerk.js-Skript #

Folgende Plattformen enthalten den Clerk('context', {...})-Aufruf im standardmäßigen Clerk.js-Tracking-Skript, das während der Einrichtung manuell hinzugefügt wird:

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

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

Überschriften #

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

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

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

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

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 beliebig benannt werden.

Gehen Sie zunächst zu Designs und klicken Sie auf Edit Design bei dem Design, das Sie ändern möchten:

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

Klicken Sie auf Save & Close und Sie können anschließend eine Überschrift im Tab Element erfassen.

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

Alles, was Sie im HTML Section mit der Syntax {{ variable }} einfügen, steht danach als Eingabefeld im Element zur Verfügung.

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

Entfernen doppelter Produkte #

Die Nutzung dieser Funktion bewirkt, dass mehrere Clerk.io Recommendations nacheinander statt gleichzeitig geladen werden – das führt zu einer höheren Seitenladezeit.

Stellen Sie sicher, dass der Aufwand durch längere Ladezeit den Vorteil des Vermeidens von Duplikaten wert ist.

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

Eine Möglichkeit ist die Option Duplikate ausschließen im Abschnitt Inject Element zu nutzen, indem Sie das Clerk-Element auswählen, von dem Sie Duplikate ausschließen möchten – entweder aus der Liste oder durch Angabe eines CSS-Selektors.

Die andere Möglichkeit ist das Hinzufügen des Attributs data-exclude-from am Clerk-Block, aus dem Sie Duplikate entfernen möchten. Der Wert des Attributs sollte ein CSS-Selektor des anderen Blocks sein, um Duplikate zu verhindern.

Im folgenden Beispiel schließt das Element .clerk2 alle Produkte aus, die sich im Element .clerk1 befinden, und das Element .clerk3 schließt alle Produkte aus, die sich entweder in den Elementen .clerk1 oder .clerk2 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 anzuzeigen (empfehlenswert, wenn ein Element 20 Produkte haben kann, aber nie mehr als vier gleichzeitig sichtbar sind).

Dies geschieht über die Option :limit(n) (wobei n die erste Anzahl Produkte ist, die ausgeschlossen werden soll).

Hier dasselbe Beispiel von oben, aber das Ausschluss-ID verweist 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 die Anzeige bestimmter Produkte zu verhindern, fügen Sie dem vorhandenen Embedcode einfach das Attribut data-exclude hinzu.

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

Beispiel:

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

Seitenaufruf-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 überfahren, um eine Kurzübersicht zu öffnen.

Das Pop-up zeigt für die letzten 7 Tage:

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

Nutzen Sie dies, um die Platzierung zu überprüfen und zu sehen, welche Seiten die größte Sichtbarkeit für jedes Element bieten. Wenn ein Element keine aktuellen Aufrufe hat, zeigt das Badge No und das Pop-up ist leer.