FAQ

Einzelseitige Anwendungen #

Wenn eine Seite zum ersten Mal geladen wird, feuert die Clerk.js-Bibliothek automatisch eine Funktion zum Rendern aller Inhaltsblöcke auf dieser Seite.

Bei Single-Page-Applikationen, die Frameworks wie vue.js oder next.js verwenden, werden die Seiten jedoch mit Javascript gerendert und nicht mit einem Standard-Seitenladevorgang.

Aus diesem Grund müssen Sie das Rendering mit Clerk.js so steuern, dass es mit dem Laden von Seiten in einer Single-Page-App übereinstimmt.

Clerk.js einbinden #

Clerk.js muss nur einmal geladen werden, wenn die Website zum ersten Mal geladen wird. Danach steht die Bibliothek während der gesamten Sitzung zur Verfügung. Fügen Sie sie kurz vor dem “” in Ihr HTML ein:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Rendering kontrollieren #

Dies geschieht mit der Funktion Clerk("Inhalt", "#ID")

Führen Sie jedes Mal, wenn eine Seite geladen wird, diese Schritte der Reihe nach aus:

• Fügen Sie das Clerk-Snippet in den HTML-Code ein. Stellen Sie sicher, dass es eine eindeutige ID hat, die Sie ansprechen können.
• Führen Sie Clerk("Inhalt", "#ID") aus, um es zu rendern

Wenn der Besucher die Seite verlässt, zerstören Sie das Snippet, um sicherzustellen, dass Sie es wieder rendern können, wenn der Besucher auf dieselbe Seite zurückkehrt. Damit soll sichergestellt werden, dass Clerk.js das Snippet nicht als zuvor gerendert ansieht, was dazu führt, dass es nicht angezeigt wird.

Beispiel:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Weitere Informationen finden Sie in unserer Dokumentation zu Dynamic Content hier

Auswirkung auf Pagespeed #

Wenn Sie Google Page Speed Insights verwenden, um die Leistung Ihrer Website zu analysieren (was Sie tun sollten - oder zumindest ein gleichwertiges Tool), werden Sie Clerk.js unter Browser-Caching nutzen aufgeführt sehen. In diesem Artikel erfahren Sie, warum dies eine gute Sache ist.

