Häufig gestellte Fragen

Single-page Apps (SPA) #

Diese werden auch als Progressive Web Apps (PWA) bezeichnet und laden die Seite im Allgemeinen als eine einzige Seite, anstatt einzelne Seiten wie gewohnt zu laden.

Wenn eine Seite zum ersten Mal geladen wird, feuert die Clerk.js-Bibliothek automatisch eine Funktion, um alle Inhalte auf dieser Seite zu rendern.

Für Single-Page-Apps, die Frameworks wie vue.js oder next.js verwenden, werden Seiten jedoch mit JavaScript anstelle eines standardmäßigen Seitenladens gerendert. Daher müssen Sie das Rendering mit Clerk.js steuern, um sicherzustellen, dass es mit der Art und Weise übereinstimmt, wie Sie Seiten in der App laden.

Clerk.js einfügen #

Clerk.js muss nur einmal geladen werden, wenn die Seite zunächst geladen wird. Danach ist die Bibliothek während der gesamten Sitzung verfügbar. Fügen Sie es direkt vor dem </head> in Ihrem HTML ein:

<!-- Start des Clerk.io E-Commerce-Personalisierungstools - 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>
<!-- Ende des Clerk.io E-Commerce-Personalisierungstools - www.clerk.io -->

Rendering steuern #

Standardmäßig rendert Clerk.js alle Elemente, die die Klasse clerk haben, unabhängig davon, ob sie während des initialen Seitenladens oder bei DOM-Änderungen eingefügt werden. Sie können das Timing steuern, indem Sie das Element einfügen, wenn es bereit ist, gerendert zu werden.

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 in der angegebenen Reihenfolge aus:

• Fügen Sie den Clerk-Snippet in das HTML mit einem einzigartigen Selektor ein, den Sie anvisieren können.
• Führen Sie Clerk("content", "SELECTOR") aus, um es zu rendern.

Wenn der Besucher die Seite verlässt, zerstören Sie den Snippet und rendern Sie ihn erneut, wenn der Besucher zur gleichen Seite zurückkehrt. Dies stellt sicher, dass Clerk.js den Snippet nicht als zuvor gerendert betrachtet, was dazu führen könnte, dass er 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 automatisch Inhalte mit Ihren benutzerdefinierten Selektoren nach dem ersten Rendering initialisiert.

Auswirkungen auf die Seitenladegeschwindigkeit #

Die Hinzufügung eines externen Tools wie Clerk.js erhöht die Zeit, die benötigt wird, um Ihre Seite zu laden, aber sie ist vernachlässigbar im Vergleich zu den zusätzlichen Konversionen, die sie bereitstellt. Unten sehen Sie, wie es die Leistung Ihrer Seite beeinflusst.

Leistung #

Die Clerk.js-Bibliothek hat nur eine Größe von 37,5 KB, sodass sie sehr schnell lädt. Außerdem lädt sie Elemente asynchron, was bedeutet, dass der Rest der Seite geladen wird, während Clerk.js Inhalte rendert.

Eine Erhöhung der Ladezeit einer Seite resultiert häufig aus dem Laden von mehr Bildern als zuvor, da Clerks Suchergebnisse und Empfehlungen am besten funktionieren, wenn sie visuell ansprechend sind.

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 Empfehlungen beispielsweise eine Auflösung von 400x400px im Desktop-View haben, senden Sie Bilder mit einer maximalen Auflösung von 420x420px oder ähnlich.

Google Page Speed #

Wenn Sie Google Page Speed Insights oder ein ähnliches Tool verwenden, um die Leistung Ihrer Seite zu analysieren, sehen Sie möglicherweise Clerk.js unter Browser-Caching nutzen.

Zweck von Clerk.js ist es, es super einfach zu machen, Ergebnisse von Clerk.io in jede Website einzufügen. Clerk.js enthält viele Funktionen, um Tracking und UI-Komponenten wie Instant Search, Slider, Popups und mehr zu verwalten.

Wenn wir neue UI-Funktionen hinzufügen oder bestehende verbessern, werden sie in Clerk.js eingeschlossen und müssen vom Endbenutzer heruntergeladen werden, um sie zu verwenden.

Eine Cache-Ablaufzeit von 60 Minuten bedeutet, dass, wenn wir neue Funktionen veröffentlichen, sie innerhalb von maximal 60 Minuten für alle verfügbar sind. Je länger die Cache-Zeit, desto länger dauert es, bis jeder Zugriff auf die neuesten Funktionen hat.

