Häufig gestellte Fragen

Einseitige 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 einseitige Apps, die Frameworks wie vue.js oder next.js verwenden, werden die Seiten jedoch mit JavaScript anstelle eines standardmäßigen Seitenladens gerendert. Daher müssen Sie das Rendering mit Clerk.js steuern, um zu entsprechen, 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:

<!-- Beginn 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 der Mutation des DOM eingefügt wurden. 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 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 soll sicherstellen, 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 Inhalte automatisch initialisiert mit Ihren benutzerdefinierten Selektoren, nachdem Sie es zum ersten Mal gerendert haben.

Auswirkungen auf die Seitenladegeschwindigkeit #

Das Hinzufügen eines externen Tools wie Clerk.js wird die Zeit erhöhen, die benötigt wird, um Ihre Seite zu laden, aber es ist vernachlässigbar im Vergleich zu den zusätzlichen Konversionen, die es bieten wird. Unten können Sie sehen, wie es die Leistung Ihrer Seite beeinflusst.

Leistung #

Die Clerk.js-Bibliothek ist nur 37,5 kb groß, sodass sie sehr schnell lädt. 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 resultiert meist 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 die Verwendung von Bildern im webp-Format, die eine Auflösung haben, die der Größe entspricht, die sie in den Clerk-Elementen haben.

Wenn Bilder in Empfehlungen 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.

Der 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 Verbesserungen an bestehenden vornehmen, sind sie in Clerk.js enthalten 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 alle Zugriff auf die neuesten Funktionen haben.

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 die Benutzererfahrung auswirken, wenn dynamisch eingefügter Inhalt Elemente auf einer Seite verschiebt. In einigen Fällen kann Clerk, neben anderen Faktoren, zum CLS-Score beitragen. Sie können mehr über CLS hier lesen.

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

Um zu verhindern, dass sich Inhalte verschieben, 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 Inhaltsgröße hinzufügen.

Beispielcode:

.clerk-slider-wrapper {
    min-height: 300px; /* Anpassen basierend auf der erwarteten Inhaltsgröße */
    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 Ihren Wünschen 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 der Abfrage “Männer” 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 = '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 je nach verwendeten Plugins variieren. 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 zugehörigen Code zu identifizieren, z. B. auf einer Kategorieseite. Der Code wird normalerweise ein <div> oder ein button-Element sein. Kopieren Sie den gesamten Button-HTML.

Kopieren Sie diesen Code in Ihr Design. 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, unterschiedlich sein. In diesem 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 Warenkorb-Button unten ist ein <div>, der 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 wird der endgültige Warenkorb-Button so aussehen:

<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 oder zur Weiterleitung an unser Support-Team verwenden 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 Embedcode 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 der Verweis sein sollte.

AuthenticationError: 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 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 Ganzzahlen sind, müssen sie dies auch im Embedcode 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 tritt dies auf, wenn der Platzhalter im Kategorie-Embedcode nicht durch eine tatsächliche ID ersetzt wurde:

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

Der Codeausgabe 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 zum Auswählen der richtigen Kategorie-ID einzuschließen.

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.

AuthenticationError: Falscher öffentlicher API-Schlüssel #

Dieser Fehler wird angezeigt, wenn der öffentliche API-Schlüssel, den Sie bereitgestellt haben, nicht mit einem 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 eigentlichen Webshop hochzuladen, z. B. wenn Sie den Algorithmus basierend auf Verkäufen aus einem physikalischen Geschäft oder B2B-Shop 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 sie an Clerk.io hochgeladen werden.

Der empfohlene Ansatz ist die Verwendung der CRUD-API, da dies die Aufgabe vollständig automatisieren kann. 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ährungsumrechnung in Clerk.io zu arbeiten. Eine einfache Möglichkeit, dies zum Laufen zu bringen, ist 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-encoded JSON-Objekt von formatierten Preisen zu senden, wobei die Währungs-ISO als Schlüssel in Ihrem Datenfeed dient.

"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",
    // String-encoded JSON-Beispiel
    "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",
    // String-encoded JSON-Beispiel
    "prices_formatted": '{"USD":"$150", "EUR":"€142", "GBP":"£120"}' 
  }
]