Der Zweck von Clerk.js ist es, die Ergebnisse von [Clerk.io] (http://Clerk.io) ganz einfach in jede beliebige Website einzufügen. Clerk.js enthält eine Reihe von Funktionen, um Tracking und UI-Komponenten wie die Suche-als-du-tippst, Schieberegler, Exit-Intent-Popups 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 nutzen.

Eine Cache-Laufzeit von 60 Minuten bedeutet, dass neue Funktionen innerhalb von maximal 60 Minuten für alle verfügbar sind. Je länger die Cache-Zeit ist, desto länger dauert es, bis jeder Zugang zu den neuesten Funktionen hat.

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

Der 60-minütige Ablauf des Caches bedeutet lediglich, dass **der Browser des Endnutzers sich **alle 60 Minuten bei [Clerk.io] (http://Clerk.io) meldet. Wenn keine Änderungen an Clerk.js vorgenommen wurden, wird nichts heruntergeladen. Diese Check-in-Anfrage ist sowohl superschnell als auch kostengünstig, da die Daten nur heruntergeladen werden, wenn eine neue Version von Clerk.js verfügbar ist.

Die Cache-Ablaufzeit von 60 Minuten ist also ein Kompromiss zwischen der Minimierung von Webanfragen und dem Einsickern neuer Funktionen und Verbesserungen. Denken Sie daran, dass die meisten Sitzungen weitaus kürzer als 60 Minuten sind und die Anfrage daher nur einmal pro Sitzung oder Besuch gestellt wird.

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

API-Aufrufe tätigen #

Sie können Clerk.js verwenden, um API-Aufrufe zu tätigen, indem Sie die eingebaute Funktion Clerk.call() verwenden, diese Funktion benötigt 3 Argumente.

Beispiel Anruf #

Definieren Sie die Funktion, und rufen Sie sie im Tracking-Skript auf.

HTML

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
        key: '{$clerk_public_key}',
        collect_email: {$clerk_datasync_collect_emails},
        language: '{$language}',
        formatters: {
             log_price: function(price) {
             console.log(price);
          }
      },
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

<script>
  function popularProducts(){
    Clerk("call",
      "recommendations/popular",
      {
        limit: 10,
        labels:["Home Page / Bestsellers"]
      },
      function(response){
        console.log(response);
      },
      function(response){
        console.error(response);
      }
    );
  }
</script>

Antwort #

Die Antwort auf ein JavaScript-Objekt, die den Status des API-Aufrufs und das Ergebnis enthält.

JavaScript

__clerk_cb_1(
  {
   "status":"ok",
   "count":72,
   "facets":null,
   "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Arbeiten mit der Antwort #

Verwenden Sie eine Callback-Funktion, um die Antwort zu verarbeiten

HTML

<script>
  Clerk("call",
    (
      "search/categories",
        {
          'query': "men",
          'limit': "10"
        },
        function(x){
          var cat = x.categories;
          if(cat.length > 0)
          {
            let heading = document.createElement('h3');
            heading.textContent = 'Related Categories';
            document.querySelector('#your-target').append(heading);
          }
          for(var index in cat) {
            var clerkName = cat[index].name;
            var clerkUrl = cat[index].url;
            let link = document.createElement('a');
            link.href = clerkUrl;
            link.textContent = clerkName;
            document.querySelector('#your-target').append(link);
         }
      }
   )
</script>

In diesem Beispiel werden die Kategorien zurückgegeben, die der Abfrage entsprechen, und als Text dargestellt. Auf diese Weise können Sie unsere API schnell und einfach aufrufen.

Häufige Konsolenfehler #

Beim Einrichten von Clerk.io können Sie aus verschiedenen Gründen auf Probleme stoßen.

Das häufigste Problem ist, dass Sie Clerk.io installiert haben, aber die Produkte immer noch nicht angezeigt werden.

Dieser Artikel zeigt Ihnen die Meldungen, die Clerk.io in der Konsole anzeigt, und erklärt, wie Sie mit ihnen umgehen können, um Ihnen bei der Fehlersuche zu helfen.

Wenn Clerk.io auf einen Fehler stößt und wir wissen, was der Fehler ist, sehen Sie eine Meldung in Ihrer Konsole:

Wenn Sie auf den Fehler-Link klicken, erhalten Sie weitere Informationen darüber, was schief gelaufen ist. Diese Informationen können Sie verwenden, um den Fehler selbst zu beheben oder an unser Support-Team zu senden, das Ihnen weiterhelfen wird.

Dies sind die häufigsten Fehler, die in der Konsole angezeigt werden:

“LogicalError: Unbekannter Inhalt ‘insert-name’” #

Dieser Fehler wird angezeigt, wenn der eingefügte Einbettungscode auf einen Website-Inhalt verweist, der in der Datenvorlage nicht vorhanden ist.

Um diesen Fehler zu beheben, stellen Sie sicher, dass der Name im Einbettungscode mit einem Website-Inhalt übereinstimmt.

Sie können jederzeit auf Inhalt bearbeiten für jeden Inhalt klicken, um zu sehen, wie der Einbettungscode lauten sollte:

“AuthenticationError: Ungültiger API-Endpunkt” #

Dieser Fehler tritt normalerweise auf, wenn Sie irgendwo in Ihrem HTML-Code die Klasse “clerk “ verwendet haben:

Die Klasse “clerk “ ist für die Verwendung mit unseren Embedcodes reserviert, da sie für die Verarbeitung der Aufrufe an unseren Server verwendet wird.

Um dies zu beheben, stellen Sie sicher, dass Sie die Klasse anders benennen, zum Beispiel “clerk-product “ oder ähnlich.

“ParsingError: Ungültiger Typ des Arguments product” #

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

Wenn Ihre Produkt-IDs zum Beispiel ganzzahlig sind, müssen sie das auch im Embedcode sein. Außerdem ist es wichtig, die Klammern um die ID zu beachten, da es sich um eine Liste: handeln muss.

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

“ParsingFehler: Ungültiger Typ der Argumentkategorie” #

Wie im obigen Fall bedeutet dies, dass die für eine Kategorie angegebene ID falsch ist.

In den meisten Fällen geschieht dies, 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, etwa so:

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

Um dies zu beheben, wählen Sie Ihr Shopsystem im Dropdown-Menü unter Bearbeiten Inhalt->Einfügen in Website aus, bevor Sie den Einbettungscode kopieren:

Der Einbettungscode wird dann so geändert, dass er die Logik Ihrer Plattform enthält, um die richtige Kategorie-ID auszuwählen:

Bei benutzerdefinierten Konfigurationen müssen Sie jedoch Ihre eigene Logik im Einbettungscode festlegen.

“AuthenticationError: Falscher öffentlicher API-Schlüssel” #

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

Um dies zu beheben, melden Sie sich zuerst bei my.clerk.io an und gehen Sie zu Einstellungen -> API-Schlüssel

Hier können Sie den Öffentlichen API-Schlüssel überprüfen und sicherstellen, dass dies der Schlüssel ist, den Sie in Ihrem Clerk.io Tracking-Skript verwendet haben

Konvertierung von Designs für Clerk.js 2 #

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

1. Gehen Sie zunächst auf my.clerk.io -> Empfehlungen / Suche -> Designs und klicken Sie auf Neues Design:

2. Wählen Sie den Design-Typ, die Art des Inhalts und den Namen des Designs (wir empfehlen den Zusatz " V2”, damit es offensichtlich ist, dass Sie Clerk.js2 verwenden). Klicken Sie dann auf Entwurf erstellen.

3. Wählen Sie als Vorlage den Product Slider (HTML) für die Empfehlungen, wenn Sie an den Suchdesigns arbeiten, müssen Sie Instant Search Dropdown (HTML) oder Search Page (HTML) wählen.

4. Wenn Sie fertig sind, klicken Sie auf Design erstellen.

5. Dadurch erhalten Sie den HTML- und CSS-Code, den Sie manuell überschreiben können:

6. Gehen Sie zurück zu Empfehlungen / Suche -> Designs und klicken Sie auf Design bearbeiten für Ihr altes Clerk.js 1-Design.

7. Nun 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 Design gibt. Das liegt daran, dass Liquid for-Schleifen verwendet, um alle Produkte darzustellen. Kopieren Sie Ihr altes Produkt-HTML _innerhalb der for-Schleife, und Ihren alten Container Code um ihn herum:

8. Kopieren Sie abschließend auch Ihr CSS:

9. Nun müssen Sie das Design in die Liquids-Syntax umwandeln. Der Hauptunterschied ist, dass die alten Designs die Syntax

{% raw %} {{ formatter attribute }}   {% endraw %}

während die Syntax von v2 lautet

{% raw %} {{ product.attribute \| formatter }}   {% endraw %}

10. Gehen Sie alle Ihre Attribute durch und ändern Sie sie in das neue Format:

11. Wenn Sie {% raw %} {{#if}} oder {{#is}} {% endraw %} Anweisungen verwenden, müssen diese ebenfalls in die Syntax {% raw %} {% if product.attribute %} {% endraw %} Tue etwas {% raw %} {%else%} {% endraw %} Tue etwas anderes {% raw %} {% endif %} {% endraw %} umgewandelt werden:

12. Klicken Sie nun auf Design aktualisieren, um die Änderungen zu speichern.

13. Gehen Sie abschließend zu Empfehlungen / Suche -> Inhalt und ändern Sie Ihren Clerk.io Inhalt, um Ihr neues Design zu verwenden.

14. Klicken Sie auf Inhalte aktualisieren. Dadurch werden sie vorübergehend nicht in Ihrem Webshop angezeigt, bis Sie mit Schritt 2 fertig sind.

Übermittlung von Verkaufsdaten aus einem POS/ERP-System #

Für einige Webshops ist es relevant, Verkaufsdaten aus anderen Systemen als dem eigentlichen Webshop hochzuladen, z.B. wenn Sie den Algorithmus basierend auf Verkäufen aus einem physischen 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 der gekauften Produkte angeben können, können sie hochgeladen werden:

https://docs.clerk.io/reference/order-resource

Sie können die Bestellungen auf eine von zwei Arten hochladen:

• Mit einer CSV-Datei wie hier erklärt
• Durch die Implementierung von Aufrufen zu unserer CRUD API,, die es Ihnen ermöglicht, Bestelldaten direkt an Ihren Shop in Clerk.io zu senden.

Mit einer CSV-Datei können Sie Ihre Verkäufe manuell hochladen, wann immer Sie wollen, ohne zu programmieren.

Es wird empfohlen, die CRUD API, zu verwenden, da Sie damit die Aufgabe vollständig automatisieren können.

Fügen Sie einfach einen POST-Aufruf zum Endpunkt /Bestellungen in Ihrem ERP-System oder Webshop hinzu, führen Sie den Job in regelmäßigen Abständen aus, z. B. einmal im Monat, und Sie können Offline-Bestellungen nutzen, um Ihre Online-Empfehlungen und Suchergebnisse zu verbessern.

Währungsumrechnung #

Es gibt mehrere Möglichkeiten, mit Währungsumrechnung in [Clerk.io] (http://Clerk.io) zu arbeiten. Ein einfacher Weg, damit es funktioniert, wird im Folgenden beschrieben.

1. Senden der verschiedenen Preise im Feed #

Der Verkäufer muss die Preise der einzelnen Produkte in den verschiedenen Währungen kennen. Am einfachsten ist es, wenn Sie die Preise als Diktat von formatierten Preisen mit dem Währungssymbol als Schlüssel in Ihrem [Daten-Feed] (https://docs.clerk.io/docs/data-feed) senden.

Beispiel:

JSON

   "products": [
        {
            "id": 1,
            "name": "Cheese",
            "description": "A nice piece of cheese.",
            "price": 100,
            "list_price": 50,
            "categories": [25, 42],
            "image": "http://example.com/images/products/1.jpg",
            "url": "http://example.com/product/1",
            "prices_formatted": "{'USD':'$100', 'EUR':'€ 87.70', 'GBP':'£ 68.68'}"
         },
         {
            "id": 2,
            "name": "A pound of nuts",
            "description": "That's a lot of nuts!",
            "price": 150,
            "categories": [1],
            "image": "http://example.com/images/products/2.jpg",
            "url": "http://example.com/product/2",
            "prices_formatted": "{'USD':'$150', 'EUR':'€142', 'GBP':'£120'}"
         }
    ]

2. Erstellen eines Formatierers #

In dem Tracking-Skript, das auf jeder Seite Ihres Shops eingefügt wird, können Sie JavaScript-Funktionen definieren, die innerhalb unserer Vorlagen verwendet werden können.

Hier können Sie eine Funktion definieren, die Ihren Preisdiktat als Argument nimmt und **den Preis für eine bestimmte Währung zurückgibt, die Sie an der Stelle der Währung im Preisdiktat auswählen können.

Stellen Sie sicher, dass Ihr Code Währung durch die aktuell gewählte Währung des Frontends ersetzt.

JavaScript

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

3. Verwendung des Formatierers in Clerk-Designs #

Schließlich können Sie diese Funktion auch als Teil Ihres Entwurfs verwenden.

HTML

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

Kundenspezifische Preise #

Wenn Sie völlig eindeutige Preise anzeigen müssen, die davon abhängen, welcher Kunde eingeloggt ist, müssen Sie ein Event in Clerk.io einrichten, das den richtigen Preis einfügt, bevor die Produkte gerendert werden.

Events sind Javascript-Funktionen, die vor oder nach Clerk.io ausgeführt werden, um Produkte anzuzeigen.

Diese Methode ist möglich, wenn Sie Preise von Ihrem Server, direkt von einer Javascript-Funktion, im Frontend basierend auf einer Produkt-ID und einer Kunden-ID nachschlagen können.

Um die Preise einzelner Kunden anzuzeigen, sollte der Code direkt nach der Antwort laufen.

Allgemeines Beispiel #

<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 an, das die gesamte Antwort ist, die Clerk.io von der API zurücksendet.

Beispiel für individuelle Kundenpreise #

Der wichtigste Teil der Antwort ist product_data, der alle Attribute der Produkte enthält, die Clerk.io zurückschickt:

Diese Daten können manipuliert werden, so dass Standardpreise vor dem Rendern durch kundenspezifische Preise ersetzt werden können.

Ein einfaches Beispiel, wie das geht, ist hier zu sehen:

<span class="clerk" data-template="@home-page-popular"></span>

<script>
   var customer_id = INSERT_CUSTOMER_ID;
   Clerk('on', 'response', function(content, data) {
      console.log(data.product_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);
         product.price = custom_price;
      }
   });
</script>

Im Code müssen Sie 2 Dinge ersetzen:

• INSERT_CUSTOMER_ID sollte durch einen Code ersetzt werden, der die ID des aktuell eingeloggten Kunden einfügt.

• FETCH_PRICE_FROM_SERVER sollte durch eine Javascript-Ajaxfunktion ersetzt werden, die die Produkt-ID und eine Kunden-ID verwendet, um den richtigen Preis zu finden.

Der Preis wird dann dem Clerk.io Attribut price zugewiesen, das in Ihrem Design wie folgt angezeigt werden kann:

 {% raw %} {{ price }} {% endraw %}

Mit dieser Methode können Sie völlig individuelle Preise anzeigen, ohne auf unsere benutzerfreundliche Javascript-Lösung verzichten zu müssen.

Preise der Kundengruppe #

Die Einrichtung von Kundengruppenpreisen besteht aus 4 Schritten:

1. Die verschiedenen Preise in den Feed einfügen

2. Holen Sie die aktuelle Kundengruppen-ID.

3. Erstellen Sie eine Funktion, um den entsprechenden Preis abzurufen

4. Zeige den Preis im Design an

1. Preise in den Feed einfügen #

Fügen Sie zunächst allen Produkten ein Attribut hinzu, das alle verschiedenen Preisoptionen enthält, und stellen Sie sicher, dass jeder Preis einer bestimmten Kundengruppe zugeordnet ist.

Dies kann als string-encoded JSON dict gesendet werden

Zum Beispiel:

Preise

customer_group_prices = '{"GROUP1":179, "GROUP2": 140, "GROUP3": 100, "GROUP4":70}'

2. Abrufen der Kundengruppen-ID #

Implementieren Sie irgendwo auf der Seite ein kleines Skript, das die Kundengruppen-ID des aktuellen Kunden in eine JS-Variable abruft.

Die ID der Kundengruppe sollte dem Listenindex entsprechen, in dem der entsprechende Preis enthalten ist. Befindet sich der Preis beispielsweise in Kundengruppe-Preise[2], sollte die ID auch 2 sein. Zum Beispiel:

Kundengruppen-ID

<script type="text/javascript">
    const customer_group = GROUP2;
</script>

3. Eine Funktion zum Abrufen des Preises erstellen #

Nachdem Sie den Preis in den Feed aufgenommen und die Variable Kundengruppe abgerufen haben, können Sie einen TemplateFormatter erstellen, der die Liste Kundengruppe als Argument nimmt und den entsprechenden Preis zurückgibt.

Wie oben beschrieben, können Sie nun den Preis der spezifischen Kundengruppe als Schlüssel im Preis-Diktat auf der Grundlage der Kundengruppen-ID abrufen.

Die Funktion sollte direkt in das Skript zur Besucherverfolgung eingefügt werden und heißt in diesem Beispiel final_price:

Formulare

    Clerk('config', {
      key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
      formatters: {
          final_price: function (customer_group_prices) {
              price_groups_obj = JSON.parse(customer_group_prices)
              var return_price = price_groups_obj[customer_group_key];
              return return_price;
          }
      });

4. Den Preis in der Vorlage anzeigen #

Wenn der Formatierer Endpreis erstellt wurde, können Sie ihn direkt in Ihrem Entwurf zusammen mit der in Schritt 1 erstellten Liste Kundengruppe_Preise benennen:

Aufruf der Vorlagenfunktion

5. Erstellen von Kundengruppenpreisen durch Erweitern von Clerk.js #

Wenn Sie einige der Schritte in den obigen Lösungen zusammenfassen, haben Sie die Möglichkeit, Kundengruppenpreise zu erstellen, auf die Sie in Ihren Designs verweisen können, indem Sie sie in Ihre Clerk.js-Erweiterungsdatei aufnehmen.

Sie können Globals für Ihre Kundengruppen erstellen und Formate, um diese Gruppen in Ihren Clerk.io Designs zu referenzieren, indem Sie Code wie das folgende Beispiel verwenden. Stellen Sie sicher, dass Sie INSERT_GROUP_ID_HERE durch Ihre Gruppen-IDs ersetzen.

globals: {
customer_group_id: INSERT_GROUP_ID_HERE
},

formatters:{
final_price: function(standard_price,group_price1, group_price2){

var customer_group = INSERT_GROUP_ID_HERE;

if (customer_group = 1){
return group_price1;
}
else if (customer_group = 1){
return group_price2;
}
else (){

return standard_price;

}
}
}

Synchronisierung mit HTTP-Authentifizierung #

Häufig wird die HTTP-Authentifizierung auf Staging-Sites verwendet, um unerwünschte Besucher zu vermeiden.

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

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

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

Keine verfolgten Aufträge im Dashboard #

Clerk.io muss die Verkäufe aus dem Webshop kontinuierlich verfolgen, um die Ergebnisse mit dem Verhalten Ihrer Kunden auf dem Laufenden zu halten.

Einige Einstellungen in einem Webshop können jedoch dazu führen, dass die Umsatzverfolgung fehlschlägt.

Im Folgenden erfahren Sie, wie Sie das Sales-Tracking debuggen können und was die häufigsten Probleme und Lösungen sind.

Bevor Sie beginnen #

Stellen Sie sicher, dass Sie die Software installiert haben:

• The Clerk.js tracking script auf allen Seiten

• Das Skript zur Verfolgung von Verkäufen auf Ihrer Bestellungserfolgsseite.

Diese werden benötigt, um Verkäufe im Allgemeinen zu verfolgen.

Fehlersuche #

In den meisten Fällen scheitert die Verfolgung von Verkäufen aufgrund von Fehlern in den Besucher-IDs oder Produkt-IDs des Verkaufsaufrufs, der nach Abschluss eines Kaufs an Clerk gesendet wird. Um dies zu beheben, müssen Sie eine Testbestellung durchführen. In einigen Fällen kann das Problem jedoch mit dem Skript zur Verkaufsverfolgung selbst zusammenhängen und kann durch einen Blick in die Protokolle unter my.clerk.io => Daten => Protokolle wie unten beschrieben behoben werden.

Beginnen Sie, indem Sie zu Ihrem Clerk.io Dashboard gehen, und gehen Sie zu Daten -> Protokolle.

Wenn das Sales-Tracking aufgrund eines Fehlers in Ihrem Skript fehlschlägt, können Sie den Fehler oft oben auf der Seite sehen.

Klicken Sie auf Details, um mehr zu sehen:

Wenn Sie in den Protokollen keine Fehler erkennen können, ist es am einfachsten, eine Testbestellung aufzugeben, um andere Probleme bei der Verkaufsverfolgung zu identifizieren.

Fehlersuche mit einem Testauftrag #

In der folgenden Anleitung wird am Beispiel von Chrome gezeigt, wie die Fehlerbehebung mit einem Testauftrag durchgeführt werden kann, aber auch andere Browser haben ähnliche Funktionen.

1. Legen Sie zunächst ein paar Produkte in den Warenkorb.

2. Gehen Sie zur Kasse.

3. Bevor Sie die Bestellung aufgeben, öffnen Sie die Konsole Ihres Browsers.

4. Suchen Sie Netzwerk, und grenzen Sie die Ergebnisse für " Sekretär” ein.

5. Geben Sie die Bestellung auf, damit Sie die Bestellbestätigungsseite sehen.

6. Klicken Sie auf den Aufruf, der mit sale beginnt (normalerweise sale?key=…), um die Details zu sehen, die an das Sales-Tracking gesendet und von diesem empfangen werden. Wenn Sie auf Vorschau klicken, können Sie leicht Fehler erkennen, die dazu führen, dass Verkäufe nicht nachverfolgt werden können.

Fehler 1: “Ungültige Syntax im Argument: products” #

Dieser Fehler tritt auf, wenn die Produkt-IDs, die Sie senden, eine falsche Syntax haben.

Die häufigsten Fehler sind:

• Die Produkt-IDs sind string-encoded im Sales-Tracking, aber Sie verwenden Integer in [Clerk.io] (http://clerk.io/) oder umgekehrt

• Die Liste der Produkt-IDs enthält Textformatierungszeichen wie diese: “products”:[\“id”\:\“123-m”\]. Das Format sollte reines JSON sein, um jegliche Formatierung zu vermeiden.

• Die mit dem Aufruf gesendeten Produkt-IDs existieren nicht in den Daten, die Sie mit Clerk synchronisiert haben.

Fehler 2: “Fehlendes Argument X” #

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

Vergewissern Sie sich, dass Sie alle [Daten-] Attribute in der Verkaufsverfolgung angeben.

Fehler 3: Anruf wird nie getätigt #

Wenn Sie den Aufruf von sale nicht sehen können, obwohl beide Skripte installiert sind, wurde das Skript Clerk.js aus irgendeinem Grund nicht korrekt geladen. Um herauszufinden, ob dies das Problem ist, versuchen Sie Folgendes:

1. Öffnen Sie zunächst die Konsole in Ihrem Browser

2. Geben Sie “Clerk” ein.

3. Wenn Clerk.js nicht korrekt geladen wurde, sehen Sie einen ReferenceError:

Der Sachbearbeiter hat keine Auswirkungen auf die Aufträge #

Wenn Sie erfolgreich Verkäufe in my.clerk.io verfolgen, aber keine davon von Clerk.io stammen, haben Sie möglicherweise einen Fehler in Ihrer Besucher-Tracking (click-tracking)-Einrichtung.

Stellen Sie zunächst sicher, dass das Besucher-Tracking funktioniert, indem Sie Folgendes tun:

1. Klicken Sie auf ein Produkt in der Suche oder Empfehlungen von Clerk.io

2. Fahren Sie fort, eine Bestellung mit diesem Produkt aufzugeben

3. Melden Sie sich bei my.clerk.io an und gehen Sie zu Bestelldetails.

4. Warten Sie, bis die Bestellung angezeigt wird.

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

Wenn Sie keinen Mehrwert in der von Ihnen aufgegebenen Bestellung sehen, zeigen die folgenden Abschnitte häufige Fehler, die dies verursachen können.

1. Benutzerdefinierte API-Einstellungen, bei denen das Click-Tracking nicht aktiviert wurde #

Wenn Sie [Clerk.io] (http://Clerk.io) mit einer benutzerdefinierten Integration direkt mit der API einrichten, müssen Sie das Besucher-Tracking aktiv aktivieren.

Diese Anleitung zeigt, wie man es aktiviert.

2. Falsche Produkt-IDs werden verfolgt #

Damit das Besucher-Tracking funktioniert, muss das Klick- und Verkaufs-Tracking die gleichen Produkt-IDs verfolgen, die wir im Importer erhalten.

Wenn dies nicht funktioniert, liegt es in der Regel daran, dass Sie Varianten-IDs anstelle von Haupt-IDs verfolgen oder einfach die SKU anstelle der ID verfolgen.

Um zu überprüfen, ob dies das Problem ist, gehen Sie wie folgt vor:

1. Gehen Sie zu Bestellungsdetails und klicken Sie auf die ID der Bestellung, die Sie aufgegeben haben:

2. Wenn [Clerk.io] (http://Clerk.io) das Produkt nicht identifizieren konnte, sehen Sie nur die ID und eine

Bild Platzhalter:

3. Gehen Sie im Seitenmenü auf Daten -> Produkte und suchen Sie nach dem Namen von

   das von Ihnen hinzugefügte Produkt. Hier können Sie die erwartete ID sehen

   für das Produkt:

4. Verwenden Sie dies, um sicherzustellen, dass Sie die richtigen IDs [im Sales-Tracking] verfolgen (http://help.clerk.io/de/integrations/any-webshop/get-started/).

3. Besucher-ID-Änderungen während der Sitzung #

Clerk.io verwendet eine Besucher-ID, um jeden einzelnen Besucher/Kunden zu identifizieren und zu verfolgen, ob er Produkte über Clerk.io. kauft.

Diese Besucher-ID wird automatisch erstellt, wenn Clerk.js für die Einrichtung verwendet wird.

Dieser Fehler tritt selten auf, aber Sie können die Besucher-ID überprüfen, indem Sie diese Schritte ausführen:

1. Öffnen Sie Ihre Netzwerk-Einstellungen im Browser, und grenzen Sie die Ergebnisse auf “clerk” ein.

2. Beginnen Sie mit der Überprüfung aller “undefinierten “ Aufrufe, die mit der Suche oder

   Empfehlungen.

3. In “payload “ können Sie die aktuelle Besucher-ID überprüfen. Sie können dies für alle Aufrufe tun, die mit Clerk.io verbunden sind

4. Klicken Sie auf das Produkt, und geben Sie eine Bestellung für dieses Produkt auf.

5. Überprüfen Sie auf der Seite Bestellungserfolg erneut Ihr Netzwerk und finden Sie den Aufruf

  zu "**Verkauf?".** 6\. Vergewissern Sie sich, dass "visitor" in der "payload" hier mit der Besucher-ID übereinstimmt, die Sie gesehen haben

  in Schritt 3 gesehen haben.

7. Wenn die Besucher-IDs nicht übereinstimmen, müssen Sie sicherstellen, dass Sie nicht versehentlich die

   sie ändern. Eine häufige Ursache dafür, dass sich die Besucher-IDs ändern, könnte sein, dass Sie Clerk.js 2 auf Ihrer Website verwenden.

   Webshop-Seiten verwenden, aber Clerk.js 1 auf Ihrer **Bestellungserfolg**-Seite. Überprüfen Sie Ihre Seiten auf

   um sicherzustellen, dass Sie überall den gleichen Skripttyp verwenden. Verwenden Sie den folgenden Screenshot

   als Referenz.

Im Zweifelsfall wenden Sie sich bitte über den Live-Chat an unseren Support.

Ungültiger API-Endpunkt Konsolenfehler #

Die Javascript-Bibliothek Clerk.js von Clerk.io verwendet die spezielle Klasse “clerk”, um nach den Einbettungscodes zu suchen, die zum Rendern der Ergebnisse verwendet werden.

Wenn Sie die Fehlermeldung “Ungültiger API-Endpunkt “ in der Konsole Ihres Browsers sehen, bedeutet dies in der Regel, dass die Klasse “clerk “ versehentlich irgendwo in Ihrem HTML-Code verwendet wurde.

Zum Beispiel:

Um dies zu beheben, benennen Sie die Klasse einfach in etwas anderes um. Jede Klasse außer “clerk “ kann für die Gestaltung verwendet werden:

Aufrüstung auf Clerk.js 2 #

Clerk.js 2 ist eine schnellere und viel flexiblere Version unserer JavaScript-Bibliothek, die die Installation von Clerk.io in jedem Webshop zu einem Kinderspiel macht.

Da die beiden Versionen jedoch leicht unterschiedlich funktionieren, müssen Sie diese Schritte befolgen, um ein erfolgreiches Upgrade durchzuführen.

Die zwei Hauptunterschiede in Clerk.js 2 sind:

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

• Das Skript muss direkt vor dem Tag in Ihre Webshop-Vorlage eingefügt werden.

Schritt 1: Konvertierung von Designs #

Da Clerk.js 2 einen anderen Ansatz hat, müssen Sie neue Designs erstellen.

Sie können Ihre Clerk.js 2 Designs auf eine von zwei Arten erstellen:

• 1. Verwenden Sie den intuitiven Design Editor, um neue Designs zu erstellen, wie in den folgenden Punkten beschrieben.

• 2. Konvertieren Sie Ihre alten Designs. Folgen Sie dieser Anleitung, um zu sehen, wie das geht.

1.1 Beginnen Sie, indem Sie zu my.clerk.io -> Empfehlungen / Suche -> Designs gehen und auf Neues Design:

1.2 Wählen Sie den Design-Typ und den Inhaltstyp aus und geben Sie dem Design einen Namen (wir empfehlen den Zusatz " V2”, damit es offensichtlich ist, dass Sie Clerk.js2 verwenden). Klicken Sie dann auf Entwurf erstellen.

1.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 dem Design neue Elemente hinzu, um mehr Informationen über Produkte zu erhalten.

1.4. Klicken Sie auf Entwurf veröffentlichen, wenn Sie fertig sind, und gehen Sie zu Schritt 2 in der Anleitung.

1.5. Gehen Sie abschließend zu Empfehlungen / Suche -> Inhalt und ändern Sie Ihren Clerk.io Inhalt, um Ihr neues Design zu verwenden.

1.6. Klicken Sie auf Inhalte aktualisieren. Dadurch werden sie vorübergehend nicht in Ihrem Webshop angezeigt, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle Inhalte, die aktualisiert werden sollen.

1.7. So! Sie sind nun bereit, auf Clerk.js 2 umzusteigen.

Schritt 2: Ersetzen des Skripts #

2.1. Suchen Sie zunächst die Vorlagendatei, mit der alle Seiten des Webshops angezeigt werden und in der sich das ursprüngliche Clerk.js-Skript am unteren Rand befindet.

2.2. Entfernen Sie das alte Skript aus der Datei:

2.3. Gehen Sie dann zu my.clerk.io -> Einstellungen -> Tracking Code. Diese Seite enthält nun Ihren Clerk.js 2 Tracking Code.

2.4. Kopieren Sie diesen Code und fügen Sie ihn direkt vor dem Tag in die Vorlage ein:

2.5. Speichern Sie Ihre Vorlage.

Glückwunsch! Sie arbeiten jetzt mit dem stark verbesserten Clerk.js 2 Setup!

Sie können die vollständige Dokumentation für Clerk.js 2 hier einsehen: https://docs.clerk.io/docs/clerkjs-quick-start

Umgang mit require.js #

Diese Anleitung gilt nur, wenn Clerk.js 1. verwendet wird.

In einigen Konfigurationen verhindert Require.js das Laden von Clerk.js, was bedeutet, dass keine Schieberegler oder Suchergebnisse angezeigt werden.

Wenn dies geschieht, wird der folgende Fehler in der Konsole angezeigt:

Uncaught ReferenceError: Clerk is not defined

Es gibt zwei Möglichkeiten, mit Require.js. umzugehen. Bei beiden Ansätzen müssen Sie Änderungen am Tracking-Skript vornehmen, das Sie unten in alle Seiten eingefügt haben.

Einfügen von “clerk” in Require.js #

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

Sie können dies tun, indem Sie require([‘clerk’], function() {}); unten in das Tracking-Skript 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; einfügen.

oben in das Tracking-Skript einfügen:

Nach Anwendung einer dieser Methoden ist Require.js nun mit Clerk.io kompatibel.

Deinstallation #

Um Clerk.io von Ihrem Webshop zu deinstallieren, müssen Sie die ursprünglich hinzugefügten Skripte zur Besucherverfolgung und zur Auftragsverfolgung entfernen.

Ein Beispiel für das zu löschende Visitor Tracking-Skript, das sich in einer Header-Datei befindet:

Als Nächstes müssen Sie das Skript Order Tracking aus dem Webshop Ihrer benutzerdefinierten Plattform entfernen.

Als Sie Clerk.io installiert haben, haben Sie wahrscheinlich das Order Tracking entweder zu einem Tracking-Skriptmodul oder einer Bestellbestätigungsseite in Ihren Themendateien oder einem Tracking-Modul in Ihrem Shop hinzugefügt. Genau wie beim Visitor Tracking müssen Sie das Order Tracking-Skript einfach aus der Themendatei entfernen.

Beispiel für die Position des Order Tracking unten: