Jeder (Webshop)

Clerk.js

Integrieren Sie Clerk.io in jedes Frontend mit einer leichtgewichtigen JS-Bibliothek.

Übersicht #

Clerk.js ist eine JavaScript-Bibliothek, die die Integration unserer API mit dem Frontend vereinfacht. Mit nur 37,7 kb ist sie eine extrem schlanke Lösung.

Es gibt drei Vorteile bei der Verwendung von Clerk.js:

Sie ist robust, da sie asynchron geladen wird. Das bedeutet, dass der Rest der Seite nicht von einer API-Antwort vor dem Laden abhängig ist.
Sie ist oft schneller, da Ihr Server mit dem Rendern der Seite parallel starten kann, während Clerk.js Anfragen stellt und Ergebnisse rendert.
Besucher- und Klick-Tracking werden für alle von Clerk angezeigten Ergebnisse automatisch gehandhabt. Dafür sind keine Cookies erforderlich, da wir einen Hash-Wert aus der IP und dem Useragent des Besuchers generieren, kombiniert mit einem eindeutigen Store-Salt, der alle 30 Tage rotiert.

Clerk.js wird mit einem Initialisierungsskript geladen, das im Header der Website hinzugefügt wird:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'insert_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Es lädt die Bibliothek von unserem CDN und ermöglicht Ihnen den Zugriff auf ihre Funktionen über das Clerk-Objekt. Außerdem konfiguriert es Clerk.js mit dem API-Key, sodass bereits bekannt ist, für welchen Store API-Aufrufe getätigt werden.

Snippets #

Beim Laden der Seite durchsucht Clerk.js diese nach Snippets mit der Klasse „clerk“.

Anschließend werden die Attribute aus dem Snippet verwendet, um einen API-Aufruf zu erstellen, wobei der API-Key aus der Konfiguration im Initialisierungsskript entnommen wird.

<span
  class="clerk"
  data-api="recommendations/popular"
  data-limit="10"
  data-template="@clerk-product-template">
</span>

Das Aussehen wird vom Design gesteuert, das ebenfalls im Snippet referenziert wird.

Clerk.js verwendet Liquid Designs, um HTML mit den von der API zurückgegebenen Daten zu rendern. Diese sind als Scripts formatiert und werden in Ihrem Snippet über die ID im data-template referenziert.

<span class="clerk"
     data-api="search/search"
     data-query="jedi"
     data-limit="20"
     data-template="#clerk-template">
</span>

<script type="text/x-template" id="clerk-template">
  <h1>Search result for {{ query }}.</h1>
  {% for product in products %}
    <div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Buy Now</a>
    </div>
  {% endfor %}

  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Load More Results</a>
</script>

Snippets können auch vereinfacht werden, indem lediglich eine Referenz auf einen Element-Block per data-template="@element-block-id" verwendet wird:

<span class="clerk"
     data-template="@product-page-alternatives"
     data-products="[12352]">
</span>

Designs werden dann benutzerfreundlich mit dem Design Editor oder mit Liquid HTML code über my.clerk.io verwaltet.

Ihre Snippets müssen nur die Klasse clerk, seiten-spezifische Infos wie Produkt-IDs und eine Referenz zur Elementblock-ID in data-template enthalten.

Injection #

Injection ist ein Feature, mit dem Sie Content-Snippets auf Ihrer Website einfügen können, ohne sie manuell hinzufügen zu müssen. Stattdessen wählen Sie einfach einen CSS-Selektor, in den das Snippet injiziert werden soll, und Clerk.js fügt es beim Laden der Seite automatisch hinzu.

Mehr dazu unter Injection hier.

Konfiguration #

Clerk.js ermöglicht verschiedene Konfigurationen, die sein Verhalten anpassen.

Besucher-IDs #

Standardmäßig generiert Clerk.js anonyme Besucher-IDs, die für das Tracking der Sitzungen verwendet werden.

Wenn Kunden Cookies zustimmen, kann Clerk.js so konfiguriert werden, dass ein persistentes Cookie mit der Besucher-ID gesetzt wird, was Tracking über längere Zeiträume ermöglicht.

Wenn Sie die Sitzungs-IDs lieber manuell verwalten wollen, können Sie den Parameter visitor konfigurieren, den Clerk bei API-Aufrufen verwendet. Alternativ kann das Session-Tracking durch Setzen von visitor auf null vollständig deaktiviert werden.