Das Wichtige ist, dass Endbenutzer Clerk.js nur einmal herunterladen müssen, wenn neue Funktionen verfügbar sind.

Die 60-minütige Cache-Ablaufzeit bedeutet lediglich, dass der Browser des Endbenutzers alle 60 Minuten bei Clerk.io nachschaut. Wenn keine Änderungen an Clerk.js vorgenommen wurden, wird nichts heruntergeladen.

Die Cache-Ablaufzeit von 60 Minuten ist somit ein Kompromiss zwischen der Minimierung von Webanfragen und dem Bereitstellen neuer Funktionen und Verbesserungen. Die meisten Sitzungen sind kürzer als 60 Minuten, sodass die Anfrage nur einmal pro Sitzung gestellt wird.

Wie Sie im Screenshot sehen können, ist dies eine normale Praxis, die (neben Clerk.io) auch von Google Analytics, Facebook, Trustpilot und vielen anderen verwendet wird.

CLS-Auswirkungen #

Cumulative Layout Shift (CLS) kann sich negativ auf SEO und Benutzererfahrung auswirken, wenn dynamisch eingefügter Inhalt Elemente auf einer Seite verschiebt. In einigen Fällen kann Clerk zu dem CLS-Wert beitragen, unter anderem aus anderen Gründen. Sie können mehr über CLS hier lesen.

Befolgen Sie diese Richtlinie nur, wenn Ihr CLS-Wert höher als 0,2 ist und Clerk-Elemente im sichtbaren Bereich sind.

Um zu verhindern, dass Inhalte verschoben werden, ist es notwendig, einen Platzhalter für Clerk-Empfehlungen zu reservieren, bevor Clerk.js sie einfügt. Dazu müssen wir eine Mindesthöhe basierend auf der erwarteten Inhaltshöhe hinzufügen.

Beispiel für Code:

.clerk-slider-wrapper {
    min-height: 300px; /* Anpassen basierend auf der erwarteten Inhaltshöhe */
    width: 100%;
}

API-Aufrufe tätigen #

Sie können Clerk.js verwenden, um API-Aufrufe zu tätigen, indem Sie die integrierte Funktion Clerk("call") verwenden.

Diese Funktion benötigt 3 Argumente:

• Einen API-Endpunkt
• Ein JSON-Wörterbuch von Parametern
• Eine Callback-Funktion zur Verarbeitung der Antwort

Anfragen #

Unten finden Sie 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]
  }
);

Callbacks #

Wenn Sie API-Aufrufe tätigen, können Sie Callback-Funktionen verwenden, um die Antwort nach Belieben zu verarbeiten. Die Funktionen nehmen response als Argument, das alle vom API zurückgegebenen Daten enthält.

Unten finden Sie ein Beispiel, das eine Liste von HTML-Elementen erstellt, die auf Kategorien verlinken, die mit der Abfrage “Männer” übereinstimmen.

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 = 'Verwandte Kategorien';
          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);
      }
  }
)

Warenkorb-Buttons #

Diese Buttons funktionieren je nach Plattform unterschiedlich, und die Funktionalität kann sich je nach verwendeten Plugins ändern. Da Clerks Designs aus HTML & CSS bestehen, können Sie diese Funktionalität normalerweise hinzufügen, wenn Sie verstehen, wie sie auf Ihrer Seite funktioniert.

Allgemeiner Ansatz #

Einige Warenkorb-Buttons erfordern, dass JavaScript ausgeführt wird, damit sie funktionieren. In diesen Fällen können Sie die Funktionalität zur bestehenden cart-Methode von Clerk hinzufügen. Überprüfen Sie, wie Sie dies in unseren Entwicklerdokumenten hier tun können.

Untersuchen Sie den Warenkorb-Button, um den damit verbundenen Code zu identifizieren, z. B. auf einer Kategorieseite. Der Code ist normalerweise ein <div> oder ein button-Element. Kopieren Sie den gesamten Button-HTML.

Kopieren und fügen Sie diesen Code in Ihr Design ein. Jetzt müssen Sie die Variablen im Code identifizieren. Am häufigsten 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 }} sein, und die Menge wird je nach Art und Weise, wie Sie die Daten senden, variieren. In diesem Beispiel könnte es {{ product.qty }} sein.

Fügen Sie Ihren Code in das HTML Ihres Designs ein und testen Sie, um sicherzustellen, dass es funktioniert.

Beispiel #

Der Warenkorb-Button unten ist ein <div>, das die Klasse button-container hat:

Die Menge befindet sich im Warenkorb-Link 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 in Liquid-Tags im Design ersetzt werden, damit die entsprechenden Produkt-IDs und Mengen im HTML-Ausgabe verwendet werden.

Mit diesen Änderungen sieht der endgültige Warenkorb-Button wie folgt 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 }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="In den Warenkorb" 
    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>

Häufige Konsolenfehler #

Clerk.js protokolliert viele Fehler in der Konsole, die Sie zur Fehlersuche verwenden können.

Durch Klicken auf den Fehlerlink erhalten Sie weitere Informationen darüber, was schiefgelaufen ist, die Sie zur Fehlersuche des Fehlers selbst verwenden oder an unser Support-Team senden können, das Ihnen helfen wird. Unten finden Sie eine Liste der häufigsten Fehler.

LogicalError: Unbekannter Inhalt #

Dieser Fehler wird angezeigt, wenn der Snippet, den Sie eingefügt haben, auf einen Inhalt verweist, der nicht existiert, im data-template-Attribut.

Um dies zu beheben, stellen Sie sicher, dass der Name im Embed-Code mit einem Inhaltsblock übereinstimmt, den Sie in my.clerk.io erstellt haben.

Sie können auf Inhalt bearbeiten für jeden Inhalt klicken, um zu sehen, was die Referenz sein sollte.

AuthenticationError: Ungültiger API-Endpunkt #

Dieser Fehler tritt auf, wenn Sie die Klasse clerk irgendwo in Ihrem HTML 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 die Klasse anders benennen, z. B. clerk-product.

ParsingError: Ungültiger Typ des Argumentprodukts #

Dieser Fehler bedeutet, dass die bereitgestellte ID für ein Produkt einen falschen Typ oder eine falsche Syntax hat.

Wenn Ihre Produkt-IDs beispielsweise Ganzzahlen sind, müssen sie dies auch im Embed-Code sein. Denken Sie auch an die Klammern um die ID, um sie zu einer Liste zu machen.

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

ParsingError: Ungültiger Typ des Argumentkategorie #

Dieser Fehler bedeutet, dass die bereitgestellte ID für eine Kategorie einen falschen Typ oder eine falsche Syntax hat.

In den meisten Fällen geschieht dies, 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 die ID der Kategorie enthalten:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Wenn Sie den Snippet manuell kopiert haben, stellen Sie sicher, dass Sie Ihr Shopsystem im Wählen Sie Ihre Plattform-Dropdown auswählen, bevor Sie den Snippet kopieren. Es wird dann geändert, um die Logik Ihrer Plattform einzuschließen, um die richtige Kategorie-ID auszuwählen.

Wenn Ihre Plattform nicht aufgeführt ist, müssen Sie manuell die Logik hinzufügen, um die richtige Kategorie-ID basierend auf der Funktionalität Ihres Webshops auszuwählen.

AuthenticationError: Falscher öffentlicher API-Schlüssel #

Dieser Fehler wird angezeigt, wenn der öffentliche API-Schlüssel, den Sie bereitgestellt haben, mit keinem Konto in Clerk.io übereinstimmt.

Um dies zu beheben, melden Sie sich bei my.clerk.io an und gehen Sie zu Einstellungen > API-Schlüssel. Hier finden Sie den öffentlichen API-Schlüssel, den Sie dann entweder direkt im Code oder in den Einstellungen für Ihre Integration, je nach Plattform, zu Ihrem Clerk.js-Tracking-Skript hinzufügen können.

Verkaufsdaten von einem POS/ERP-System senden #

Für einige Webshops ist es relevant, Verkaufsdaten von anderen Systemen als dem tatsächlichen Webshop hochzuladen, z. B. wenn Sie den Algorithmus basierend auf Verkäufen aus einem physikalischen Geschäft oder B2B-Geschäft optimieren möchten.

Clerk.io unterscheidet nicht zwischen Bestellungen aus verschiedenen Quellen – solange Sie eine ID, einen Zeitstempel und eine Liste von Produkten, die gekauft wurden, bereitstellen können, können diese an Clerk.io hochgeladen werden.

