FAQ
Haben Sie Probleme mit Ihrer benutzerdefinierten Integration? Diese FAQ behandelt die häufigsten Probleme und deren Lösungen, von Single-Page-Apps bis zur Nachverfolgung von Verkäufen.
Single-Page-Apps #
Diese werden auch Progressive Web Apps (PWA) genannt und laden die Website im Allgemeinen als eine einzige Seite, anstatt individuelle Seiten wie üblich zu laden.
Wenn eine Seite zum ersten Mal geladen wird, feuert die Clerk.js-Bibliothek automatisch eine Funktion, um alle Element-Blöcke auf dieser Seite zu rendern.
Bei Single-Page-Apps, die Frameworks wie vue.js oder next.js verwenden, werden Seiten jedoch mit JavaScript statt mit einem Standard-Seitenladen gerendert.
Daher müssen Sie das Rendering mit Clerk.js so steuern, dass es dem Ladevorgang der Seiten in der App entspricht.
Clerk.js einbinden #
Clerk.js muss nur einmal geladen werden, wenn die Seite initial geladen wird.
Danach steht die Bibliothek während der gesamten Sitzung zur Verfügung.
Fügen Sie sie direkt vor dem </head> in Ihr HTML ein:
<!-- 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_PUBLIC_API_KEY'
});
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Rendering steuern #
Standardmäßig rendert Clerk.js alle Elemente, die die Klasse clerk haben – unabhängig davon, ob sie beim initialen Laden oder durch eine DOM-Änderung eingefügt wurden.
Sie können das Timing steuern, indem Sie das Element erst dann einfügen, wenn es bereit ist, gerendert zu werden.
Alternativ können Sie das Rendering mit der Funktion Clerk("content", "SELECTOR") kontrollieren.
Jedes Mal, wenn eine Seite geladen wird, führen Sie diese Schritte der Reihe nach aus:
Fügen Sie das Clerk-Snippet mit einem eindeutigen Selektor in das HTML ein, den Sie ansprechen können.
Führen Sie
Clerk("content", "SELECTOR")aus, um es zu rendern.
Wenn der Besucher die Seite verlässt, entfernen Sie das Snippet und rendern Sie es erneut, falls der Besucher auf die gleiche Seite zurückkehrt.
So wird sichergestellt, dass Clerk.js das Snippet nicht als bereits gerendert ansieht, sodass es nicht angezeigt werden würde.
Beispiel:
<span
id="clerk-custom-snippet"
data-template="@home-page-visitor-recommendations">
</span>
<script>
Clerk("content", "#clerk-custom-snippet")
</script>
Clerk.js kann auch so konfiguriert werden, dass Elemente automatisch initialisiert werden, nachdem Sie sie das erste Mal mit Ihren benutzerdefinierten Selektoren gerendert haben.
Einfluss auf Pagespeed #
Das Hinzufügen eines externen Tools wie Clerk.js erhöht die Ladezeit Ihrer Seite, jedoch ist der Anstieg im Vergleich zu den zusätzlichen Conversions, die erzielt werden, vernachlässigbar.
Unten sehen Sie, wie sich das auf die Leistung Ihrer Seite auswirkt.
Leistung #
Die Clerk.js-Bibliothek ist nur 37,5 KB groß und lädt daher sehr schnell.
Zudem lädt sie Elemente asynchron, das heißt, der Rest der Seite lädt weiterhin, während Clerk.js den Inhalt rendert.
Eine längere Ladezeit einer Seite entsteht in der Regel dadurch, dass mehr Bilder geladen werden als zuvor, da die Suchergebnisse und Empfehlungen von Clerk am besten funktionieren, wenn sie ansprechend dargestellt werden.
Um die zusätzliche Ladezeit zu minimieren, empfehlen wir Bilder im webp-Format zu verwenden, die der tatsächlichen Größe im Clerk-Element entsprechen.
Wenn z. B. Bilder in Empfehlungen auf dem Desktop eine Auflösung von 400x400px haben, sollte das zugrunde liegende Bild mit maximal 420x420px oder ähnlich übermittelt werden.
Google Page Speed #
Wenn Sie Google Page Speed Insights oder ein ähnliches Tool nutzen, um die Leistung Ihrer Seite zu analysieren, sehen Sie möglicherweise Clerk.js unter Leverage browser caching. aufgeführt.
Der Zweck von Clerk.js besteht darin, es extrem einfach zu machen, Ergebnisse von Clerk in jede beliebige Website einzufügen.
Clerk.js enthält viele Funktionen für das Tracking und UI-Komponenten wie Instant Search, Slider, Popups und mehr.
Wenn wir neue UI-Funktionen hinzufügen oder bestehende verbessern, werden diese in Clerk.js eingebunden und müssen vom Endnutzer heruntergeladen werden, um sie nutzen zu können.
Eine Cache-Ablaufzeit von 60 Minuten bedeutet, dass nach der Veröffentlichung neuer Features diese jedem Nutzer spätestens nach 60 Minuten zur Verfügung stehen.
Je länger die Cachezeit, desto länger dauert es, bis alle Nutzer Zugriff auf die neuesten Funktionen haben.
Wichtig ist, dass Endnutzer Clerk.js nur dann herunterladen müssen, wenn neue Features verfügbar sind.
Die 60-minütige Cache-Ablaufzeit bedeutet lediglich, dass der Browser des Endnutzers alle 60 Minuten bei Clerk nachfragt.
Wurden keine Änderungen an Clerk.js vorgenommen, wird nichts heruntergeladen.
Die Cachezeit von 60 Minuten ist somit ein Kompromiss zwischen dem Minimieren von Webanfragen und dem schnellen Bereitstellen neuer Funktionen und Verbesserungen.
Die meisten Sitzungen dauern weniger als 60 Minuten, sodass die Anfrage nur einmal pro Sitzung erfolgt.
Wie Sie im Screenshot sehen, ist dies eine übliche Praxis, die (wie auch Clerk) von Google Analytics, Facebook, Trustpilot und vielen anderen verwendet wird.
CLS-Einfluss #
Cumulative Layout Shift (CLS) kann das SEO und das Nutzererlebnis negativ beeinflussen, wenn dynamisch eingefügter Inhalt Elemente auf einer Seite verschiebt.
In einigen Fällen kann Clerk – unter anderem – zum CLS-Score beitragen.
Weitere Informationen zu CLS finden Sie hier.
Befolgen Sie diese Richtlinie nur, wenn Ihr CLS-Score höher als 0,2 ist und sich Clerk-Elemente im sichtbaren Bereich befinden.
Um Layout-Verschiebungen zu verhindern, sollte ein Platzhalter für Clerk-Empfehlungen reserviert werden, bevor Clerk.js diese injiziert.
Dazu muss eine Mindesthöhe auf Grundlage der zu erwartenden Inhaltshöhe vergeben werden.
Beispielcode:
.clerk-slider-wrapper {
min-height: 300px; /* Passen Sie dies basierend auf der erwarteten Höhe an */
width: 100%;
}
API-Aufrufe tätigen #
Sie können Clerk.js verwenden, um API-Aufrufe mit der integrierten Funktion Clerk("call") zu machen.
Diese Funktion hat 3 Argumente:
Ein API-Endpunkt
Ein JSON-Dictionary mit Parametern
Eine Callback-Funktion, die die Antwort verarbeitet
Anfragen #
Im folgenden Beispielskript werden die 10 beliebtesten Produkte abgefragt und die Antwort in der Konsole ausgegeben.
Die Antwort enthält ein JavaScript-Objekt mit dem Status des API-Aufrufs und dem Ergebnis.
Skript #
function popularProducts(){
Clerk("call",
"recommendations/popular",
{
limit: 10,
labels:["Home Page / Bestsellers"]
},
function(response){
console.log(response);
},
function(response){
console.error(response);
}
);
}
Antwort #
__clerk_cb_1(
{
"status":"ok",
"count":72,
"facets":null,
"result":[399,410,551,338,403,439,425,402,406,456]
}
);
Callbacks #
Bei API-Aufrufen können Sie Callback-Funktionen nutzen, um die Antwort flexibel zu verarbeiten.
Die Funktionen nehmen response als Argument entgegen, das alle vom API zurückgegebenen Daten enthält.
Unten finden Sie ein Beispiel, das eine HTML-Liste mit Links zu Kategorien erstellt, die der Suchanfrage “men” entsprechen.
Clerk("call",
"search/categories",
{
'query': "men",
'limit': "10"
},
function(response) {
var cat = response.categories;
if (cat.length > 0) {
let heading = document.createElement('h3');
heading.textContent = 'Related Categories';
document.querySelector('#your-target').append(heading);
}
for (var index in cat) {
var clerkName = cat[index].name;
var clerkUrl = cat[index].url;
let link = document.createElement('a');
link.href = clerkUrl;
link.textContent = clerkName;
document.querySelector('#your-target').append(link);
}
}
)
“In den Warenkorb”-Buttons #
Diese Buttons funktionieren auf jeder Plattform anders und ihre Funktionalität kann sich je nach verwendeten Plugins ändern.
Da die Designs von Clerk aus HTML & CSS bestehen, können Sie diese Funktionalität in der Regel hinzufügen, wenn Sie wissen, wie sie auf Ihrer Seite funktioniert.
Allgemeiner Ansatz #
Manche “In den Warenkorb”-Buttons benötigen JavaScript, damit sie funktionieren.
In diesen Fällen können Sie die Funktionalität in Clerks bestehende cart-Methode integrieren.
Siehe dazu unsere Developer-Dokumentation hier.
Untersuchen Sie den “In den Warenkorb”-Button, um den zugehörigen Code zu identifizieren – z. B. auf einer Kategorieseite.
Der Code ist meistens ein <div> oder ein button-Element.
Kopieren Sie den gesamten Button-HTML-Code.
Fügen Sie diesen Code in Ihr Design ein.
Nun müssen Sie die Variablen im Code identifizieren.
Meistens geht es darum, folgende Werte zu finden:
Produkt-ID
Produktanzahl
Ersetzen Sie die Werte für die Produkt-ID durch die Liquid-Variablen für diese Datenpunkte.
Die ID ist immer {{ product.id }} und die Menge unterscheidet sich je nachdem, wie Sie die Daten übergeben.
In diesem Beispiel könnte es {{ product.qty }} sein.
Fügen Sie Ihren Code in das HTML Ihres Designs ein und testen Sie, ob er wie gewünscht funktioniert.
Beispiel #
Der folgende “In den Warenkorb”-Button ist ein <div> mit der Klasse button-container:
Die Menge findet sich im Cart-Link nach /cart?add= und die Produkt-ID gleich nach &id_product=.
Die Produkt-ID wird außerdem in data-id-product referenziert, die Produktmenge in .data-minimal_quantity.
Diese Werte sollten im Design mit Liquid-Tags ersetzt werden, damit bei der HTML-Ausgabe die korrekten Produkt-IDs und -Mengen verwendet werden.
Mit diesen Änderungen sieht der finale “In den Warenkorb”-Button so aus:
<div class="button-container">
<a
class="button ajax_add_to_cart_button btn btn-default"
style="position: relative;"
href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&id_product={{ product.id }}&"
rel="nofollow"
title="Add to Cart"
data-id-product-attribute="0"
data-id-product="{{ product.id }}"
data-minimal_quantity="{{ product.qty }}">
<span style="color: orange !important">
<i class="icon-shopping-cart" aria-hidden="true"></i>
</span>
</a>
</div>
Konsolenfehler #
Clerk.js protokolliert viele Fehler in der Konsole, mit denen Sie Probleme debuggen können.
Wenn Sie auf den Fehlerlink klicken, erhalten Sie weitere Informationen darüber, was schiefgelaufen ist. Diese Informationen können Sie entweder zur Selbstanalyse nutzen oder an unser Support-Team weiterleiten.
Unten finden Sie eine Liste der häufigsten Fehler.
Unbekannter Inhalt #
Dieser Fehler wird angezeigt, wenn das von Ihnen eingefügte Snippet auf ein
Element verweist, das nicht existiert, in der data-template-Eigenschaft.
Korrigieren Sie dies, indem Sie sicherstellen, dass der Name im Embed-Code mit einem von Ihnen in my.clerk.io erstellten Element-Block übereinstimmt.
Sie können für jedes Element auf Element bearbeiten klicken, um zu sehen, wie der Verweis lauten muss.
Ungültiger API-Endpunkt #
Dieser Fehler tritt auf, wenn Sie irgendwo im HTML die Klasse clerk verwenden.
Diese Klasse ist für unsere Snippets reserviert – Clerk.js nutzt sie, um die zu rendernden Elemente zu identifizieren.
Verwenden Sie stattdessen z. B. clerk-product als Klassennamen.
Ungültiges Produktargument #
Dieser Fehler bedeutet, dass die übermittelte Produkt-ID einen falschen Typ oder eine falsche Syntax besitzt.
Wenn Ihre Produkt-IDs zum Beispiel Integer sind, müssen sie auch im Embed-Code als Integer übergeben werden.
Denken Sie außerdem an die eckigen Klammern um die ID, sodass es sich um eine Liste handelt.
<span
class="clerk"
data-template="@product-page"
data-products="[123]">
</span>
Ungültiges Kategorieargument #
Dieser Fehler bedeutet, dass die angegebene Kategorie-ID einen falschen Typ oder eine falsche Syntax hat.
Meistens passiert das, wenn der Platzhalter im Kategorie-Embed-Code nicht durch eine tatsächliche ID ersetzt wurde:
<span
class="clerk"
data-template="@category-page"
data-category="INSERT_CATEGORY_ID">
</span>
Die Ausgabe des Codes sollte dann die konkrete Kategorie-ID enthalten:
<span
class="clerk"
data-template="@category-page"
data-category="257">
</span>
Wenn Sie das Snippet manuell kopieren, wählen Sie im Dropdown Choose your platform auf jeden Fall Ihr Shopsystem aus, bevor Sie das Snippet kopieren.
Dadurch wird die platform-spezifische Logik integriert, um die korrekte Kategorie-ID auszuwählen.
Wenn Ihre Plattform nicht gelistet ist, müssen Sie die Logik hinzufügen, um die richtige Kategorie-ID entsprechend der Funktionalität Ihres Webshops auszuwählen.
Falscher API-Schlüssel #
Dieser Fehler wird angezeigt, wenn der von Ihnen angegebene öffentliche API-Key keinem Konto bei Clerk zugeordnet werden kann.
Loggen Sie sich in my.clerk.io ein und gehen Sie zu Developers > API Keys.
Hier finden Sie den public API Key, den Sie dann entweder direkt im Clerk.js-Tracking-Skript oder in den Einstellungen für Ihre Integration einfügen können – je nach Plattform.
POS/ERP-Verkaufsdaten #
Für einige Webshops kann der Upload von Verkaufsdaten aus anderen Systemen als dem eigentlichen Webshop relevant sein.
Z. B. falls Sie den Algorithmus anhand von Verkäufen aus einem physischen Laden oder B2B-Shop optimieren möchten.
Clerk macht keinen Unterschied zwischen Bestellungen aus verschiedenen Quellen – solange Sie eine ID, einen Zeitstempel und eine Produktliste liefern, können sie bei Clerk hochgeladen werden.
Empfohlen wird die CRUD-API, die eine vollständige Automatisierung ermöglicht.
Durch Implementieren dieser API-Aufrufe können Sie Bestelldaten direkt in Ihr Clerk-Store senden.
Senden Sie einfach einen POST-Aufruf an den /orders-Endpunkt Ihres ERP-Systems oder Webshops, führen Sie den Job z. B. einmal pro Monat aus, und Sie können Offline-Bestellungen nutzen, um Ihre Online-Empfehlungen und Suchergebnisse zu verbessern.
Alternativ können Sie eine CSV-Datei manuell hochladen, ohne zu programmieren.
Mehr Informationen dazu unter CSV-Dateien hier.
Währungsumrechnung #
Es gibt verschiedene Wege, wie mit Währungsumrechnung in Clerk gearbeitet werden kann.
Eine einfache Methode ist unten umrissen.
Währungen übersetzen #
Wenn Besucher Google Translate auf Ihrem Webshop verwenden, können Preiswerte auf eine Weise übersetzt werden, die das Layout bricht oder die Anzeige der Währung ändert.
Um dies zu vermeiden, geben Sie Ausgaben für Preise in Elementen aus, die nicht übersetzt werden sollen.
Empfohlene Auszeichnung #
Nutzen Sie sowohl translate="no" als auch die Klasse notranslate beim Preiselement:
<span class="clerk-price notranslate" translate="no">
{{ product.price | money }}
</span>
Falls Sie Listenpreis und Verkaufspreis anzeigen, gehen Sie nach demselben Muster für beide Preise vor:
<span class="clerk-old-price notranslate" translate="no">
{{ product.list_price | money }}
</span>
<span class="clerk-new-price notranslate" translate="no">
{{ product.price | money }}
</span>
Standorte anwenden #
- Im Clerk Design, in dem die Preise ausgegeben werden.
- In beliebigen benutzerdefinierten HTML-Wrappern, die Preiswerte ausgeben.
Dies ermöglicht die Übersetzung des übrigen Seiteninhalts, während Preise und Währungsformatierung korrekt erhalten bleiben.
Preisobjekte senden #
Clerk muss die Preise jedes Produkts in den verschiedenen Währungen kennen.
Am einfachsten ist es, diese als string-kodiertes JSON-Objekt der formatierten Preise mit dem Währungs-ISO als Schlüssel im Data Feed zu senden.
"products": [
{
"id": 1,
"name": "Cheese",
"description": "A nice piece of cheese.",
"price": 100,
"list_price": 50,
"categories": [25, 42],
"image": "http://example.com/images/products/1.jpg",
"url": "http://example.com/product/1",
"on_sale": true,
// String-encoded JSON examples
"prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
"list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"
},
{
"id": 2,
"name": "A pound of nuts",
"description": "That's a lot of nuts!",
"price": 150,
"categories": [1],
"image": "http://example.com/images/products/2.jpg",
"url": "http://example.com/product/2",
"on_sale": false,
// String-encoded JSON example
"prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
"list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
}
]
Formatierer erstellen #
In Clerk.js können Sie JavaScript-Funktionen definieren, die zusammen mit Ihren Designs genutzt werden können.
Definieren Sie hier eine Funktion, die Ihr price-dict als Argument nimmt und basierend auf der im Frontend gewählten Währung den Preis für eine bestimmte Währung zurückgibt.
Stellen Sie sicher, dass Sie currency mit der aktuell ausgewählten Währung aus dem Frontend ersetzen.
Clerk('config', {
key: 'Your_API_Key',
formatters: {
currency_selector: function (price_list) {
const currency = "EUR";
price_groups_obj = JSON.parse(price_list)
return price_groups_obj[currency];
}
}
});
Formatierer verwenden #
Nachdem Sie den Formatierer definiert haben, können Sie ihn in Ihrem Design mit folgender Syntax nutzen:
<div class="price">
<span class="price">
{{ product.prices_formatted | currency_selector }}
</span>
</div>
Kundenspezifische Preise #
Clerk unterstützt es, unterschiedliche Preise für eingeloggte Kunden anzuzeigen — entweder durch das Abrufen individueller Preise zur Renderzeit oder durch das Vorab-Speichern von Gruppenpreisen in den Produktdaten.
Dies ist ausführlich im eigenen Artikel zu Customer Pricing dargestellt.
HTTP-Authentifizierung #
HTTP-Authentifizierung wird oft auf Staging-Seiten benutzt, um unerwünschte Besucher zu verhindern.
Dies blockiert meist auch den Clerk Importer und verursacht typischerweise einen 401 Unauthorized-Fehler im Sync-Log.
Sie können dies beheben, indem Sie die Anmeldedaten in die Import-URL einfügen.
Gehen Sie dazu in my.clerk.io > Data > Configuration und aktualisieren Sie Ihre Import-URL wie folgt:
http://USER:PASS@www.ewoksRus.com/JSONFEED
Keine nachverfolgten Bestellungen #
In my.clerk.io sind Tracked Orders und Order Details zu einer gemeinsamen Orders-Seite zusammengefasst.
Clerk muss die Verkäufe im Webshop fortlaufend verfolgen, um Such- und Empfehlungsergebnisse aktuell zu halten.
Gewisse Einstellungen im Webshop können jedoch zum Scheitern der Verkaufstracking-Funktion führen.
Unten erfahren Sie, wie Sie die Verkaufstracking-Funktion beim Einsatz von Clerk.js debuggen und die häufigsten Ursachen sowie Lösungen finden.
Vor dem Start #
Stellen Sie sicher, dass Sie Folgendes installiert haben:
Das Clerk.js-Tracking-Skript auf allen Seiten.
Das Sales-Tracking-Skript auf Ihrer Bestellbestätigungsseite.
Diese Skripte sind beim Einsatz von Clerk.js zwingend erforderlich, um Verkäufe nachzuverfolgen.
Logs prüfen #
Meistens schlägt das Verkaufstracking aufgrund von Fehlern bei Besucher-IDs oder Produkt-IDs im Sale-Call fehl, der nach Kaufabschluss an Clerk geschickt wird.
Um das zu debuggen, müssen Sie eine Testbestellung aufgeben.
In manchen Fällen kann es jedoch auch am Tracking-Skript selbst liegen; dies lässt sich am einfachsten durch die Logs unter my.clerk.io > Developers > Logs. herausfinden.
Ist das Verkaufstracking wegen eines Scriptfehlers fehlerhaft, sehen Sie den Fehler häufig auf dieser Seite.
Klicken Sie auf Details, um mehr zu erfahren.
Sehen Sie hier keinen Fehler, identifizieren Sie andere Verkaufstracking-Probleme am einfachsten über eine Testbestellung.
Testbestellung Debugging #
Im Beispiel verwenden wir Chrome, aber andere Browser bieten ähnliche Funktionen.
Legen Sie einige Produkte im Webshop in den Warenkorb.
Gehen Sie zur Kasse.
Öffnen Sie VOR dem Bestellen die Konsole Ihres Browsers.
Wählen Sie Network und suchen Sie nach “clerk”.
Schließen Sie die Bestellung ab, sodass die Bestellbestätigungsseite angezeigt wird.
Klicken Sie auf den Call, der mit sale beginnt (in der Regel sale?key=…).
Hier sehen Sie die an das Sales-Tracking-API gesendeten und von ihr empfangenen Daten.
Unter Preview können Sie Fehler erkennen, die das Tracking verhindern.
Unten die gängigsten Fehler beim Verkaufstracking:
Ungültige Produkt-Syntax #
Dieser Fehler tritt auf, wenn die Produkt-IDs ein falsches Format haben.
Typische Fehler:
Die Produkt-IDs sind beim Tracking als Strings kodiert, werden bei Clerk aber als Integer erwartet (oder umgekehrt).
Die Produkt-ID-Liste enthält Textformatierungszeichen statt purem JSON:
"products":\[\\"id"\\:\\"123-m"\\\].
Fehlendes Argument #
Sie vergessen, alle für das Sale-Tracking nötigen Datenattribute im Sale-Tracking zu übermitteln.
Kein Aufruf gesendet #
Ist trotz beider installierter Skripte kein sale-Call zu sehen, wurde Clerk.js vermutlich nicht korrekt geladen.
Testen Sie dies so:
Öffnen Sie im Browser die Konsole.
Geben Sie “Clerk” ein.
Wenn Clerk.js nicht korrekt geladen ist, erscheint ein ReferenceError:
Uncaught ReferenceError: Clerk is not defined
Prüfen Sie im Fehlerfall Folgendes:
Stellen Sie sicher, dass Clerk.js auf allen Seiten installiert ist.
Stellen Sie sicher, dass Clerk.js nicht durch andere JavaScript-Funktionen blockiert wird.
Iubenda-Blocking #
Wenn Sie iubenda für Cookie-Zustimmung nutzen (insb. mit Automatischer Blockierung) und ein Besucher Cookies ablehnt, kann iubenda die Clerk-Skripte oder -Requests blockieren.
Typischerweise führt dies dazu, dass:
- Der
sale-Request nie abgesendet wird, also die Bestellung in Clerk nicht verfolgt oder zugeordnet wird. - Clerk-Elemente gar nicht laden oder Clerk.js einen Konsolenfehler wegen mehrfachen Ladens meldet (weil iubenda Skripte umschreibt/verschiebt).
Lösung: Clerk.io in iubenda erlauben #
Erlauben Sie in iubenda Clerk, damit er beim Ablehnen von Cookies nicht blockiert wird.
Mindestens diese Domains müssen freigegeben werden:
cdn.clerk.io(Clerk.js)api.clerk.io(Tracking- und Sales-Requests)
Die genaue Bezeichnung variiert je nach iubenda-Version, meist finden Sie sie im Bereich Cookie Solution > Automatische Blockierung (Whitelist/Ignore List).
Siehe auch die eigene Beschreibung von iubenda: https://www.iubenda.com/en/help/153445-what-to-do-when-the-automatic-blocking-mode-is-blocking-too-much/.
Fix verifizieren #
Nach Update der iubenda-Einstellungen:
- Shop aufrufen, Cookies ablehnen und die Browserkonsole öffnen.
- Sicherstellen, dass Clerk.js verfügbar ist (z. B. sollte
typeof Clerknicht"undefined"sein). Clerk("debug")ausführen, Testbestellung aufgeben und prüfen, dass einsale-Request an Clerk gesendet und mitstatus: "ok"beantwortet wird.
Kein Clerk-Einfluss #
Werden Verkäufe korrekt in my.clerk.io verfolgt, jedoch keiner davon als von Clerk beeinflusst angezeigt, könnte die Besucher-/Klick-Tracking-Integration Fehler enthalten.
Vergewissern Sie sich, dass Visitor Tracking wie folgt funktioniert:
Über Clerk’s Search oder Recommendations auf ein Produkt klicken.
Eine Bestellung tätigen, in der dieses Produkt enthalten ist.
In my.clerk.io einloggen und zu Orders navigieren.
Warten, bis die Bestellung angezeigt wird.
Wenn das Visitor Tracking korrekt arbeitet, sehen Sie den von Clerk beigesteuerten Wert in der Auftragsübersicht:
Wenn beim von Ihnen aufgegebenen Auftrag kein Value Added angezeigt wird, beachten Sie die folgenden häufigen Fehler:
API-Setups #
Haben Sie Clerk über eine individuelle Integration direkt mit der API verbunden, müssen Sie das Visitor Tracking explizit aktivieren.
Lesen Sie wie das funktioniert, im API-Artikel.
Falsche Produkt-IDs #
Für das Visitor Tracking müssen Klick- und Verkaufs-Tracking die gleichen Produkt-IDs nutzen wie im Import.
Meistens liegt ein Fehler vor, weil Sie Varianten-IDs statt Eltern-IDs oder die SKU statt der ID tracken.
Prüfung:
In my.clerk.io, in Data > Orders auf die ID einer Bestellungen klicken.
Falls Clerk das Produkt nicht erkennt, sehen Sie einen ID- und Image-Platzhalter.
In Data > Products den Namen des Produkts suchen, um die erwartete ID zu sehen.
Passen Sie Ihr Verkaufstracking so an, dass die richtigen Produkt-IDs verwendet werden.
Visitor-ID-Änderungen #
Clerk verwendet eine Visitor ID, um jede Sitzung zu identifizieren, einschließlich der geklickten und gekauften Produkte.
Die ID sollte daher innerhalb einer Sitzung und möglichst über mehrere Sitzungen hinweg gleich bleiben.
Wird die ID beim Verwenden von Clerk.js automatisch erzeugt. Nutzen Sie jedoch die API oder eigene Visitor-IDs, kann sie sich ggf. unbeabsichtigt ändern.
Diesen seltenen Fehler prüfen Sie so:
Öffnen Sie im Browser die Netzwerk-Einstellungen und filtern Sie nach “clerk”.
Prüfen Sie einen der
undefined-Aufrufe (Search oder Recommendations).Unter
payloadsehen Sie die aktuelle Visitor ID. Dies geht bei allen mit Clerk verbundenen Calls.Klicken Sie nun das Produkt an und bestellen Sie es.
Auf der Bestellbestätigungsseite prüfen Sie erneut unter Network den Call an
sale?.Prüfen Sie, ob
visitorunterpayloadmit der Visitor ID aus Schritt 3 übereinstimmt.
Wenn die IDs unterschiedlich sind, finden Sie die Ursache heraus.
Eine mögliche Ursache ist, dass Sie für jede Seite eine neue Visitor ID generieren.
Passen Sie Ihren Code so an, dass auf allen Seiten dieselbe Visitor ID verwendet wird.
Slider mit wenigen Produkten ausblenden #
Hat eine Kategorie sehr wenige Produkte, wirkt ein Slider leer oder wiederholt sich.
Lösungswege:
Clerk Design Bedingung #
Fügen Sie um das Slider-Markup eine Bedingung, damit es nur angezeigt wird, wenn genügend Produkte geliefert werden.
{% if products.length >= 6 %}
<div class="clerk-slider">
{% for product in products %}
<!-- product card -->
{% endfor %}
</div>
{% endif %}
Das ist schnell umgesetzt, kostet Sie aber trotzdem einen API-Call, auch wenn nichts angezeigt wird.
Serverseitige Bedingung #
Weiß Ihr System bereits vorher, wie viele Produkte in der Kategorie sind, steuern Sie die Ausgabe des Clerk-Snippets direkt im Template:
{% if category.product_count >= 6 %}
<span class="clerk" data-template="@category-page-slider"></span>
{% endif %}
Das ist der bevorzugte Weg, weil der Slider nur bei ausreichend Produkten initialisiert wird und das Verhalten mit der Logik Ihres Webshops übereinstimmt.
Upgrade auf Clerk.js 2 #
Clerk.js 2 ist eine schnellere und flexiblere Version unserer JavaScript-Bibliothek.
Sie macht die Integration von Clerk in jeden Webshop einfacher.
Da sich die beiden Versionen jedoch leicht unterscheiden, müssen Sie folgende Schritte befolgen, um erfolgreich zu aktualisieren.
Die zwei Hauptunterschiede in Clerk.js 2 sind:
Die Designs in my.clerk.io verwenden Liquid, können aber auch einfach im Design-Editor erstellt werden.
Das Skript muss direkt vor dem
</head>-Tag im Shop-Template eingefügt werden.
Designs erstellen #
Da Clerk.js 2 einen anderen Ansatz für Designs verfolgt, müssen Sie neue erstellen.
Sie können Ihre Clerk.js 2 Designs entweder komplett im Design Editor neu anlegen oder Ihr altes Code-Design mithilfe der unten stehenden Anleitung in Liquid konvertieren.
Nachfolgend die Anleitung zur Konvertierung alter Code-Designs in Liquid.
Design Editor Option #
Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design..
Wählen Sie einen Design-Typ außer Blank und vergeben Sie einen Namen – am besten mit “V2”, damit klar ist, dass Sie ein Clerk.js 2 Design nutzen.
Im Design Editor können Sie vorhandene Felder wie Name, Bild, Button usw. bearbeiten oder neue hinzufügen.
Klicken Sie auf Publish Design, wenn Sie fertig sind, und gehen Sie zu Schritt 2 in der Anleitung.
Gehen Sie zu Recommendations/Search > Elements und stellen Sie Ihr Clerk-Element auf das neue Design um, dann auf Update Element.
Die Elemente erscheinen dann erst wieder im Webshop, sobald Clerk.js 2, wie weiter unten beschrieben, eingefügt wurde.
Designs konvertieren #
Da Clerk.js 2 auf die flexiblere Template-Sprache Liquid setzt, müssen Designs in diese Sprache konvertiert werden.
Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design..
Wählen Sie Blank > Code und vergeben Sie einen passenden Namen. Auch hier empfiehlt sich ein “V2” im Namen, damit klar ist, dass es sich um ein Clerk.js 2 Design handelt.
Klicken Sie auf Create Design.
Dies gibt Ihnen ein leeres Design mit Product HTML und CSS, das Sie verwenden können.
Gehen Sie zurück zur Designübersicht und klicken Sie auf Design bearbeiten für Ihr Clerk.js 1 Design. Wir empfehlen, dies in einem neuen Tab zu tun, damit Sie den Code einfach kopieren können.
Kopieren Sie das alte Clerk.js 1 Design in Ihr neues Clerk.js 2 Design.
Sie werden feststellen, dass im neuen Design kein Container Code vorhanden ist.
Das liegt daran, dass Liquid for loops verwendet, um alle Produkte zu rendern.
Kopieren Sie Ihr altes Product HTML innerhalb der for-loop, Ihren alten Container Code herum und kopieren Sie auch das CSS.
Konvertieren Sie das Design in Liquids Syntax. Der Hauptunterschied besteht darin, dass die alten Designs die Syntax
{{ formatter attribute }}verwendet haben, während die Syntax in v2{{ product.attribute | formatter }}ist.Gehen Sie alle Ihre Attribute durch und ändern Sie sie auf das neue Format.
Wenn Sie
{{#if}}oder{{#is}}Statements verwenden, müssen diese ebenfalls konvertiert werden. Verwenden Sie die Syntax{% if product.attribute %}{% else %}{% endif %}.Löschen Sie
id="{{ $id }}"und die Klasse:targetaus dem Container Code in der Clerk.js 2 Version, da sie nicht mehr unterstützt werden.Unten finden Sie ein Beispiel für ein Clerk.js 1 Design und die vollständig konvertierte Version:
Clerk.js 1 Design #
// Product HTML
<li class="clerk-product">
<a href="{{ url }}">
<img src="{{ image }}" />
<div class="clerk-product-name">{{ name }}</div>
<div class="clerk-price-wrapper">
{{#if list_price}}
<div class="clerk-old-price">
<s>Price {{ money_eu list_price }}</s>
</div>
<span class="clerk-new-price">Price {{ money_eu price }}</span>
{{else}}
<div class="clerk-product-price">Price {{ money_eu price }}</div>
{{/if}}
</div>
</a>
<div class="clerk-cta-button btn button">Buy Now</div>
</li>
// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>
<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
Clerk.ui.slider("{{ id }}").init();
</script>
Clerk.js 2 Design #
<h2>{{ headline }}</h2>
<ul class="clerk-slider">
{% for product in products %}
<li class="clerk-product">
<a href="{{ product.url }}">
<img src="{{ product.image }}" />
<div class="clerk-product-name">{{ product.name }}</div>
<div class="clerk-price-wrapper">
{% if product.list_price %}
<span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
<span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
{% else %}
<div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
{% endif %}
</div>
<div class="clerk-cta-button btn button">Buy Now</div>
</a>
</li>
{% endfor %}
</ul>
Klicken Sie auf Design aktualisieren, um die Änderungen zu speichern.
Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihren Element-Block, um das neue Design zu verwenden.
Klicken Sie auf Element aktualisieren. Dadurch werden sie vorübergehend nicht mehr in Ihrem Webshop angezeigt, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle Elemente aus, die aktualisiert werden sollen.
Script ersetzen #
Suchen Sie die Template-Datei, die für die Anzeige aller Seiten des Webshops verwendet wird und in der sich das ursprüngliche Clerk.js Script am unteren Rand befindet.
Entfernen Sie das alte Clerk.js Script aus der Datei. Es sieht ungefähr so aus:
<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
window.clerkAsyncInit = function() {
Clerk.config({
key: 'public_api_key'
});
};
(function(){
var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
})();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Gehen Sie zu my.clerk.io > Developers > Tracking Code. Dort finden Sie den Clerk.js 2 Code.
Kopieren Sie diesen Code, fügen Sie ihn direkt vor dem
</head>Tag in das Template ein und speichern Sie es.
Glückwunsch! Sie verwenden jetzt das stark verbesserte Clerk.js 2 Setup!
Die vollständige Dokumentation zu Clerk.js 2 finden Sie hier.
Umgang mit require.js #
Dieser Abschnitt gilt nur, wenn Clerk.js 1 verwendet wird.
In einigen Setups verhindert Require.js, dass Clerk.js geladen wird, was bedeutet, dass keine Slider oder Suchergebnisse angezeigt werden.
Wenn dies der Fall ist, wird folgender Fehler in Ihrer Konsole angezeigt:
Uncaught ReferenceError: Clerk is not defined
Es gibt zwei Möglichkeiten, mit Require.js umzugehen. Beide Ansätze erfordern, dass Sie Änderungen am tracking-script vornehmen, das Sie am unteren Rand aller Seiten eingefügt haben.
In Require.js einbinden #
Der beste Ansatz ist, zu versuchen, Require.js dazu zu bringen, Clerk zu erkennen.
Sie können dies tun, indem Sie require(['clerk'], function() {}); am unteren Ende des Tracking-Skripts einfügen:
Require.js ignorieren #
Falls die oben genannte Lösung nicht funktioniert, ist es möglich, Require.js zu ignorieren.
Sie können dies tun, indem Sie window.__clerk_ignore_requirejs = true; am Anfang des Tracking-Skripts einfügen:
Nachdem Sie einen dieser Ansätze verwendet haben, ist Require.js jetzt mit Clerk kompatibel.
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.