// Persistente Besucher-ID
Clerk('config', {
  visitor: 'persistent'
});

// Eigene Besucher-ID
Clerk('config', {
  visitor: 'ABC123'
});

// Besuchertracking deaktivieren
Clerk('config', {
  visitor: null
});

Seitenkontext #

Konfiguriert Clerk.js mit dem Kontext der Seite, die ein Besucher aktuell betrachtet. Dies dient zur Anreicherung der Trackingdaten für Personalisierungsfunktionen wie Email Triggers, Audience Segmentierung und Chat Kontext.

Clerk('context', {
  product: null,  // Produkt-ID auf Produktseiten setzen, z.B. 12345 oder null
  category: null, // Kategorie-ID auf Kategorieseiten setzen, z.B. 67 oder null
  page: null      // Seiten-ID oder Typ auf anderen Seiten, z.B. 'homepage' oder null
});

Sprache #

Konfiguriert Clerk.js mit der Sprache der Website. Damit kann Clerk.io Grammatikregeln in Search korrekt handhaben und die richtigen Übersetzungen beim Einsatz von mehrsprachigen Datenfeeds. laden.

Clerk('config', {
  language: 'italian'
});

Akzeptierte Werte finden Sie unter Supported languages.

Ersetzen Sie die Platzhalterwerte durch die Logik Ihrer Plattform, um die IDs dynamisch zu erhalten. Jeder Wert sollte auf Basis des Seitentyps gesetzt werden, auf dem sich der Besucher befindet:

product: Die ID des auf Produktseiten angezeigten Produkts. Auf Nicht-Produktseiten auf null setzen.
category: Die ID der auf Kategorieseiten angezeigten Kategorie. Auf Nicht-Kategorieseiten auf null setzen.
page: Ein Seiten-Identifier oder Typ-String auf anderen Seiten wie Startseite, Warenkorb oder Checkout. Auf null setzen, wenn nicht zutreffend.

Falls Ihre Plattform für eine Seitentyp keinen spezifischen ID-Wert bereitstellt, lassen Sie den Wert als null. Setzen Sie Werte nur für die relevanten Seitentypen.

Design-Funktionen #

Clerk.js unterstützt das Hinzufügen von Formatters und Globals, die genutzt werden können, um benutzerdefinierte JavaScript-Funktionalitäten für Ihre Designbereiche zu erstellen.

Formatters #

Diese werden verwendet, um Attribute zu beeinflussen oder zu verändern. Beispielsweise möchten Sie eventuell nur die ersten 40 Zeichen einer Beschreibung anzeigen oder einen bestimmten Rabattprozentsatz je nach Kundentyp berechnen.

Globals #

Diese dienen dazu, Frontend-Daten zugänglich zu machen, auf die Sie in Designs zugreifen möchten. Beispiele hierfür sind der noch benötigte Betrag für kostenlosen Versand, der Name eines angemeldeten Kunden, ein Währungssymbol oder ein Umrechnungskurs.

Im Folgenden ein Beispiel zur Konfiguration von Formatters und Globals.

Konfiguration #

Clerk('config', {
  formatters: {
    uppercase: function(string) {
        return string.toUpperCase();
    }
  },
  globals: {
    currency_symbol: '$'
  }
});

Design #

<div class="name">{{ product.name | uppercase }}</div>
<div class="price">{{ currency_symbol }}{{ product.price }}</div>

Ausgabe #

<div class="name">GREEN LIGHT SABER</div>
<div class="price">$1999.99</div>

Email-Tracking #

Clerk.js kann automatisch E-Mail-Adressen in der Sitzung des Kunden erfassen, um auch dann personalisierte E-Mail-Empfehlungen zu ermöglichen, wenn noch keine Bestellung erfolgt ist.

Aktivieren Sie collect_email in Ihrer Clerk.js-Konfiguration:

<script type="text/javascript">
  Clerk('config', {
    key: 'insert_api_key',
    collect_email: true
  });
</script>

Mit dieser Option überwacht Clerk.js E-Mail-Inputfelder und sendet automatisch log/email, wenn ein Besucher eine E-Mail-Adresse eingibt.