Der empfohlene Ansatz ist die Verwendung der CRUD-API, da dies Ihnen ermöglicht, die Aufgabe vollständig zu automatisieren. Durch die Implementierung dieser API-Aufrufe können Sie Bestelldaten direkt an Ihren Store in Clerk.io senden.

Erstellen Sie einfach einen POST-Aufruf an den /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 verwenden, um Ihre Online-Empfehlungen und Suchergebnisse zu verbessern.

Alternativ können Sie eine CSV-Datei manuell hochladen, ohne dass Sie etwas codieren müssen. Sie können mehr über CSV-Dateien hier lesen.

Währungsumrechnung #

Es gibt mehrere Möglichkeiten, mit Währungsumrechnungen in Clerk.io zu arbeiten. Eine einfache Möglichkeit, dies zum Laufen zu bringen, wird unten skizziert.

Preisobjekte senden #

Clerk muss die Preise jedes Produkts in den verschiedenen Währungen kennen. Der einfachste Weg, dies zu tun, besteht darin, sie als string-kodiertes JSON-Objekt von formatierten Preisen zu senden, wobei die Währungs-ISO als Schlüssel verwendet wird, in Ihrem Datenfeed.

"products": [
  {
    "id": 1,
    "name": "Käse",
    "description": "Ein schönes Stück Käse.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "prices_formatted": "{'USD':'$100', 'EUR':'€ 87.70', 'GBP':'£ 68.68'}"
  },
  {
    "id": 2,
    "name": "Ein Pfund Nüsse",
    "description": "Das sind viele Nüsse!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "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 von Ihnen gewählten Frontend-Logik.

Stellen Sie sicher, dass Sie currency durch die derzeit gewählte 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];
      }
  }
});

Formatter verwenden #

Nachdem der Formatter definiert wurde, kann er in Ihrem Design mit der folgenden Syntax verwendet werden:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Kundenspezifische Preise #

Um vollständig einzigartige Preise basierend darauf anzuzeigen, welcher Kunde angemeldet ist, erstellen Sie ein Ereignis in Clerk.io, das den richtigen Preis einfügt, bevor die Produkte gerendert werden.

Ereignisse sind JavaScript-Funktionen, die vor oder nach Clerk.io Produkte anzeigt, ausgeführt werden.

Diese Methode 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 abrufen können.

Um individuelle Kundenpreise anzuzeigen, sollte der Code sofort nach der Antwort ausgeführt werden.

Unten finden Sie ein Beispiel für ein einfaches Ereignis.

<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.io vom API zurücksendet.

Beispiel für individuelle Kundenpreise #

Wenn Sie vollständig einzigartige Preise basierend darauf anzeigen müssen, welcher Kunde angemeldet ist, müssen Sie ein Ereignis einrichten, das den richtigen Preis einfügt, nachdem die Produkte gerendert wurden.

Ereignisse sind JavaScript-Funktionen, die vor oder nach Clerk.io Produkte anzeigt, ausgeführt werden.

Dieser Ansatz setzt voraus, dass Sie Preise von Ihrem Server mit einem AJAX-Aufruf im Frontend basierend auf einer Produkt-ID und einer Kunden-ID abrufen können.

Der beste Weg ist, zuerst einen Platzhalter für den Preiscontainer in Ihrem Design zu erstellen und ihn dann mit dem Preis zu ersetzen, der von Ihrem AJAX-Aufruf zurückgegeben wird.

Ein Beispiel:

<div class="clerk-price-container">
   <span class="clerk-price">
      Preis wird geladen...
   </span>
</div>

Sie können dann das Clerk-Ereignis verwenden, um zu warten, bis die Produkte gerendert sind, eine Anfrage an Ihren Preisserver mit der Produkt-ID und der ID des Kunden zu stellen, bevor Sie es im HTML ersetzen.

Hier ist ein Beispiel, wie Sie dies tun können:

<script>
  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;
      }
  })
  </script>

Der obige Code geht davon aus, dass Sie einen angemeldeten Kunden mit INSERT_CUSTOMER_ID identifizieren können und dass Sie eine Funktion wie FETCH_PRICE_FROM_SERVER haben, die den Preis für das Produkt basierend auf dem Kunden zurückgibt.

price_container wird verwendet, um das richtige Produkt basierend auf der ID zu zielen, die in data-clerk-product-id verfügbar ist, was allen Produkten von Clerk.js hinzugefügt wird.

