FAQ
Haben Sie Probleme mit Ihrer benutzerdefinierten Integration? In diesem FAQ werden die häufigsten Probleme und deren Lösungen behandelt, 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, statt einzelne Seiten wie üblich zu laden.
Wenn eine Seite zum ersten Mal geladen wird, löst die Clerk.js-Bibliothek automatisch eine Funktion aus, die alle Content-Blöcke auf dieser Seite rendert.
Für Single-Page-Apps, die Frameworks wie Vue.js oder Next.js verwenden, werden Seiten jedoch mit JavaScript gerendert statt eines normalen Seitenladevorgangs.
Aufgrund dessen müssen Sie das Rendering mit Clerk.js steuern, damit es dem entspricht, wie Sie Seiten in der App laden.
Clerk.js einbinden #
Clerk.js muss nur einmal geladen werden, wenn die Website initial geladen wird.
Nach diesem Zeitpunkt steht die Bibliothek während der gesamten Sitzung zur Verfügung.
Binden Sie es direkt vor dem </head>-Tag in Ihrem 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 besitzen, unabhängig davon, ob sie beim initialen Laden der Seite eingefügt werden oder wenn der DOM sich ändert.
Sie können den Zeitpunkt steuern, indem Sie das Element einfügen, wenn es bereit zum Rendern ist.
Alternativ können Sie das Rendering mit der Funktion Clerk("content", "SELECTOR") steuern.
Jedes Mal, wenn eine Seite geladen wird, führen Sie diese Schritte der Reihe nach aus:
Fügen Sie das Clerk-Snippet dem HTML mit einem eindeutigen Selektor hinzu, den Sie anvisieren 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 es erneut, falls der Besucher auf dieselbe Seite zurückkehrt.
Dies soll sicherstellen, dass Clerk.js das Snippet nicht als zuvor gerendert ansieht, was dazu führen könnte, dass es nicht visualisiert wird.
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 es Content automatisch initialisiert mit Ihren benutzerdefinierten Selektoren, nachdem Sie es zum ersten Mal rendert haben.
Pagespeed-Auswirkungen #
Das Hinzufügen eines externen Tools wie Clerk.js wird die Ladezeit Ihrer Website erhöhen, es ist jedoch vernachlässigbar im Vergleich zu den zusätzlichen Conversions, die es liefern wird.
Unten sehen Sie, wie es sich auf die Leistung Ihrer Website auswirkt.
Leistung #
Die Clerk.js-Bibliothek ist nur 37,5 KB groß, daher lädt sie sehr schnell.
Außerdem lädt sie Elemente asynchron, was bedeutet, dass der Rest der Seite lädt, während Clerk.js Inhalte rendert.
Eine Erhöhung der Ladezeit einer Seite ergibt sich am häufigsten daraus, dass mehr Bilder geladen werden als zuvor, da Clerk’s Suchergebnisse und Empfehlungen am besten funktionieren, wenn sie ansprechend aussehen.
Um die zusätzliche Ladezeit zu minimieren, empfehlen wir, Bilder im webp-Format zu verwenden, die eine Auflösung haben, die der Größe entspricht, die sie in den Clerk-Elementen haben.
Wenn Bilder in recommendations eine Auflösung von 400x400px in der Desktop-Ansicht haben, senden Sie Bilder in einer Auflösung von maximalen 420x420px oder Ähnlichem.
Google Page Speed #
Wenn Sie Google Page Speed Insights oder ein ähnliches Tool verwenden, um die Leistung Ihrer Website zu analysieren, sehen Sie möglicherweise Clerk.js aufgeführt unter Leverage browser caching.
Der Zweck von Clerk.js ist es, das Einfügen von Clerk-Ergebnissen in jede Website super einfach zu machen.
Clerk.js enthält viele Funktionen, um Tracking- und UI-Komponenten wie Instant Search, Schieberegler, Popups und mehr zu handhaben.
Wenn wir neue UI-Funktionen hinzufügen oder Verbesserungen an bestehenden vornehmen, sind sie enthalten in Clerk.js und müssen vom Endbenutzer heruntergeladen werden, um sie zu verwenden.
Eine Cache-Ablaufzeit von 60 Minuten bedeutet, dass neue Funktionen innerhalb von maximal 60 Minuten allen Nutzern zur Verfügung stehen, wenn wir sie freigeben.
Je länger der Cache-Zeitraum, desto länger dauert es, bis alle Zugriff auf die neuesten Funktionen haben.
Wichtig ist, dass Endnutzer Clerk.js nur einmal herunterladen müssen, wenn neue Funktionen verfügbar sind.
Die Cache-Ablaufzeit von 60 Minuten bedeutet einfach, dass der Browser des Endnutzers alle 60 Minuten bei Clerk nachschaut.
Wenn an Clerk.js nichts geändert wurde, wird nichts heruntergeladen.
Die Cache-Ablaufzeit von 60 Minuten ist somit ein Kompromiss zwischen der Minimierung von Web-Anfragen und dem Erkennen neuer Funktionen und Verbesserungen.
Die meisten Sitzungen dauern weniger als 60 Minuten, daher wird die Anfrage nur einmal pro Sitzung gestellt.
Wie im Screenshot zu sehen ist, ist dies eine normale Praxis, die (zusammen mit Clerk) von Google Analytics, Facebook, Trustpilot und vielen anderen verwendet wird.
CLS-Auswirkung #
Cumulative Layout Shift (CLS) kann SEO und Benutzererlebnis negativ beeinflussen, wenn dynamisch eingefügter Inhalt Elemente auf einer Seite verschiebt.
In einigen Fällen, neben anderen Faktoren, kann Clerk zum CLS-Wert beitragen.
Sie können mehr über CLS hier lesen.
Befolgen Sie diese Richtlinie nur im Fall, dass Ihr CLS-Wert höher als 0,2 ist und Clerk-Elemente oberhalb des Faltbereichs liegen.
Um das Verschieben von Inhalten zu verhindern, muss vor Clerk.js ein Platzhalter für Clerk recommendations reserviert werden.
Dazu müssen wir eine Mindesthöhe basierend auf der erwarteten Inhaltshöhe hinzufügen.
Beispiel des Codes:
.clerk-slider-wrapper {
min-height: 300px; /* Adjust based on expected content height */
width: 100%;
}
API-Aufrufe #
Sie können Clerk.js verwenden, um API-Aufrufe zu tätigen, indem Sie die integrierte Funktion Clerk("call") verwenden.
Diese Funktion nimmt drei Argumente entgegen:
Einen API-Endpunkt
Ein JSON-Wörterbuch von Parametern
Eine Callback-Funktion zur Verarbeitung der Antwort
Anfragen #
Nachfolgend ein Beispielskript, das die 10 beliebtesten Produkte anfordert und die Antwort in der Konsole protokolliert.
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]
}
);
Callback-Funktionen #
Wenn Sie API-Aufrufe tätigen, können Sie Callback-Funktionen verwenden, um die Antwort nach Bedarf zu behandeln.
Die Funktionen nehmen response als Argument, das alle vom API zurückgegebenen Daten enthält.
Nachfolgend ein Beispiel, das eine Liste von HTML-Elementen erstellt, die zu Kategorien verlinken, die der Abfrage “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);
}
}
)
Add-to-cart Buttons #
Diese Buttons funktionieren plattformabhängig unterschiedlich, und die Funktionalität kann sich je nach verwendeten Plugins ändern.
Da Clerk-Designs aus HTML & CSS bestehen, können Sie diese Funktionalität in der Regel hinzufügen, wenn Sie verstehen, wie sie auf Ihrer Website funktioniert.
General approach #
Einige Add-to-Cart-Buttons benötigen JavaScript, damit sie funktionieren.
In diesen Fällen können Sie die Funktionalität zur bestehenden cart-Methode von Clerk hinzufügen.
Wie Sie dies in unseren Entwicklerdokumentationen hier tun, finden Sie dort.
Untersuchen Sie den Add-to-Cart-Button, um den damit verbundenen Code zu identifizieren, z. B. auf einer Kategorienseite.
Der Code wird in der Regel ein <div>- oder ein button-Element sein.
Kopieren Sie das komplette Button-HTML.
Kopieren Sie diesen Code in Ihr Design.
Jetzt müssen Sie die Variablen im Code identifizieren.
In den meisten Fällen müssen Sie herausfinden, wo der Code verwendet wird:
Produkt-ID
Produktmenge
Ersetzen Sie die Werte für die Produkt-ID durch die Liquid-Variablen für diese Datenpunkte.
Die ID wird immer {{ product.id }} lauten und die Menge variiert je nachdem, wie Sie die Daten senden.
Für dieses Beispiel könnte es {{ product.qty }} sein.
Fügen Sie Ihren Code in das HTML Ihres Designs ein und testen Sie ihn, um sicherzustellen, dass er funktioniert.
Beispiel #
Der untenstehende Add-to-Cart-Button ist ein <div>, der die Klasse button-container hat:
Die Menge befindet sich innerhalb des Cart-Links nach /cart?add= und die Produkt-ID befindet sich direkt nach &id_product=.
Die Produkt-ID wird auch in data-id-product referenziert, und die Produktmenge wird in .data-minimal_quantity referenziert.
Diese Werte sollten mit Liquid-Tags im Design ersetzt werden, damit die entsprechenden Produkt-IDs und Mengen im HTML-Ausgabe verwendet werden.
Mit diesen Änderungen sieht der finale Add-to-Cart-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, die Sie zur Fehlerbehebung verwenden können.
Durch Klicken auf den Fehlerlink erhalten Sie weitere Informationen darüber, was schief gelaufen ist, die Sie verwenden können, um den Fehler selbst zu debuggen oder an unser Support-Team zu senden, das Ihnen helfen wird.
Unten finden Sie eine Liste der häufigsten Fehler.
Unbekannter Inhalt #
Dieser Fehler wird angezeigt, wenn das von Ihnen eingefügte Snippet auf einen
Content verweist, der nicht existiert, im data-template-Attribut.
Um ihn zu beheben, stellen Sie sicher, dass der Name im Embed-Code mit einem Content-Block übereinstimmt, den Sie in my.clerk.io erstellt haben.
Sie können Content bearbeiten für jeden Content klicken, um zu sehen, wie der Verweis aussehen sollte.
Ungültiger API-Endpunkt #
Dieser Fehler tritt auf, wenn Sie irgendwo in Ihrem HTML die Klasse clerk verwendet haben.
Diese Klasse ist für die Verwendung mit unseren Snippets reserviert, da Clerk.js diese Klasse verwendet, um die zu rendernden Elemente zu identifizieren.
Um dies zu beheben, stellen Sie sicher, dass Sie der Klasse einen anderen Namen geben, z. B. clerk-product.
Ungültiges Produkt-Argument #
Dieser Fehler bedeutet, dass die angegebene ID für ein Produkt einen falschen Typ oder eine falsche Syntax hat.
Wenn Ihre Produkt-IDs z. B. Ganzzahlen sind, müssen sie im Einbettungscode ebenfalls so sein.
Beachten Sie auch die Klammern um die ID, um sie zu einer Liste zu machen.
<span
class="clerk"
data-template="@product-page"
data-products="[123]">
</span>
Ungültiges Kategorie-Argument #
Dieser Fehler bedeutet, dass die angegebene ID für eine Kategorie einen falschen Typ oder eine falsche Syntax hat.
In den meisten Fällen passiert dies, wenn der Platzhalter im Kategorie-Einbettungscode nicht durch eine tatsächliche ID ersetzt wurde:
<span
class="clerk"
data-template="@category-page"
data-category="INSERT_CATEGORY_ID">
</span>
Der Output des Codes sollte die ID der Kategorie enthalten:
<span
class="clerk"
data-template="@category-page"
data-category="257">
</span>
Wenn Sie das Snippet manuell kopiert haben, stellen Sie sicher, dass Sie Ihr Shopsystem im Choose your platform Dropdown auswählen, bevor Sie das Snippet kopieren.
Es wird sich dann ändern, um die Logik Ihrer Plattform einzuschließen, um die richtige Kategorie-ID auszuwählen.
Wenn Ihre Plattform nicht aufgeführt ist, müssen Sie die Logik manuell hinzufügen, um die richtige Kategorie-ID basierend auf der Funktionalität Ihres Webshops auszuwählen.
Ungültiger API-Schlüssel #
Dieser Fehler wird angezeigt, wenn der von Ihnen angegebene öffentliche API-Schlüssel keinem Konto in Clerk entspricht.
Um dies zu beheben, melden Sie sich bei my.clerk.io an und gehen Sie zu Developers > API Keys.
Hier finden Sie den Public API Key, den Sie dann zu Ihrem Clerk.js-Tracking-Skript entweder direkt im Code oder in den Einstellungen Ihrer Integration hinzufügen können, abhängig von Ihrer Plattform.
POS/ERP-Verkaufsdaten #
Für einige Webshops ist es sinnvoll, Verkaufsdaten aus anderen Systemen als dem eigentlichen Webshop hochzuladen.
Wenn Sie beispielsweise den Algorithmus basierend auf Verkäufen aus einem physischen Geschäft oder B2B-Shop optimieren möchten.
Clerk unterscheidet nicht zwischen Bestellungen aus verschiedenen Quellen — solange Sie eine ID, einen Zeitstempel und eine Liste der gekauften Produkte bereitstellen können, können sie zu Clerk hochgeladen werden.
Der empfohlene Ansatz ist die Verwendung der CRUD API, da Sie damit die Aufgabe vollständig automatisieren können.
Durch die Implementierung dieser API-Aufrufe können Sie Bestelldaten direkt in Ihren Store in Clerk senden.
Erstellen Sie einfach einen POST-Aufruf an das /orders-Endpunkt in Ihrem ERP-System oder Webshop, führen Sie den Job in regelmäßigen Abständen aus, z. B. einmal im Monat, 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 etwas programmieren zu müssen.
Weitere Informationen zu CSV-Dateien hier.
Währungsumrechnung #
Es gibt mehrere Möglichkeiten, mit Währungsumrechnung in Clerk zu arbeiten.
Eine einfache Methode, dies zum Laufen zu bringen, ist nachfolgend beschrieben.
Preisobjekte senden #
Clerk muss die Preise jedes Produkts in den unterschiedlichen Währungen kennen.
Der einfachste Weg, dies zu tun, besteht darin, sie als ein string-codiertes JSON-Objekt formatierter Preise zu senden, wobei der ISO-Währungscode als Schlüssel dient, in Ihrem Data Feed.
"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\"}"
}
]
Formatter erstellen #
In Clerk.js können Sie JavaScript-Funktionen definieren, die mit Ihren Designs verwendet werden können.
Hier können Sie eine Funktion definieren, die Ihr price-dict als Argument nimmt und den Preis für eine bestimmte Währung zurückgibt, basierend auf der Frontend-Logik Ihrer Wahl.
Stellen Sie sicher, dass Sie currency durch die aktuell im Frontend gewählte Währung 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];
}
}
});
Formatter verwenden #
Nachdem der Formatter erstellt wurde, kann er in Ihrem Design mit der unten gezeigten Syntax verwendet werden:
<div class="price">
<span class="price">
{{ product.prices_formatted | currency_selector }}
</span>
</div>
Kundenspezifische Preise #
Um völlig einzigartige Preise anzuzeigen, abhängig davon, welcher Kunde eingeloggt ist, erstellen Sie in Clerk ein Event, das den richtigen Preis einfügt, bevor die Produkte gerendert werden.
Events sind JavaScript-Funktionen, die vor oder nach Clerk die Produkte anzeigen.
Dieser Ansatz ist möglich, wenn Sie Preise von Ihrem Server direkt aus einer JavaScript-Funktion im Frontend basierend auf einer Produkt-ID und einer Kunden-ID nachschlagen können.
Für die Anzeige individueller Kundenpreise sollte der Code direkt nach der Antwort ausgeführt werden.
Nachfolgend ein Beispiel für ein einfaches Event.
<span class="clerk" data-template="@home-page-popular"></span>
<script>
Clerk('on', 'response', function(content, data) {
console.log(data.result);
});
</script>
Die Funktion nimmt das Argument data, das die gesamte Antwort ist, die Clerk von der API zurücksendet.
Kundengruppenpreise #
Die Einrichtung von Kundengruppenpreisen besteht aus 4 Schritten:
Die verschiedenen Preise in den data feed aufnehmen.
Eine Variable einfügen, die die aktuelle Kundengruppe-ID abruft.
Eine Funktion erstellen, um den relevanten Preis abzurufen.
Den Preis im Design anzeigen.
Preisobjekte einschließen #
Beginnen Sie damit, allen Produkten ein Attribut hinzuzufügen, das alle verschiedenen Preisoptionen enthält, und stellen Sie sicher, dass jeder Preis einer bestimmten Kundengruppe zugeordnet ist.
Dies sollte als ein string-codiertes JSON-Objekt gesendet werden. Zum Beispiel:
"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"
Kundengruppe-ID-Variable #
Fügen Sie Clerk.js eine dynamische globale Variable hinzu, die die Kundengruppe-ID des aktuellen Kunden abruft und sie als Wert setzt.
Der Wert der Kundengruppe-ID muss dem Schlüssel des entsprechenden Preises im Data Feed entsprechen.
Beispielsweise sollte ein Benutzer, der den Preis für Gruppe 2 sehen soll, die ID “GROUP2” sein.
Clerk('config', {
globals: {
customer_group: "GROUP2"
}
});
Preis abrufen #
Sie können nun einen Formatter erstellen, der die customer_group als Argument nimmt und den relevanten Preis zurückgibt.
Tun Sie dies, indem Sie eine Funktion schreiben, die den Preis aus der jeweiligen Kundengruppe als Schlüssel im Preis-Dict basierend auf der customer_group-ID abruft.
Fügen Sie dies in der Clerk.js-Konfiguration hinzu. Unten ist ein Beispiel namens getPrice:
Clerk('config', {
globals: {
customer_group: "GROUP2"
},
formatters: {
getPrice: function (product) {
const gid = window.Clerk._config.globals.customer_group;
if (product.customer_group_prices) {
const map = JSON.parse(product.customer_group_prices);
if (map[gid]) {
return map[gid];
} else {
return product.price;
}
} else {
return product.price;
}
}
}
});
Preis anzeigen #
Wenn der getPrice-Formatter erstellt wurde, können Sie ihn direkt in Ihrem Design benennen, zusammen mit der customer_group_prices-Liste, die Sie in Schritt 1 erstellt haben:
<li style="text-align: center; width: 180px;">
<a href="{{ product.url }}">
<img src="{{ product.image }}" />
{{ product.name }}
</a>
<div class="price">
{{ product | getPrice }}
</div>
</li>
HTTP-Authentifizierung #
HTTP-Authentifizierung wird oft auf Staging-Seiten verwendet, um unerwünschte Besucher fernzuhalten.
Dies blockiert in vielen Fällen auch den Clerk-Importer und zeigt typischerweise einen 401 Unauthorized-Fehler im Synchronisierungsprotokoll an.
Sie können dies beheben, indem Sie die Authentifizierungsinformationen in die Import-URL einfügen.
In my.clerk.io > Data > Configuration, aktualisieren Sie Ihre Import-URL wie folgt:
http://USER:PASS@www.ewoksRus.com/JSONFEED
Keine verfolgten Bestellungen #
In my.clerk.io werden Verfolgte Bestellungen und Bestelldetails zu einer einzigen Bestellseite zusammengeführt.
Clerk muss fortlaufend Verkäufe aus dem Webshop verfolgen, um die Ergebnisse aktuell im Einklang mit dem Verhalten Ihrer Kunden zu halten.
Einige Einstellungen in einem Webshop können jedoch dazu führen, dass das Verkaufs-Tracking fehlschlägt.
Nachfolgend erfahren Sie, wie Sie das Verkaufs-Tracking bei der Verwendung eines Clerk.js-Setups debuggen und sehen, welche die häufigsten Probleme und Lösungen sind.
Bevor Sie beginnen #
Stellen Sie sicher, dass Sie installiert haben:
Das Clerk.js Tracking-Skript auf allen Seiten.
Das Sales-Tracking-Skript auf Ihrer Order Success-Seite.
Diese sind erforderlich, um Verkäufe allgemein nachzuverfolgen, wenn Sie ein Clerk.js-Setup verwenden.
Logs prüfen #
In den meisten Fällen scheitert das Verkaufs-Tracking aufgrund von Fehlern in den Besucher-IDs oder Produkt-IDs des Verkaufsaufrufs, der nach einem Kauf an Clerk gesendet wird.
Um dies zu debuggen, müssen Sie eine Testbestellung erstellen.
In manchen Fällen kann es jedoch mit dem Sales-Tracking-Skript selbst zusammenhängen und kann durch Prüfen der Logs in my.clerk.io > Developers > Logs. debuggt werden.
Wenn das Verkaufs-Tracking aufgrund eines Fehlers in Ihrem Skript fehlschlägt, können Sie den Fehler oft auf dieser Seite sehen.
Klicken Sie auf Details um mehr zu sehen.
Wenn Sie in den Logs keine Fehler sehen, ist der einfachste Weg, andere Verkaufs-Tracking-Probleme zu identifizieren, eine Testbestellung.
Debugging der Testbestellung #
In diesem Beispiel verwenden wir Chrome, um zu zeigen, wie man das Verkaufs-Tracking mit einer Testbestellung debuggt, aber andere Browser haben ähnliche Funktionen.
Öffnen Sie in Ihrem Webshop ein paar Produkte im Warenkorb.
Fortfahren zu Checkout.
Bevor Sie die Bestellung aufgeben, öffnen Sie die Konsole Ihres Browsers.
Öffnen Sie Netzwerk und suchen Sie nach “clerk”.
Platzieren Sie die Bestellung, damit Sie die Bestellbestätigungsseite sehen.
Klicken Sie auf den Aufruf, der mit sale beginnt (normalerweise sale?key=…).
Hier sehen Sie die Daten, die an die Verkaufs-Tracking-API-Endpunkt gesendet und von dieser empfangen werden.
Klicken Sie auf Preview, um etwaige Fehler zu identifizieren, die dazu führen können, dass Verkäufe nicht nachverfolgt werden.
Nachfolgend häufige Fehler im Zusammenhang mit dem Verkaufs-Tracking.
Ungültige Produkt-Syntax #
Dieser Fehler tritt auf, wenn die Produkt-IDs, die Sie senden, eine falsche Syntax haben.
Die häufigsten Fehler sind:
Die Produkt-IDs sind im Verkaufs-Tracking string-kodiert, Sie verwenden jedoch Ganzzahlen in Clerk oder umgekehrt.
Die Liste der Produkt-IDs enthält Text-Formatierungs-Zeichen statt reines JSON:
"products":\[\\"id"\\:\\"123-m"\\\].
Fehlendes Argument #
Dies bedeutet, dass Sie nicht alle Daten senden, die Clerk benötigt, um den Verkauf nachzuverfolgen.
Stellen Sie sicher, dass Sie alle notwendigen Datenattribute im sales-tracking.
Kein Aufruf getätigt #
Wenn Sie den Aufruf zu sale nicht sehen können, obwohl beide Skripte installiert sind, dann wurde Clerk.js möglicherweise falsch geladen.
Testen Sie dies, indem Sie diese Schritte befolgen:
Öffnen Sie die Konsole in Ihrem Browser.
Geben Sie “Clerk” ein.
Wenn Clerk.js nicht korrekt geladen wurde, sehen Sie einen ReferenceError:
Uncaught ReferenceError: Clerk is not defined
Falls dies der Fall ist, überprüfen Sie Ihre Clerk.js-Einrichtung:
Stellen Sie sicher, dass Clerk.js auf allen Seiten installiert ist.
Stellen Sie sicher, dass es nicht durch andere JavaScript-Funktionen blockiert wird.
Kein Clerk-Einfluss #
Wenn Sie Verkäufe erfolgreich in my.clerk.io verfolgen, aber keiner von ihnen als von Clerk beeinflusst angezeigt wird, könnte ein Fehler in Ihrer Besucher-Verfolgung / Klick-Verfolgung-Einrichtung vorliegen.
Beginnen Sie damit sicherzustellen, dass die Besucher-Verfolgung funktioniert, indem Sie Folgendes tun:
Klicken Sie auf ein beliebiges Produkt über Clerk’s Search oder Recommendations.
Fahren Sie fort, eine Bestellung dieses Produkts aufzugeben.
Melden Sie sich bei my.clerk.io an und gehen Sie zu Orders.
Warten Sie, bis die Bestellung erscheint.
Wenn Besucher-Verfolgung funktioniert, sehen Sie den von Clerk zur Bestellung hinzugefügten Wert auf der Bestellungsseite unter Orders:
Wenn Sie keinen Wert hinzugefügt in der von Ihnen getätigten Bestellung sehen, zeigen die folgenden Abschnitte häufige Fehler, die dies verursachen könnten.
API-Einrichtungen #
Wenn Sie Clerk mit einer benutzerdefinierten Integration direkt über die API eingerichtet haben, müssen Sie die Besucher-Verfolgung aktivieren.
Lesen Sie dazu, wie es in diesem API-Artikel beschrieben ist.
Falsche Produkt-IDs #
Damit die Besucher-Verfolgung funktioniert, müssen die Klick- und Verkaufs-Tracking dieselben Produkt-IDs verfolgen wie die, die wir im Importer empfangen.
In der Regel liegt es daran, dass Sie Variant-IDs statt Parent-IDs oder die SKU statt der ID verfolgen.
Um zu prüfen, ob dies das Problem ist, führen Sie Folgendes aus:
In my.clerk.io gehen Sie zu Data > Orders und klicken Sie die ID einer von Ihnen aufgegebenen Bestellung an.
Wenn Clerk das Produkt nicht identifizieren kann, sehen Sie einen ID- und Image-Platzhalter.
Gehen Sie zu Data > Products und suchen Sie nach dem Namen des hinzugefügten Produkts. Hier können Sie die erwartete ID für das Produkt sehen.
Verwenden Sie dies, um Ihr sales-tracking so zu konfigurieren, dass die richtigen Produkt-IDs verwendet werden.
Besucher-ID-Änderungen #
Clerk verwendet eine Besucher-ID, um jede einzelne Sitzung zu identifizieren, einschließlich der Produkte, die sie anklicken und kaufen.
Daher sollten die IDs während der gesamten Sitzung gleich bleiben und möglichst auch über mehrere Sitzungen hinweg.
Diese Besucher-ID wird automatisch erstellt, wenn Sie Clerk.js für das Setup verwenden, aber wenn Sie ein API-Setup verwenden oder Ihre Besucher-IDs anpassen, könnten Sie sie versehentlich ändern.
Dieser Fehler ist selten, aber Sie können die Besucher-ID überprüfen, indem Sie diese Schritte befolgen:
Öffnen Sie die Netzwerk-Einstellungen im Browser und filtern Sie die Ergebnisse auf “clerk”.
Prüfen Sie zunächst beliebige
undefined-Aufrufe, die sich auf Search oder Recommendations beziehen.In
payloadkönnen Sie die aktuelle Besucher-ID prüfen. Sie können dies für alle Aufrufe tun, die mit Clerk verbunden sind.Klicken Sie auf das Produkt und platzieren Sie eine Bestellung mit diesem Produkt.
Auf der Order Success-Seite überprüfen Sie erneut Ihr Network und finden den Aufruf zu
sale?.Stellen Sie sicher, dass
visitorimpayloadmit der Visitor-ID übereinstimmt, die Sie in Schritt 3 gesehen haben.
Wenn die visitor-IDs nicht übereinstimmen, müssen Sie herausfinden, warum sie sich ändern.
Eine häufige Ursache für Änderungen von Besucher-IDs könnte sein, dass Sie die IDs für jede neue Seite neu generieren.
Aktualisieren Sie Ihren Code, um dieselbe Besucher-ID für jede Seite zu verwenden.
Upgrade auf Clerk.js 2 #
Clerk.js 2 ist eine schnellere und flexiblere Version unserer JavaScript-Bibliothek.
Es erleichtert die Installation von Clerk in jedem Webshop.
Da die beiden Versionen jedoch etwas unterschiedlich funktionieren, müssen Sie die folgenden 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 mit dem Design-Editor erstellt werden.
Das Skript muss direkt vor dem
</head>-Tag in der Vorlage Ihres Webshops eingefügt werden.
Designs erstellen #
Da Clerk.js 2 einen anderen Ansatz für Designs hat, müssen Sie neue erstellen.
Sie können Ihre Clerk.js 2-Designs entweder durch erneutes Erstellen im Design Editor erstellen, oder indem Sie Ihre alten Code-Designs in Liquid konvertieren, was der unten stehende Leitfaden erklärt, wie das geht.
Unten finden Sie eine Beschreibung, wie Sie Ihre alten Code-Designs in Liquid konvertieren können.
Design Editor-Option #
Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
Wählen Sie einen Designtyp außerhalb von Blank und geben Sie ihm einen Namen. Wir empfehlen, V2 hinzuzufügen, damit offensichtlich wird, dass Sie Clerk.js 2-Designs verwenden.
Im Design Editor klicken Sie auf eines der vorhandenen Elemente wie Name, Bild, Button usw., um es zu bearbeiten, oder fügen Sie dem Design neue Elemente hinzu.
Klicken Sie Publish Design, wenn Sie fertig sind, und gehen Sie im Leitfaden zu Step 2.
Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihren Clerk Content so, dass er Ihr neues Design verwendet, dann klicken Sie auf Update Content.
Dadurch werden sie vorübergehend nicht im Webshop angezeigt, bis Sie Clerk.js 2 wie weiter unten in diesem Leitfaden beschrieben eingefügt haben.
Designs konvertieren #
Da Clerk.js 2 die flexiblere template language Liquid verwendet, müssen Sie die Designs in diese Sprache konvertieren.
Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
Wählen Sie Blank > Code und geben Sie ihm einen Namen. Wir empfehlen, V2 hinzuzufügen, damit offensichtlich wird, dass Sie Clerk.js 2-Designs verwenden.
Klicken Sie Create Design.
Dadurch erhalten Sie ein leeres Design mit Produkt-HTML und CSS, das Sie verwenden können.
Gehen Sie zurück zur Designübersicht und klicken Sie Edit Design 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 in Ihrem neuen kein Container Code vorhanden ist.
Das liegt daran, dass Liquid for loops verwendet, um alle Produkte anzuzeigen.
Kopieren Sie Ihr altes Product HTML innerhalb der for-Schleife, Ihr altes Container Code darum herum, und kopieren Sie auch das CSS.
Konvertieren Sie das Design in die Liquid-Syntax. Der Hauptunterschied besteht darin, dass die alten Designs die Syntax
{{ formatter attribute }}verwendeten, während die Syntax von v2{{ product.attribute | formatter }}ist.Gehen Sie alle Ihre Attribute durch und ändern Sie sie in das neue Format.
Wenn Sie
{{#if}}- oder{{#is}}-Anweisungen 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 eines Clerk.js 1-Designs 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 Update Design, um die Änderungen zu speichern.
Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihren Content-Block so, dass er Ihr neues Design verwendet.
Klicken Sie auf Update Content. Dadurch werden sie vorübergehend nicht im Webshop angezeigt, bis Sie mit Step 2. fertig sind. Wählen Sie das neue Design für alle Inhalte, die aktualisiert werden sollen.
Replace script #
Finden Sie die Template-Datei, die verwendet wird, um alle Seiten des Webshops anzuzeigen, und wo sich das ursprüngliche Clerk.js-Skript am unteren Rand befindet.
Entfernen Sie das alte Clerk.js-Skript aus der Datei. Es wird ungefähr so aussehen:
<!-- 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.. Dies enthält den Clerk.js 2-Code.
Kopieren Sie diesen Code, fügen Sie ihn direkt vor dem
</head>-Tag in die Vorlage ein, und speichern Sie sie.
Herzlichen Glückwunsch! Sie verwenden jetzt das deutlich verbesserte Clerk.js 2-Setup!
Sie können die vollständige Dokumentation zu Clerk.js 2 hier. einsehen.
Umgang mit require.js #
Dieser Abschnitt gilt nur bei Verwendung von Clerk.js 1.
In einigen Setups verhindert Require.js das Laden von Clerk.js, was bedeutet, dass keine Slider oder Suchergebnisse angezeigt werden.
Wenn dies passiert, wird in Ihrer Konsole folgender Fehler angezeigt:
Uncaught ReferenceError: Clerk is not defined
Es gibt zwei Möglichkeiten, mit Require.js umzugehen. Beide Ansätze erfordern Änderungen am tracking-script, 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 erreichen, indem Sie am unteren Rand des Tracking-Skripts require(['clerk'], function() {}); einfügen:
Require.js ignorieren #
Wenn die obige Lösung nicht funktioniert, ist es möglich, Require.js zu ignorieren.
Sie können dies erreichen, indem Sie am oberen Rand des Tracking-Skripts window.__clerk_ignore_requirejs = true; einfügen:
Nachdem Sie eine dieser Vorgehensweisen verwendet haben, wird Require.js nun mit Clerk kompatibel sein.
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.