Formatter erstellen #

In Clerk.js können Sie JavaScript-Funktionen definieren, die in 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 basierend auf der von Ihnen gewählten Frontend-Logik zurückgibt.

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 anzuzeigen, die davon abhängen, 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 direkt 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 enthält, die Clerk.io vom API zurücksendet.

Individuelle Kundenpreise #

Wenn Sie vollständig einzigartige Preise anzeigen müssen, die davon abhängen, 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 z. B. einer Produkt-ID und einer Kunden-ID abrufen können.

Der beste Weg ist, zuerst einen Platzhalter-Preiskontainer 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 unter Verwendung der Produkt-ID und der ID des Kunden zu stellen, bevor Sie ihn 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 anzusprechen, die in data-clerk-product-id verfügbar ist, die allen Produkten von Clerk.js angehängt wird.

Schließlich ersetzt es den inneren Text “Preis wird geladen…”, in diesem Beispiel, mit dem 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 sicherstellt, dass jeder Preis einer bestimmten Kundengruppe zugeordnet ist.

Dies sollte als string-encoded 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 als Wert hinzufügt.

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

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 Testseiten 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 einfach ü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 aktuell mit dem Verhalten Ihrer Kunden zu halten. Einige Einstellungen in einem Webshop können jedoch dazu führen, dass die Verkaufsverfolgung fehlschlägt.

Unten finden Sie heraus, wie Sie die Verkaufsverfolgung 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 Verkaufsverfolgungsskript 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 die Verkaufsverfolgung 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 aufgeben.

In einigen Fällen kann es jedoch auch an dem Verkaufsverfolgungsskript selbst liegen, und Sie können dies debuggen, indem Sie die Protokolle in my.clerk.io > Data > Logs.

Wenn die Verkaufsverfolgung aufgrund eines Fehlers in Ihrem Skript fehlschlägt, können Sie den Fehler häufig 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 der Verkaufsverfolgung zu identifizieren, eine Testbestellung aufzugeben.

Testbestellungs-Debugging #

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

1. Legen Sie in Ihrem Webshop ein paar Produkte in den Warenkorb.
2. Gehen Sie zur Kasse.
3. Bevor Sie die Bestellung aufgeben, öffnen Sie die Konsole Ihres Browsers.
4. Finden Sie Netzwerk und suchen Sie nach " clerk".
5. Geben Sie die Bestellung auf, 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 Verkaufsverfolgungs-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 der Verkaufsverfolgung 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 Verkaufsverfolgung string-encoded, 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 erforderlichen Datenattribute in der Verkaufsverfolgung 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, die dieses Produkt enthält
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 hinzugefügt 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.

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 Parent-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 Data > Orders 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 Data > Products 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, die sie klicken und kaufen. Daher sollten die IDs während der gesamten Sitzung gleich bleiben und vorzugsweise auch über mehrere Sitzungen hinweg.

Diese Besucher-ID wird automatisch erstellt, wenn Sie Clerk.js verwenden, um das Setup durchzuführen, 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 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 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 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 sich ändernde Besucher-IDs könnte sein, dass Sie die IDs für jede neue Seite, die geladen wird, neu generieren. Aktualisieren Sie Ihren Code, um die gleiche 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 leicht 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 im Design-Editor neu erstellen oder Ihren alten Code-Designs in Liquid umwandeln, was die folgende Anleitung erklärt.

Unten finden Sie eine Beschreibung, wie Sie Ihre alten Code-Designs in Liquid konvertieren können.

Option 1: Design-Editor-Designs #