Falls Sie eine E-Mail manuell protokollieren möchten, können Sie auch ein Snippet wie dieses verwenden:

<span class="clerk" data-api="log/email" data-email="EMAIL@EXAMPLE.COM"></span>

So funktioniert die Zuordnung #

Wenn eine E-Mail protokolliert wird, sendet Clerk sowohl die Besucher-ID als auch die E-Mail-Adresse an die API, damit diese verknüpft werden.

So kann Clerk nachvollziehen, was der Besucher in seiner Sitzungsvergangenheit gemacht hat (z.B. angesehene Produkte, Klicks und Suchanfragen) und dieses Verhalten mit der E-Mail-Adresse verbinden.

Mit dieser Verknüpfung können dieselben Verhaltensdaten sowohl für E-Mail-Anwendungsfälle (wie Trigger- und personalisierte E-Mails) als auch für Onsite-Personalisierung in den Empfehlungen für eingeloggte Kunden genutzt werden.

Custom Rendering #

Dies wird hauptsächlich bei Single Page Apps (SPA), Progressive Web Apps (PWA) und anderen Anwendungen verwendet, die keine klassischen Seiten-Ladevorgänge nutzen.

Clerk.js rendert alle Elemente mit der Klasse clerk, aber auch andere Klassen können zum Anpassen des Renderings als benutzerdefinierte Selektoren genutzt werden.

Standardmäßig müssen Sie Clerk("content", "SELECTOR") ausführen, um Inhalte jedes Mal zu rendern, wenn sie angezeigt werden sollen.

Fügen Sie auto_init_custom_selectors: true zur Konfiguration hinzu, initialisiert Clerk.js alle benutzerdefinierten Selektor-Elemente automatisch, sobald sich der DOM ändert, solange sie bereits mindestens einmal mit Clerk("content", "SELECTOR") gerendert wurden.

Dieses Verhalten bleibt bestehen, bis ein vollständiges Seiten-Reload erfolgt.

Debugging #

Clerk.js hat einen eingebauten Debug-Modus, der Diagnoseinformationen in der Browser-Konsole protokolliert. Die Konfiguration wird in sessionStorage unter dem Key __clerk_debug gespeichert, sodass der Debug-Modus über Seitenwechsel innerhalb derselben Browsersitzung hinweg aktiv bleibt.

Standardmäßig ist der Debug-Modus aktiviert; das level steht auf warn und collect ist auf true gesetzt.

Aktivierungsmethoden #

Es gibt drei Möglichkeiten, den Debug-Modus zu aktivieren.

Konsolen-Kurzschreibweise

Am einfachsten ist der Aufruf von Clerk('debug') in der Browser-Konsole. Es werden mehrere Argumentformate akzeptiert:

Clerk('debug');              // Mit Standardwerten aktivieren
Clerk('debug', true);        // Aktivieren
Clerk('debug', false);       // Deaktivieren
Clerk('debug', 'on');        // Aktivieren
Clerk('debug', 'off');       // Deaktivieren
Clerk('debug', 'warn');      // Loglevel direkt setzen
Clerk('debug', {             // Volles Konfigurationsobjekt übergeben
  enable: true,
  level: 'log',
  group: true
});

Config-Pfad

Der Debug-Modus kann auch über den üblichen Config-Aufruf konfiguriert werden:

Clerk('config', 'debug', {
  enable: true,
  level: 'log',
  collect: true,
  group: true,
  collapsed: false
});

URL-Hash

Der Debug-Modus kann durch Anhängen eines Hash-Fragments an die URL aktiviert werden. Nützlich, um Debug-Links mit Kollegen zu teilen:

https://yourwebsite.com/#clerkjs:debug.enable=true&debug.level=warn

Wird er über den URL-Hash aktiviert, wird die Konfiguration in sessionStorage unter dem Schlüssel __clerk_tmp_config gespeichert.

Konfigurationsoptionen #

Option	Beschreibung	Typ	Standardwert
`enable`	Aktiviert oder deaktiviert Debug-Nachrichten in der Konsole.	`bool`	`true`
`level`	Definiert das Loglevel. Akzeptiert werden `log`, `warn`, oder `error`.	`string`	`warn`
`collect`	Wenn `true`, werden Lognachrichten im lokalen Speicher des Browsers aufbewahrt. Bei `false` wird temporärer Speicher verwendet.	`bool`	`true`
`group`	Gruppiert zusammengehörige Lognachrichten in der Konsole für bessere Übersicht.	`bool`	—
`collapsed`	Wenn `true`, werden gruppierte Nachrichten standardmäßig eingeklappt. Gilt nur, wenn `group` aktiviert ist.	`bool`	—
`clear`	Löscht alle gespeicherten Lognachrichten.	`bool`	—

