Jeder (Webshop)

Häufig gestellte Fragen

Antworten auf häufig gestellte Fragen zu benutzerdefinierten Integrationen

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 Seiten jedoch mit JavaScript anstelle eines standardmäßigen Seitenladens gerendert. Daher müssen Sie das Rendering mit Clerk.js steuern, um mit der Art und Weise übereinzustimmen, 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 steht die Bibliothek während der gesamten Sitzung zur Verfügung. 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 eindeutigen 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 ansieht, 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 ihn zum ersten Mal gerendert haben.

Auswirkungen auf die Seitenladegeschwindigkeit #

Das Hinzufügen eines externen Tools wie Clerk.js erhöht die Zeit, die benötigt wird, um Ihre Seite zu laden, aber es ist vernachlässigbar im Vergleich zu den zusätzlichen Konversionen, die es bereitstellen wird. Unten können Sie sehen, 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 geladen wird. 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 beispielsweise eine Auflösung von 400x400px in der Desktopansicht 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 Sofortsuche, Slider, Popups und mehr zu handhaben.

Wenn wir neue UI-Funktionen hinzufügen oder Verbesserungen an bestehenden vornehmen, werden sie in Clerk.js aufgenommen 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 einmal herunterladen müssen, wenn neue Funktionen verfügbar sind.

Die 60-minütige Cache-Ablaufzeit bedeutet nur, 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) von Google Analytics, Facebook, Trustpilot und vielen anderen verwendet wird.

CLS-Auswirkungen #

Cumulative Layout Shift (CLS) kann SEO und Benutzererfahrung negativ beeinflussen, 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 Faktoren. 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 den 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:["Startseite / Bestseller"]
    },
    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 mit der Abfrage “Männer” übereinstimmen.

Clerk("call",
  "search/categories",
  {
      'query': "Männer",
      '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 ist normalerweise ein <div> oder ein button-Element. Kopieren Sie den gesamten Button-HTML.

Fügen Sie diesen Code in Ihr Design ein. Jetzt müssen Sie die Variablen im Code identifizieren. Häufig 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 kann 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, ob 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 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 }}&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 können oder um sie an unser Support-Team zu senden, 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 die Referenz 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 angegebene 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 daran, die Klammern um die ID zu setzen, 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 angegebene 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>

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 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, 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 physischen 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 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, 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 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",
    "on_sale": true,
    // String-encoded JSON-Beispiele
    "prices_formatted": '{"USD":"$100", "EUR":"€87.70", "GBP":"£68.68"}',
    "list_prices_formatted": '{"USD":"$120", "EUR":"€97.70", "GBP":"£78.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",
    "on_sale": false,
    // String-encoded JSON-Beispiel
    "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 Preis-Dict als Argument nimmt und den Preis für eine bestimmte Währung basierend auf der Frontend-Logik Ihrer Wahl 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.

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 von der 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.

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 es, 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 zu zielen, die in data-clerk-product-id verfügbar ist, die von Clerk.js an alle Produkte angehängt 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:

Fügen Sie die verschiedenen Preise in den Datenfeed ein
Fügen Sie eine Variable hinzu, die die aktuelle Kundengruppen-ID abruft
Erstellen Sie eine Funktion, um den relevanten Preis abzurufen
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 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 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 von 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 finden Sie 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-Auth-Synchronisierung #

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 normalerweise 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 das Verkaufs-Tracking fehlschlägt.

Unten finden Sie heraus, 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 am Verkaufs-Tracking-Skript selbst liegen, und Sie können dies debuggen, indem Sie die Protokolle in my.clerk.io > Daten > Protokolle.

Wenn das Verkaufs-Tracking aufgrund eines Fehlers in Ihrem Skript fehlschlägt, können Sie den Fehler häufig auf dieser Seite sehen. Klicken Sie 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.

Testbestellung 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.

Legen Sie in Ihrem Webshop ein paar Produkte in den Warenkorb.
Gehen Sie zur Kasse.
Öffnen Sie, bevor Sie die Bestellung aufgeben, die Konsole Ihres Browsers.
Finden Sie Netzwerk und suchen Sie nach " clerk".
Geben Sie die Bestellung auf, 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 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 aufgeführt, die mit dem Verkaufs-Tracking verbunden sind.

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-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 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, hat etwas dazu geführt, dass das Clerk.js-Skript nicht korrekt geladen wurde. Testen Sie dies, indem Sie die folgenden Schritte ausführen:

Ö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

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 erfolgreich Verkäufe in my.clerk.io verfolgen, aber keine davon 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 Besucher-Tracking funktioniert, indem Sie Folgendes tun:

Klicken Sie auf ein Produkt über Clerks Suche oder Empfehlungen
Gehen Sie zur Bestellung, die dieses Produkt enthält
Melden Sie sich bei my.clerk.io an und gehen Sie zu Bestelldetails
Warten Sie, bis die Bestellung angezeigt wird.

Wenn 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 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. Üblicherweise funktioniert dies nicht, weil 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:

Gehen Sie in my.clerk.io zu Daten > Bestellungen und klicken Sie auf die ID einer Bestellung, die Sie aufgegeben haben.
Wenn Clerk.io das Produkt nicht identifizieren kann, sehen Sie einen ID- und Bild-Platzhalter:
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, die sie anklicken 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:

Öffnen Sie Ihre Netzwerk-Einstellungen im Browser und schränken Sie die Ergebnisse auf “clerk” ein.
Überprüfen Sie zunächst einen der undefined-Aufrufe, die mit der Suche oder Empfehlungen verbunden sind.
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.
Klicken Sie auf das Produkt und geben Sie eine Bestellung mit diesem Produkt auf.
Überprüfen Sie auf der Bestellbestätigungsseite erneut Ihr Netzwerk und finden Sie den Aufruf zu sale?.
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 ausführen, um erfolgreich ein Upgrade durchzuführen.

Die beiden Hauptunterschiede in Clerk.js 2 sind:

Die Designs in my.clerk.io verwenden die Liquid, können aber 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 Ihre alten Code-Designs in Liquid umwandeln, was der folgende Leitfaden erklärt, wie es geht. Unten finden Sie eine Beschreibung, wie Sie Ihre alten Code-Designs in Liquid umwandeln.

Option 1: Design-Editor-Designs #

Gehen Sie zu my.clerk.io > Empfehlungen/Suche > Designs > Neues Design.
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.
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.
Klicken Sie auf Design veröffentlichen, wenn Sie fertig sind, und gehen Sie zu Schritt 2 im Leitfaden.
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.
Dies wird vorübergehend dazu führen, dass sie nicht in Ihrem Webshop angezeigt werden, bis Sie Clerk.js 2 wie weiter unten in diesem Leitfaden beschrieben eingefügt haben.

Option 2: Designs umwandeln #

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

Beginnen Sie, indem Sie zu my.clerk.io > Empfehlungen/Suche > Designs > Neues Design. gehen.
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.
Klicken Sie auf Design erstellen.
Dies gibt Ihnen ein leeres Design mit Produkt-HTML und CSS, das Sie verwenden können.
Gehen Sie zurück zur Designübersicht und klicken Sie auf Design bearbeiten für Ihr Clerk.js 1 Design. Wir empfehlen, dies in einem neuen Tab zu tun, damit Sie den Code leicht kopieren können.
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.
Wandeln Sie das Design in die Liquid-Syntax um. 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 umgewandelt werden. Verwenden Sie die Syntax {% if product.attribute %} {% else %} {% endif %}.
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.
Unten finden Sie ein Beispiel für ein Clerk.js 1 Design und die vollständig umgewandelte 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>

Klicken Sie jetzt auf Design aktualisieren, um die Änderungen zu speichern.
Gehen Sie schließlich zu Empfehlungen/Suche > Inhalt und ändern Sie Ihren Inhaltsblock, um Ihr neues Design zu verwenden.
Klicken Sie auf Inhalt aktualisieren. Dies wird vorübergehend dazu führen, dass sie nicht in Ihrem Webshop angezeigt werden, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle Inhalte, die aktualisiert werden sollen.

Ersetzen Sie das Skript #

Beginnen Sie 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.
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 -->

Gehen Sie zu my.clerk.io > Einstellungen > Tracking-Code. Dies enthält den Clerk.js 2-Code.
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-Konfiguration! Sie können die vollständige Dokumentation für Clerk.js 2 hier.

Umgang mit require.js #

Dieser Abschnitt gilt nur, wenn Sie Clerk.js 1 verwenden.

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.

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