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 Einbettungscode auf der Seite einfügen, auf der Produkte angezeigt werden sollen. 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.

Um Elements anzusehen oder zu erstellen, öffnen Sie Search > Elements oder Recommendations > Elements im Seitenmenü.

Jeder eindeutige Elementblock wird durch seine eigenen Einstellungen gesteuert. Sie können einen eindeutigen Namen für jeden Elementblock wählen, der gleichzeitig als tracking-Label dient.

Öffnen Sie ein Element, um dessen Namen, Logik, Design- und Einfügeeinstellungen zu bearbeiten.

Element benennen #

Steuert den Namen und das Tracking-Label des Elementblocks.

Produktlogik wählen #

Definiert, welcher Produkttyp im Element angezeigt werden soll.

Sie können auch steuern, ob Filters angewendet werden sollen, z. B. wenn Sie nur Produkte oberhalb oder unterhalb eines bestimmten Preises oder von einer bestimmten Marke anzeigen möchten.

Design auswählen #

Dies ermöglicht es Ihnen zu entscheiden, wie viele Produkte angezeigt werden sollen und auf welchem Design das Element basieren soll. Wenn Ihr Design eine title/headline-Variable enthält, können Sie hier die Titel hinzufügen, die für das Element angezeigt werden sollen.

Facetten hinzufügen #

Klicken Sie in den Facetten-Einstellungen des Elements auf Add Facet, um ein Attribut auszuwählen. Das Attribut muss für das Filtern verfügbar im Shop sein. Nach dem Hinzufügen von Facetten können Sie deren Reihenfolge mit den gepunkteten Griffen ändern.

Facettenreihenfolge #

Wenn ein Element eine Facettenliste im Design oder in den Einfügeeinstellungen hat, können Sie die Attribute mit den gepunkteten Griffen neu anordnen. Ziehen Sie eine Zeile an die gewünschte Position und lassen Sie sie dann im gestrichelten Feld los.

Um die Tastatur zu benutzen, fokussieren Sie eine Facettenzeile und drücken Sie Alt + ↑ oder Alt + ↓. Screenreader geben die Verschiebung bekannt. Siehe Search facets oder category page facets für mehr Kontext.

Auf der Website einfügen #

Wählen Sie Using injection oder Using embedded code unter Insert into website. Der Anzeigemodus und die davon abhängigen Steuerungen bleiben in diesem Abschnitt; wenn Sie die Einfügemethode ändern, werden die hier angezeigten Steuerungen aktualisiert.

Elementblöcke sind mit einem embedcode verknüpft, der es ihnen ermöglicht, auf allen Seiten gerendert zu werden, auf denen Sie Clerk.js eingefügt haben. Sie können entweder den embedcode einfach dort einfügen, wo dieses Element angezeigt werden soll, oder unser Injection-Feature verwenden.

Beachten Sie, dass Einbettungscodes je nach Logik Variablen wie Produkt-IDs, Kategorie-IDs oder email benötigen können.

Verwendung von eingebettetem Code #

Der Embed-Code ist ein kleines Codeschnipsel, das Sie auf Ihrer Website einfügen können. Wählen Sie in den Insert into website-Einstellungen des Elements Using embedded code aus, um ihn zu kopieren.

Verwendung von Injection #

Injection ist eine Funktion, mit der Sie Elementblöcke auf Ihrer Website einfügen können, ohne den Embed-Code manuell hinzufügen zu müssen. Wählen Sie in den Insert into website-Einstellungen des Elements Using injection aus, um dies zu konfigurieren.

URL-Targeting #

Mit URL-Targeting können Sie genau steuern, wo ein Element erscheint. Fügen Sie beliebig viele URLs hinzu und wählen Sie dann aus, wie der Seitenpfad mit ihnen übereinstimmen soll:

Im Folgenden finden Sie 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 einzigen Liste zusammen.

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

IDs aus Clerk.js-Kontext lesen #

Wenn für eine Logik eine Produkt-, Kategorie- oder Seiten-ID erforderlich ist, kann die Injection-Funktion diese direkt aus dem Clerk('context', {...})-Aufruf lesen, den Clerk.js zur Verfolgung verwendet.

Anstatt auf einen CSS-Selektor oder ein Attribut auf der Seite zu verweisen, wählen Sie Clerk.js context aus dem Read ID from Dropdown. 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 – es ist keine zusätzliche Konfiguration auf der Seite selbst erforderlich.

In Single-Page-Apps und Headless-Storefronts halten Sie den Clerk.js-Kontext aktuell, während der Besucher navigiert. Bereits gerenderte Blöcke, deren IDs aus dem Kontext stammen, aktualisieren sich automatisch, wenn sich der relevante Wert ändert, ohne dass ein vollständiges Neuladen der Seite erforderlich ist.