Session Storage #

Bei aktiven Debug-Modus wird die Konfiguration im sessionStorage unter dem Schlüssel __clerk_debug gespeichert. Dadurch bleiben die Debug-Einstellungen beim Navigieren zwischen Seiten erhalten, ohne andere Tabs zu betreffen oder über die Session hinaus zu bestehen.

Consent Management Platforms (CMPs) wie Cookiebot melden eventuell __clerk_debug als Schlüssel, der dokumentiert werden muss. Es handelt sich um einen funktionalen Schlüssel, der ausschließlich zur Entwickler-Debugging-Zwecken dient. Es sind keine personenbezogenen Daten oder Trackinginformationen enthalten.

Für Details zum Aufbau von API-Debug-Antworten siehe Response debugging.

UI Kit #

Clerk.js enthält eine Sammlung von UI-Tools für wichtige Elemente, mit denen Sie das Nutzererlebnis verbessern können. Diese sparen häufig Entwicklungszeit bei individuellen Setups.

Instant Search #

Ein entscheidendes Element eines großartigen E-Commerce-Such-Erlebnisses ist das unmittelbare Anzeigen von Ergebnissen beim Tippen. Unsere Instant Search UI-Komponente macht dieses Erlebnis schnell und einfach umsetzbar.

Jeder Clerk.io-Inhalt kann theoretisch zu einer Instant Search-Komponente werden, sie eignet sich jedoch besonders gut als Dropdown mit Suchergebnissen.

<span 
  class="clerk"
  
  data-api="search/predictive"
  data-limit="6"
  data-labels='["Instant Search"]'
      
  data-instant-search="INSERT_CSS_SELECTORS_HERE">
  
  <dl class="product-search-result-list">
    <dt>Products matching <i>{{ query }}</i></dt>
    
    {% for product in products %}
      <dd class="product clerk-instant-search-key-selectable">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </dd>
    {% endfor %}
  </dl>
</span>

Weitere Infos zum Instant Search UI Tool hier.

Search Page #

Ein entscheidendes Element eines herausragenden E-Commerce-Sucherlebnisses ist das Erzielen guter Suchergebnisse. Unsere Search Page macht dieses Erlebnis schnell und einfach aufbaubar.

Mit der Search Page können Sie eine vollständige Seite mit den bestmöglichen Treffern zu einer Suchanfrage anzeigen.

<span 
  class="clerk"
  
  data-api="search/search"
  data-limit="40"
  data-labels='["Search Page"]'
  data-query="INSERT_QUERY_HERE"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">>
  
  <div class="product-search-result-list">
    <div>Products matching <i>{{ query }}</i></div>
    
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Show More Results
    		</div>
    {% endif %}
  </div>
</span>

Weitere Infos zum Search Page UI Tool hier.

Category Page #

Eine gut strukturierte Kategorie-Seite ist ein entscheidender Faktor für den Erfolg im E-Commerce. Unsere Category Page macht dieses Erlebnis schnell und einfach aufbaubar. Damit können Sie eine komplette Seite mit den besten Ergebnissen für eine Kategorie anzeigen.

<span 
  class="clerk"
  
  data-api="recommendations/category/popular"
  data-limit="40"
  data-labels='["Category Page Grid"]'
  data-category="INSERT_CATEGORY_ID"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">
  
  <div class="product-category-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Show More Results
    		</div>
    {% endif %}
  </div>
</span>

Weitere Infos zum Category Page UI Tool hier.

Facetten #

Clerk.js bietet von Haus aus Unterstützung für dynamische Facettierte Navigation bei Suche und Kategorien. Jedes an uns übermittelte Produkt-Attribut kann als Facette verwendet werden.

Hier ein Beispiel für die Grundnutzung:

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
      
  data-template="@search-page" 
  data-query="shoes"
  
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE-TRANSLATION", "categories": "CATEGORIES-TRANSLATION", "brand": "BRAND-TRANSLATION"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for "
  data-facets-design="133995">