Schließlich ersetzt es den inneren Text “Preis wird geladen…” in diesem Beispiel durch den Preis, der von Ihrem AJAX-Aufruf zurückgegeben wird.

Preise für Kundengruppen #

Die Einrichtung von Preisen für Kundengruppen besteht aus 4 Schritten:

1. Fügen Sie die verschiedenen Preise in den Datenfeed ein
2. Fügen Sie eine Variable hinzu, die die aktuelle Kundengruppen-ID abruft
3. Erstellen Sie eine Funktion, um den relevanten Preis abzurufen
4. Zeigen Sie den Preis im Design an

Preisobjekte einfügen #

Beginnen Sie damit, ein Attribut zu allen Produkten hinzuzufügen, das alle verschiedenen Preisoptionen enthält, und stellen Sie sicher, dass jeder Preis mit einer bestimmten Kundengruppe korreliert ist.

Dies sollte als string-kodiertes JSON-Objekt gesendet werden. Zum Beispiel:

"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"

Kunden-ID-Variable #

Fügen Sie eine dynamische globale Variable zu Clerk.js hinzu, die die Kundengruppen-ID des aktuellen Kunden abruft und sie als Wert hinzufügt.

Der Wert der Kundengruppen-ID muss dem Schlüssel des entsprechenden Preises im Datenfeed entsprechen. Wenn ein Benutzer den Preis für Gruppe 2 sehen soll, sollte die ID “GROUP2” sein.

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

Preis abrufen #

Sie können jetzt 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 spezifischen Kundengruppe als Schlüssel im Preis-Dict basierend auf der customer_group-ID abruft.

Fügen Sie dies in die Clerk.js-Konfiguration ein. 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 final_price-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 sre="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product | getPrice }}
	</div>
</li>

HTTP-Authentifizierungssynchronisierung #

Oft wird die HTTP-Authentifizierung auf Staging-Seiten verwendet, um unerwünschte Besucher zu vermeiden.

Dies blockiert in vielen Fällen auch den Clerk-Importer und zeigt typischerweise einen 401 Unauthorized-Fehler im Synchronisierungsprotokoll an.

Sie können den Importer leicht überprüfen, indem Sie die Authentifizierungsinformationen in die Import-URL wie unten einfügen, in der Datensynchronisierung bei my.clerk.io:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Keine verfolgten Bestellungen #

Clerk.io muss kontinuierlich Verkäufe aus dem Webshop verfolgen, um die Ergebnisse mit dem Verhalten Ihrer Kunden aktuell zu halten. Einige Einstellungen in einem Webshop können jedoch dazu führen, dass das Verkaufs-Tracking fehlschlägt.

Unten können Sie herausfinden, wie Sie das Verkaufs-Tracking debuggen können, wenn Sie ein Clerk.js-Setup verwenden, und sehen, was 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 Verkaufs-Tracking-Skript auf Ihrer Bestellbestätigungsseite.

Diese sind erforderlich, um Verkäufe im Allgemeinen zu verfolgen, wenn Sie ein Clerk.js-Setup verwenden.

Protokolle überprüfen #

In den meisten Fällen schlägt das Verkaufs-Tracking aufgrund von Fehlern in den Besucher-IDs oder Produkt-IDs des Verkaufsaufrufs fehl, der an Clerk gesendet wird, nachdem ein Kauf abgeschlossen wurde. Um dies zu debuggen, müssen Sie eine Testbestellung durchführen.

In einigen Fällen kann es jedoch auch mit dem Verkaufs-Tracking-Skript selbst zusammenhängen und kann durch Überprüfung der Protokolle in my.clerk.io > Daten > Protokolle.

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 keine Fehler in den Protokollen sehen können, ist der einfachste Weg, andere Probleme mit dem Verkaufs-Tracking zu identifizieren, eine Testbestellung aufzugeben.

Testbestell-Debugging #

In diesem Beispiel verwenden wir Chrome, um zu zeigen, wie man das Verkaufs-Tracking mit einer Testbestellung debuggt, aber andere Browser haben ähnliche Funktionen.