Ein Beispiel: Ein Kategorie-Empfehlungsblock kann sich aktualisieren, wenn sich der Kategorienkontext ändert. Dieses Verhalten ist standardmäßig aktiviert und funktioniert unabhängig von der DOM-Beobachtung. Blöcke, deren IDs aus Seitenelementen stammen, sowie Pop-ups werden auf diese Weise nicht neu geladen.

Siehe Context Reloads für Codebeispiele, unterstützte Kontextschlüssel und wie Sie das automatische Nachladen deaktivieren können.

Plattformen mit fest eingebautem Kontext in der Extension #

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

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

Plattformen mit Kontext im manuellen Clerk.js-Skript #

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

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

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

Live-Schaltung #

Verwenden Sie den Vorschaumodus, um ein Element in Ihrem Webshop zu testen, bevor Sie es für Ihre Besucher sichtbar machen. Wenn es bereit ist, schalten Sie es in der Elements-Liste in my.clerk.io auf live.

Vorschau anzeigen #

Ein Element im Vorschaumodus ist für reguläre Besucher ausgeblendet. Um es zu sehen, hängen Sie ?clerk_content_mode=preview an die URL der Seite an, auf der es installiert ist, und öffnen Sie dann diese URL. Zum Beispiel:

https://example.com/?clerk_content_mode=preview

Enthält die URL bereits ein ?, fügen Sie stattdessen &clerk_content_mode=preview hinzu. Durch das Öffnen einer Vorschau-URL können Sie Vorschau-Elemente anzeigen; diese werden dadurch für andere Besucher nicht aktiviert.

Sichtbarkeit umschalten #

1. Öffnen Sie in my.clerk.io Search > Elements oder Recommendations > Elements.
2. Finden Sie das Element, das Sie live schalten möchten. Klicken Sie in der Spalte Visible To auf Preview, um es auf All visitors zu schalten. Das Element ist jetzt live und ohne den Vorschau-URL-Parameter sichtbar.
3. Um es wieder in den Vorschaumodus zu versetzen, klicken Sie in derselben Spalte auf All visitors. Es wechselt zurück zu Preview und ist nur sichtbar, wenn Sie den Vorschau-URL-Parameter verwenden.

Die Sichtbarkeit wird für jedes Element einzeln festgelegt, wiederholen Sie dies also für jedes Element, das Sie live schalten möchten.

Nach der Live-Schaltung öffnen Sie Ihren Webshop ohne clerk_content_mode=preview in der URL und prüfen, ob jedes Element auf den gewünschten Seiten erscheint.

Headlines #

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

Auf der Edit Element-Seite klicken Sie auf Select Design, um das Headline-Feld zu finden.

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

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

Dynamische Textfeld-Tags #

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

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

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

Öffnen Sie Designs und klicken Sie auf Edit Design für das gewünschte Design.

Geben Sie auf der Edit Design-Seite {{ headline }} im HTML-Bereich ein.

Klicken Sie auf Save. Gehen Sie dann zum Element zurück und konfigurieren Sie das Feld Headline.

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 auch in jedem Textfeld eines Design Editor-Designs genutzt werden.

Doppelte Produkte entfernen #

Die Nutzung dieser Funktion zwingt das Laden mehrerer Clerk.io Recommendations nacheinander statt gleichzeitig und erhöht dadurch die Seitenladezeit.

Achten Sie darauf, dass der Kompromiss bei der Ladezeit das Vermeiden von Duplikaten wert ist.

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

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

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

Im Beispiel unten schließt das Element .clerk2 jedes Produkt aus, das sich im Element .clerk1 befindet, und das Element .clerk3 schließt alle Produkte aus, die sich entweder in .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 nur auf die ersten n Produkte beschränken (eine clevere Möglichkeit, wenn Sie ein Element mit 20 Produkten haben, aber jeweils nur vier sichtbar sind).

Dies geschieht über die Option :limit(n), wobei n die Anzahl der ersten zu exkludierenden Produkte ist.

Hier das gleiche Beispiel wie oben, allerdings wird die Ausschluss-ID nur auf die ersten fünf Produkte angewendet.

<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 vermeiden, fügen Sie einfach das Attribut data-exclude zu einem vorhandenen 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>

Seitenaufruf-Insights #

In den Listen unter Search > Elements und Recommendations > Elements können Sie mit der Maus über das grüne Ja/Nein-Abzeichen in der Spalte Seen in last 24h fahren, um eine schnelle Einsicht zu öffnen.

Das Popup zeigt für die letzten 7 Tage:

• Die Top-10-Seiten, auf denen das Element erschienen ist
• Individuelle Aufrufzahlen pro Seite
• Gesamtaufrufe über alle Seiten hinweg
• Direkte Links zu den Seiten

Verwenden Sie dies, um die Platzierung zu überprüfen und festzustellen, welche Seiten für das höchste Exposure jedes Elements sorgen. Wenn ein Element keine Aufrufe in letzter Zeit hatte, zeigt das Abzeichen Nein an und das Popup bleibt leer.