</span>

Weitere Infos zum Facets UI Tool hier.

Exit Intent #

Das Exit-Intent-Popup reagiert, wenn ein Besucher Ihre Seite verlassen will, indem er den Mauszeiger in die Nähe des Browserfensterrandes bewegt. Es öffnet sich und zeigt interessante Produkte an – so kann aus einem abwandernden Besucher vielleicht noch ein Käufer werden.

Jeder Element-Block kann beim Exit-Intent eines Besuchers ausgelöst werden, indem dem Snippet das Attribut data-exit-intent="true" hinzugefügt wird.

<span
  class="clerk"
  
  data-api="recommendations/visitor/complementary"
  data-limit="20"
  data-labels='["Exit Intent / Popup"]'
  
  data-exit-intent="true">
</span>

Weitere Infos zum Exit Intent UI Tool hier.

Das UI Kit enthält eine einfache Popup-Bibliothek, mit der Sie einfach nutzerfreundliche Popups für beliebige Inhalte erstellen können. Jedes HTML-Element mit der Klasse clerk-popup wird als Popup angezeigt.

<div id="my-popup" class="clerk-popup">Hello, world!</div>

<script type="text/javascript">
  var my_popup = Clerk('ui', 'popup', '#my-popup');
  
  // Popup anzeigen
  my_popup.show(); 
  /* oder */ 
  Clerk('ui', 'popup', '#my-popup', 'show');
  
  // Popup ausblenden
  my_popup.hide(); 
  /* oder */ 
  Clerk('ui', 'popup', '#my-popup', 'hide');
</script>

Weitere Infos zum Popup UI Tool hier.

Produkte ausschließen #

Clerk.js bietet zwei Möglichkeiten, Produkte auszuschließen; je nachdem, ob Sie bestimmte IDs ausschließen oder Duplikate zwischen verschiedenen Slidern vermeiden möchten.

Bestimmte IDs ausschließen #

Fügen Sie einfach das Attribut data-exclude zum Snippet hinzu. Im Inhalt von data-exclude geben Sie die IDs der Produkte an, die Sie nicht anzeigen möchten, z.B. Produkte im Warenkorb des Kunden oder eine Liste verbotener Produkte.

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

Duplikate vermeiden #

Dies geschieht durch Hinzufügen des Attributs data-exclude-from am Clerk Block, bei dem Sie Duplikate entfernen möchten. Der Wert des Attributs sollte ein CSS-Selektor der anderen Snippets sein, aus denen Duplikate ausgeschlossen werden sollen.

Im folgenden Beispiel schließt .clerk-2 alle Produkte aus, die in .clerk-1 sind, und .clerk-3 alle Produkte, die in .clerk-1 oder .clerk-2 sind.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk-1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1,.clerk-2"
  data-template="@clerk-banner-3">
</span>

Events #

Beim Aufbau maßgeschneiderter Setups müssen Sie häufig auf Ergebnisse von Clerk reagieren oder sie vor dem Rendern anpassen. Hier kommen Events ins Spiel.

Events ermöglichen das Einrichten von Event-Listenern, die zu bestimmten Zeitpunkten vor, während oder nach dem Rendern durch Clerk.js Code ausführen.

Ein typisches Beispiel ist das Laden kundenspezifischer Preise für eingeloggte B2B-Kunden. Ein Event kann unmittelbar nach dem Rendering der Clerk-API ausgelöst werden, um z.B. Sonderpreise abzurufen und an die Produkt-Elemente anzuhängen:

var customer_id = INSERT_CUSTOMER_ID;
Clerk("on", "rendered", function(content, data){
  for (i = 0; i < data.product_data.length; i++) {
      var product = data.product_data[i];
        var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
        let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
        price_container.innerText = custom_price;
    }
})

Mehr zu Events hier.

SEO und Performance #

Clerk.js ermöglicht personalisiertes Shopping, ohne Ihre Website zu verlangsamen oder das SEO zu beeinträchtigen. Durch clientseitiges Rendering und optimiertes Laden wird Geschwindigkeit, Performance und Auffindbarkeit bestmöglich balanciert.

SEO und Geschwindigkeit #