1. Legen Sie auf Ihrem Webshop ein paar Produkte in den Warenkorb.
2. Gehen Sie zur Kasse.
3. Öffnen Sie vor der Bestellung die Konsole Ihres Browsers.
4. Finden Sie Netzwerk und suchen Sie nach " clerk".
5. Platzieren Sie die Bestellung, sodass Sie die Bestellbestätigungsseite sehen.
6. Klicken Sie auf den Aufruf, der mit sale beginnt (normalerweise sale?key=…).

Hier sehen Sie die Daten, die an den Verkaufs-Tracking-API-Endpunkt gesendet und empfangen werden. Klicken Sie auf Vorschau, um Fehler zu identifizieren, die dazu führen können, dass Verkäufe nicht verfolgt werden.

Unten sind häufige Fehler im Zusammenhang mit dem Verkaufs-Tracking aufgeführt.

Ungültige Syntax im Argument: Produkte #

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, aber Sie verwenden Ganzzahlen in Clerk.io oder umgekehrt.
• Die Liste der Produkt-IDs enthält Textformatierungs-Zeichen anstelle von reinem JSON: "products":\[\\"id"\\:\\"123-m"\\\].

Fehlendes Argument X #

Das bedeutet, dass Sie nicht alle Daten senden, die Clerk.io benötigt, um den Verkauf zu verfolgen.

Stellen Sie sicher, dass Sie alle notwendigen Datenattribute im Verkaufs-Tracking einfügen.

Kein Aufruf gemacht #

Wenn Sie den Aufruf zu sale nicht sehen können, selbst wenn beide Skripte installiert sind, dann hat etwas dazu geführt, dass das Clerk.js-Skript nicht korrekt geladen wurde. Testen Sie dies, indem Sie die folgenden Schritte ausführen:

1. Öffnen Sie die Konsole in Ihrem Browser
2. Geben Sie “Clerk” ein.
3. Wenn Clerk.js nicht korrekt geladen wurde, sehen Sie einen ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Wenn dies der Fall ist, müssen Sie Ihr Clerk.js-Setup überprüfen:

• Stellen Sie sicher, dass Clerk.js auf allen Seiten installiert ist.
• Stellen Sie sicher, dass es nicht durch andere JavaScript-Funktionalitäten blockiert wird.

Kein Clerk-Einfluss #

Wenn Sie Verkäufe erfolgreich in my.clerk.io verfolgen, aber keine von ihnen als von Clerk.io beeinflusst angezeigt werden, haben Sie möglicherweise einen Fehler in Ihrem Besucher-Tracking / Klick-Tracking-Setup.

Beginnen Sie damit, sicherzustellen, dass das Besucher-Tracking funktioniert, indem Sie Folgendes tun:

1. Klicken Sie auf ein beliebiges Produkt über Clerks Suche oder Empfehlungen
2. Gehen Sie zur Bestellung eines Produkts, das Sie hinzugefügt haben
3. Melden Sie sich bei my.clerk.io an und gehen Sie zu Bestelldetails
4. Warten Sie, bis die Bestellung angezeigt wird.

Wenn das Besucher-Tracking funktioniert, sehen Sie den Wert und den Einfluss des Produkts, das Sie über Clerk.io hinzugefügt haben, in Verfolgten Bestellungen:

Wenn Sie keinen Wert in der Bestellung sehen, die Sie aufgegeben haben, zeigen die folgenden Abschnitte häufige Fehler, die dies verursachen könnten.

API-Setups #

Wenn Sie Clerk.io mit einer benutzerdefinierten Integration direkt über die API eingerichtet haben, müssen Sie das Besucher-Tracking aktiv aktivieren. Lesen Sie, wie Sie dies in diesem API-Artikel tun.

Falsche Produkt-IDs #

Damit das Besucher-Tracking funktioniert, müssen das Klick- und Verkaufs-Tracking die gleichen Produkt-IDs verfolgen wie die, die wir im Importeur erhalten. Wenn dies nicht funktioniert, liegt es normalerweise daran, dass Sie Variant-IDs anstelle von Eltern-IDs oder die SKU anstelle der ID verfolgen.

Um zu überprüfen, ob dies das Problem ist, führen Sie die folgenden Schritte aus:

1. Gehen Sie in my.clerk.io zu Daten > Bestellungen und klicken Sie auf die ID einer Bestellung, die Sie aufgegeben haben.
2. Wenn Clerk.io das Produkt nicht identifizieren kann, sehen Sie einen ID- und Bild-Platzhalter:
3. Gehen Sie zu Daten > Produkte und suchen Sie nach dem Namen des Produkts, das Sie hinzugefügt haben. Hier können Sie die erwartete ID für das Produkt sehen.

