Optionen

Allgemeines #

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 Abschnitt Embedded Code oder den Abschnitt 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.

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

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

Die Einstellungsseite jedes Element-Blocks ist in vier Abschnitte unterteilt, auf die Sie mit einem Klick auf Edit Element zugreifen können.

Geben Sie Ihrem Element einen Namen #

Steuert den Namen und Labels zur Nachverfolgung für den Element-Block.

Produktlogik wählen #

Definiert, welche Produkttypen im Element angezeigt werden sollen.

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

Design auswählen #

Hier legen Sie fest, 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 hier auch die für das Element anzuzeigenden Titel einfügen.

Auf der Webseite einfügen #

Element-Blöcke sind an einen embedcode gebunden, der ihre Darstellung auf allen Seiten ermöglicht, auf denen Sie Clerk.js eingefügt haben. Sie können entweder einfach den embedcode dort einfügen, wo dieses Element erscheinen soll, oder unsere Inject-Funktion verwenden.

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

Verwendung des Embedded Codes #

Embed Code ist ein kleiner Code-Schnipsel, den Sie in Ihre Webseite einfügen können. Sie finden ihn, indem Sie Using embedded code auswählen:

Verwendung von Injection #

Injection ist eine Funktion, mit der Sie Element-Blöcke in Ihre Webseite einfügen können, ohne den Embed Code manuell hinzufügen zu müssen. Dies geschieht, indem Sie Using injection auswählen:

URL-Targeting #

Verwenden Sie URL-Targeting, um genau zu steuern, wo ein Element erscheinen soll. Fügen Sie beliebig viele URLs hinzu und wählen Sie dann, wie der Seitenpfad mit ihnen übereinstimmen soll:

Nachfolgend eine Beschreibung der verschiedenen Injection-Optionen:

Mehrere IDs #

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

Wenn der Selektor mehrere Produkt-IDs findet, sammelt Clerk alle gefundenen Werte und fasst sie zu einer Liste zusammen.

Das ist nützlich auf Seiten wie dem Warenkorb, wo jedes Listenelement eine Produkt-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 oben stehenden Werte als eine Produkt-ID-Liste.

IDs aus dem Clerk.js-Kontext lesen #

Wenn eine Logik ein Produkt-, Kategorie- oder Seiten-ID benötigt, kann die Injection-Funktion dies 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 aus dem Dropdown Read ID from. Clerk.io verwendet dann den Wert, der für diesen ID-Typ im Kontext auf der aktuellen Seite gesetzt wurde.

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

Plattformen mit integriertem Kontext in der Erweiterung #

Die folgenden Plattformen setzen den Clerk.js-Kontext automatisch im Rahmen ihrer offiziellen Clerk.io-Erweiterung oder Plugins:

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

Plattformen mit Kontext im manuellen Clerk.js-Skript #

Die folgenden Plattformen beinhalten den Clerk('context', {...}) Aufruf in ihrem Standard-Tracking-Skript für Clerk.js, welches während der Einrichtung manuell hinzugefügt wird:

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

Falls Ihre Plattform oben nicht aufgeführt ist, können Sie diese Funktion trotzdem nutzen, indem Sie den Clerk('context', {...}) Aufruf manuell in Ihr Clerk.js-Tracking-Skript einfügen. Details finden Sie im Clerk.js guide.

Headlines #

Mit dem Standardaufbau in Element lassen sich Headlines ganz einfach verwalten.

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

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

Die Änderung wird sofort angezeigt, nachdem Sie Ihren Webshop aktualisieren.

Dynamische Textfeld-Tags #

Unsere Standarddesigns verwenden Tags, um für jedes Element unterschiedliche Headlines festlegen zu können.

Diese Tags können in jedem Textfeld eines Design Editor-Designs sowie überall in code designs verwendet werden.

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

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

Auf der Seite Edit Design fügen Sie einen Headline-Tag mit {{ headline }} im HTML-Bereich:

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

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

Alles, was Sie im HTML-Bereich mit der {{ variable }}-Syntax schreiben, steht als Eingabefeld im Element zur Verfügung.

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

Entfernen von doppelten Produkten #

Die Verwendung dieser Funktion erzwingt das Laden mehrerer Clerk.io Empfehlungen nacheinander statt gleichzeitig und erhöht somit die Ladezeit der Seite.

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

Clerk.js bietet zwei einfache Möglichkeiten, um Doppelungen in mehreren Recommendation-Elementen auf derselben Seite zu verhindern.

Eine Möglichkeit ist, die Option Exclude Duplicates im Bereich Inject Element zu nutzen, indem der Clerk-Block ausgewählt wird, von dem Duplikate ausgeschlossen werden sollen – entweder aus der Liste oder über einen CSS-Selektor.

Die andere Möglichkeit besteht darin, das Attribut data-exclude-from an dem Clerk-Block zu ergänzen, aus dem die Duplikate entfernt werden sollen. Der Wert des Attributs soll ein CSS-Selektor für den jeweiligen Block sein, um Dopplungen zu vermeiden.

Im folgenden Beispiel schließt das Element .clerk2 alle Produkte aus, die im .clerk1-Element enthalten sind, und das Element .clerk3 schließt alle Produkte aus, die entweder im .clerk1- oder im .clerk2-Element 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 das Ausschließen auch auf die ersten n Produkte begrenzen (eine clevere Option, wenn ein Element 20 Produkte enthält, aber stets nur vier sichtbar sind).

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

Hier dasselbe Beispiel wie oben, allerdings beschränkt sich das Ausschließen der IDs nun 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>

Ausschließen bestimmter Produkte #

Um bestimmte Produkte nicht anzuzeigen, fügen Sie einfach das Attribut data-exclude zu einem bestehenden Embedcode hinzu.

Dabei handelt es sich um eine Liste von Produkt-IDs, die in diesem 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-Badge in der Spalte Seen in last 24h mit der Maus überfahren, um ein schnelles Insight zu öffnen.

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

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

Verwenden Sie dies, um die Platzierung zu überprüfen und zu ermitteln, welche Seiten die meiste Sichtbarkeit für jedes Element bringen. Hat ein Element keine aktuellen Zugriffe, zeigt das Badge No – das Pop-up bleibt dann leer.