Es ist ein Irrglaube, dass JavaScript-Lösungen wie Clerk.js Performance oder SEO schaden. Automatisierte Tools übersehen oft Optimierungen wie Caching, paralleles Laden und serverseitiges Handling.

Vorteile der Clerk.js-Integration #

Das Clerk.js-Skript (≈ 37 - 38 KB) wird asynchron geladen, sodass Ihre Website bereits rendern kann, während Clerk initialisiert.
Clerk-Elemente werden clientseitig gerendert, Ihr Basis-HTML bleibt also cachebar und dynamische Komponenten werden erst nach dem Laden eingefügt.
Dies ermöglicht effizientes serverseitiges Caching und nicht-blockierendes Laden der Clerk.js-Assets.

Performance-Auswirkung #

Das geringe Gewicht und asynchrone Laden von Clerk.js führen in der Regel zu einer sehr geringen Auswirkung auf die Ladezeiten.
In der Praxis wirken sich zusätzliche Bilder, die durch Empfehlungen eingebunden werden, stärker auf die Performance aus als das Skript selbst. Um dies zu minimieren:
- Nutzen Sie optimal zugeschnittene, effiziente Formate wie WebP.
- Passen Sie die Bildgröße an die Anzeige (z.B. 400×400 px → maximal 420×420 px).
Um Layout-Shifts (CLS) zu vermeiden, reservieren Sie Platz für eingebettete Clerk-Inhalte.

Beispiel:

.clerk-slider-wrapper {
  min-height: 300px; /* nach Bedarf anpassen */
  width: 100%;
}

SEO-Aspekte #

Wer versteht, wie Clerk.js mit Suchmaschinen interagiert, sorgt für optimale Nutzererfahrung und beste Auffindbarkeit.

Verlinkung und Crawlability #

Clerk.js injiziert Empfehlungslinks dynamisch clientseitig.
Diese Links können die interne Verlinkung stärken, wenn sie von Suchmaschinen korrekt gerendert und gefolgt werden.
Da sie per JavaScript eingebunden werden, sollten Sie prüfen, wie Suchmaschinen-Crawler sie darstellen und interpretieren.
Richtig gecrawlte Links verbessern die Crawlability und ermöglichen es, mehr Seiten zu entdecken und indexieren.

PageRank-Verteilung #

Können Suchmaschinen sie crawlen, helfen Clerk.js-Links, Linkjuice (PageRank) auf wichtige Seiten zu verteilen.
Das kann die Sichtbarkeit und das Ranking von Produkt- und Kategorieseiten verbessern.

Beobachtete Vorteile #

Richtig integriertes Clerk.js korreliert oft mit stärkerer interner Verlinkungsstruktur, was die Sichtbarkeit in Suchergebnissen unterstützen kann.
Clerk.io Dashboards bieten Analysen über die Bestellbeeinflussung, Conversion-Uplifts und Umsatzbeiträge von Search, Recommendations, Email und Audience Funktionen.

Empfohlene Best Practices #

Optimieren Sie Bilder (WebP-Format, korrekte Auflösung).
Reservieren Sie Layoutplatz für dynamische Inhalte, um Layout-Shifts zu vermeiden.
Überwachen Sie reale Metriken anstatt sich nur auf automatisierte Scores zu verlassen. Nutzen Sie die Clerk-Dashboards, um die Auswirkungen kanalübergreifend zu bewerten.

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.

Clerk.js

Übersicht #

Snippets #

Injection #

Konfiguration #

Besucher-IDs #

Seitenkontext #

Sprache #

Design-Funktionen #

Formatters #

Globals #

Konfiguration #

Design #

Ausgabe #

Email-Tracking #

So funktioniert die Zuordnung #

Custom Rendering #

Debugging #

Aktivierungsmethoden #

Konfigurationsoptionen #

Session Storage #

UI Kit #

Instant Search #

Search Page #

Category Page #

Facetten #

Exit Intent #

Popup #

Produkte ausschließen #

Bestimmte IDs ausschließen #

Duplikate vermeiden #

Events #

SEO und Performance #

SEO und Geschwindigkeit #

Vorteile der Clerk.js-Integration #

Performance-Auswirkung #

SEO-Aspekte #

Verlinkung und Crawlability #

PageRank-Verteilung #

Beobachtete Vorteile #

Empfohlene Best Practices #