Verwenden Sie dies, um Ihr Verkaufs-Tracking so zu konfigurieren, dass die richtigen Produkt-IDs verwendet werden.

Änderungen der Besucher-ID #

Clerk.io verwendet eine Besucher-ID, um jede einzelne Sitzung zu identifizieren, einschließlich der Produkte, auf die geklickt und die gekauft werden. Daher sollten die IDs während der gesamten Sitzung gleich bleiben und idealerweise auch über mehrere Sitzungen hinweg.

Diese Besucher-ID wird automatisch erstellt, wenn Sie Clerk.js verwenden, um das Setup durchzuführen. Wenn Sie jedoch 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 die folgenden Schritte ausführen:

1. Öffnen Sie Ihre Netzwerk-Einstellungen im Browser und schränken Sie die Ergebnisse auf “clerk” ein.
2. Überprüfen Sie zunächst alle undefined-Aufrufe, die mit der Suche oder Empfehlungen zusammenhängen.
3. In payload können Sie die aktuelle Besucher-ID überprüfen. Sie können dies für alle Aufrufe, die mit Clerk.io verbunden sind, tun.
4. Klicken Sie dann auf das Produkt und geben Sie eine Bestellung mit diesem Produkt auf.
5. Überprüfen Sie auf der Bestellbestätigungsseite erneut Ihr Netzwerk und finden Sie den Aufruf zu sale?.
6. Stellen Sie sicher, dass visitor im payload mit der Besucher-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 der Besucher-IDs könnte sein, dass Sie die IDs für jede neue Seite, die geladen wird, 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 viel flexiblere Version unserer JavaScript-Bibliothek, die die Installation von Clerk.io auf jedem Webshop zum Kinderspiel macht.

Da die beiden Versionen jedoch etwas unterschiedlich funktionieren, müssen Sie die folgenden Schritte befolgen, um erfolgreich zu upgraden.

Die beiden Hauptunterschiede in Clerk.js 2 sind:

• Die Designs in my.clerk.io verwenden die Liquid, können jedoch auch einfach mit dem Design-Editor erstellt werden.

• Das Skript muss direkt vor dem -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 neu im Design-Editor erstellen oder Ihren alten Code-Designs in Liquid umwandeln, was die folgende Anleitung erklärt, wie man das macht. Unten finden Sie eine Beschreibung, wie Sie Ihre alten Code-Designs in Liquid umwandeln.

Option 1: Design Editor Designs #

1. Gehe zu my.clerk.io > Empfehlungen/Suche > Designs > Neues Design.
2. Wähle einen Designtyp aus, der nicht Blank ist, und gib ihm einen Namen. Wir empfehlen, “V2” hinzuzufügen, damit offensichtlich ist, dass du Clerk.js 2 Designs dafür verwendest.
3. Klicke im Design-Editor auf eines der vorhandenen Elemente wie den Namen, das Bild, den Button usw., um es zu bearbeiten, oder füge neue Elemente zum Design hinzu.
4. Klicke auf Design veröffentlichen, wenn du fertig bist, und gehe zu Schritt 2 im Handbuch.
5. Gehe zuletzt zu Empfehlungen/Suche > Inhalt und ändere deinen Clerk.io Inhalt, um dein neues Design zu verwenden, und klicke dann auf Inhalt aktualisieren.
6. Dies wird vorübergehend dazu führen, dass sie nicht in deinem Webshop angezeigt werden, bis du Clerk.js 2 wie weiter unten in diesem Handbuch beschrieben eingefügt hast.

Option 2: Designs konvertieren #

Da Clerk.js 2 die flexiblere Template-Sprache Liquid verwendet, musst du die Designs in diese Sprache konvertieren.