1. Gehen Sie zu my.clerk.io > Empfehlungen/Suche > Designs > Neues Design.
2. Wählen Sie einen Design-Typ aus, der nicht Leer ist, und geben Sie ihm einen Namen. Wir empfehlen, “V2” hinzuzufügen, damit offensichtlich ist, dass Sie Clerk.js 2-Designs dafür verwenden.
3. Klicken Sie im Design-Editor auf eines der vorhandenen Elemente wie den Namen, das Bild, die Schaltfläche usw., um es zu bearbeiten, oder fügen Sie neue Elemente zum Design hinzu.
4. Klicken Sie auf Design veröffentlichen, wenn Sie fertig sind, und gehen Sie zu Schritt 2 im Leitfaden.
5. Gehen Sie schließlich zu Empfehlungen/Suche > Inhalt und ändern Sie Ihren Clerk.io-Inhalt, um Ihr neues Design zu verwenden, und klicken Sie dann auf Inhalt aktualisieren.
6. Dies wird vorübergehend dazu führen, dass sie in Ihrem Webshop nicht angezeigt werden, bis Sie Clerk.js 2 wie weiter unten in diesem Leitfaden beschrieben eingefügt haben.

Option 2: Designs konvertieren #

Da Clerk.js 2 die flexiblere Template-Sprache Liquid verwendet, müssen Sie die Designs in diese Sprache konvertieren.

1. Beginnen Sie, indem Sie zu my.clerk.io >Empfehlungen/Suche > Designs > Neues Design. gehen.
2. Wählen Sie Leer > Code und geben Sie ihm einen Namen. Wir empfehlen, “V2” hinzuzufügen, damit offensichtlich ist, dass Sie Clerk.js 2-Designs dafür verwenden.
3. Klicken Sie auf Design erstellen.
4. Dies gibt Ihnen ein leeres Design mit Produkt-HTML und CSS, das Sie verwenden können.
5. 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 leicht kopieren können.
6. Jetzt müssen Sie das alte Clerk.js 1-Design in Ihr neues Clerk.js 2-Design kopieren.
   • Sie werden feststellen, dass es keinen Container-Code in Ihrem neuen gibt.
   • Das liegt daran, dass Liquid for-Schleifen verwendet, um alle Produkte darzustellen.
   • Kopieren Sie Ihr altes Produkt-HTML innerhalb der for-Schleife, Ihren alten Container-Code darum herum und kopieren Sie auch das CSS.
7. 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.
8. Gehen Sie alle Ihre Attribute durch und ändern Sie sie auf das neue Format.
9. Wenn Sie {{#if}} oder {{#is}}-Anweisungen verwenden, müssen diese ebenfalls konvertiert werden. Verwenden Sie die Syntax {% if product.attribute %} {% else %} {% endif %}.
10. Löschen Sie 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 finden Sie 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. Klicken Sie jetzt auf Design aktualisieren, um die Änderungen zu speichern.
14. Gehen Sie schließlich zu Empfehlungen/Suche > Inhalt und ändern Sie Ihren Inhaltsblock, um Ihr neues Design zu verwenden.
15. Klicken Sie auf Inhalt aktualisieren. Dies wird vorübergehend dazu führen, dass sie in Ihrem Webshop nicht angezeigt werden, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle Inhalte aus, die aktualisiert werden sollen.

Ersetzen Sie das Skript #

1. Beginnen Sie, indem Sie die Template-Datei lokalisieren, die verwendet wird, um alle Seiten des Webshops anzuzeigen, und wo das ursprüngliche Clerk.js-Skript nahe dem Ende zu finden ist.
2. Entfernen Sie 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. Gehen Sie zu my.clerk.io > Einstellungen > Tracking-Code. Dies enthält den Clerk.js 2-Code.
4. Kopieren Sie diesen Code, fügen Sie ihn direkt vor dem </head>-Tag im Template ein und speichern Sie ihn.

Herzlichen Glückwunsch! Sie verwenden jetzt die verbesserte Clerk.js 2-Setup! Sie können 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 Ihrer Konsole angezeigt:

Uncaught ReferenceError: Clerk is not defined

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

“clerk” in Require.js einfügen #

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

Sie können dies tun, indem Sie require(\['clerk'\], function() {}); am Ende des Tracking-Skripts einfügen:

Require.js ignorieren #

Wenn die obige 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, wird Require.js jetzt mit Clerk.io kompatibel sein.