1. Beginne, indem du zu my.clerk.io >Empfehlungen/Suche > Designs > Neues Design. gehst.
2. Wähle Blank > Code und gib ihm einen Namen. Wir empfehlen, “V2” hinzuzufügen, damit offensichtlich ist, dass du Clerk.js 2 Designs dafür verwendest.
3. Klicke auf Design erstellen.
4. Dies gibt dir ein leeres Design mit Produkt-HTML und CSS, das du verwenden kannst.
5. Gehe zurück zur Designübersicht und klicke auf Design bearbeiten für dein Clerk.js 1 Design. Wir empfehlen, dies in einem neuen Tab zu tun, damit du den Code leicht kopieren kannst.
6. Jetzt musst du das alte Clerk.js 1 Design in dein neues Clerk.js 2 Design kopieren.
   • Du wirst feststellen, dass es keinen Container-Code in deinem neuen gibt.
   • Das liegt daran, dass Liquid for-Schleifen verwendet, um alle Produkte darzustellen.
   • Kopiere dein altes Produkt-HTML innerhalb der for-Schleife, deinen alten Container-Code darum herum und kopiere auch das CSS.
7. Konvertiere 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.
8. Gehe alle deine Attribute durch und ändere sie in das neue Format.
9. Wenn du {{#if}} oder {{#is}}-Anweisungen verwendest, müssen diese ebenfalls konvertiert werden. Verwende die Syntax {% if product.attribute %} {% else %} {% endif %}.
10. Lösche id="{{ $id }}" und die Klasse :target aus dem Container-Code in der Clerk.js 2-Version, da sie nicht mehr unterstützt werden.
11. Unten ist ein Beispiel für ein Clerk.js 1 Design und die vollständig konvertierte Version:

Clerk.js 1 Design #

// Produkt-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>Preis {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Preis {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Preis {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Jetzt kaufen</div>
</li>

// Container-Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- Dieser Code erstellt den Slider anhand seiner 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>Preis {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Preis {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Preis {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Jetzt kaufen</div>
        </a>
    </li>
    {% endfor %}
</ul>

13. Klicke jetzt auf Design aktualisieren, um die Änderungen zu speichern.
14. Gehe zuletzt zu Empfehlungen/Suche > Inhalt und ändere deinen Inhaltsblock, um dein neues Design zu verwenden.
15. Klicke auf Inhalt aktualisieren. Dies wird vorübergehend dazu führen, dass sie nicht in deinem Webshop angezeigt werden, bis du mit Schritt 2 fertig bist. Wähle das neue Design für alle Inhalte, die aktualisiert werden sollen.

Ersetze das Skript #

1. Beginne damit, die Template-Datei zu finden, die verwendet wird, um alle Seiten des Webshops anzuzeigen, und wo das ursprüngliche Clerk.js-Skript nahe dem Ende zu finden ist.
2. Entferne das alte Clerk.js-Skript aus der Datei. Es wird ungefähr so aussehen:

<!-- Beginn des Clerk.io E-Commerce Personalisierungstools - 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>
<!-- Ende des Clerk.io E-Commerce Personalisierungstools - www.clerk.io -->

3. Gehe zu my.clerk.io > Einstellungen > Tracking-Code. Dies enthält den Clerk.js 2-Code.
4. Kopiere diesen Code, füge ihn direkt vor dem </head>-Tag in die Vorlage ein und speichere ihn.

Herzlichen Glückwunsch! Du verwendest jetzt das verbesserte Clerk.js 2-Setup! Du kannst die vollständige Dokumentation für Clerk.js 2 hier.

Umgang mit require.js #

Dieser Abschnitt gilt nur für die Verwendung von Clerk.js 1.

In einigen Setups verhindert Require.js, dass Clerk.js geladen wird, was bedeutet, dass keine Slider oder Suchergebnisse angezeigt werden. Wenn dies geschieht, wird der folgende Fehler in deiner Konsole angezeigt:

Uncaught ReferenceError: Clerk is not defined

Es gibt zwei Möglichkeiten, Require.js zu handhaben. Beide Ansätze erfordern, dass du Änderungen am Tracking-Skript vornimmst, das du am Ende aller Seiten eingefügt hast.

“clerk” in Require.js einfügen #

Der beste Ansatz ist, zu versuchen, Require.js dazu zu bringen, Clerk.io zu erkennen.

Du kannst dies tun, indem du require(\['clerk'\], function() {}); am Ende des Tracking-Skripts einfügst:

Require.js ignorieren #

Wenn die obige Lösung nicht funktioniert, ist es möglich, Require.js zu ignorieren.

Du kannst dies tun, indem du window.__clerk_ignore_requirejs = true; am Anfang des Tracking-Skripts einfügst:

Nachdem du einen dieser Ansätze verwendet hast, wird Require.js jetzt mit Clerk.io kompatibel sein.