econda Cross Sell

Tracking, Cookies und vergleichbare Werkzeuge der Werbewirksamkeitsforschung dürfen nach aktueller Rechtsprechung erst dann Daten übertragen, wenn der Besucher aktiv zugestimmt hat. Ein Hinweis genügt nicht, und voreingestellte Häkchen sind unzulässig. Klären Sie die Ausgestaltung mit Ihrem Datenschutzbeauftragten, bevor Sie einen der folgenden Schritte umsetzen.

econda Cross Sell zeigt Besuchern Produktempfehlungen, die sich am Verhalten aller Besucher und am eigenen Profil orientieren. Weil die Darstellung über ein Shop-Template läuft, sehen die empfohlenen Produkte genauso aus wie überall sonst im Shop, und eine Designänderung wirkt an beiden Stellen. Unterstützt werden vier Seiten:

Shop-Startseite ws_start.htm
Produktübersichtsseite ws_category.htm
Produktdetailansicht ws_product.htm
Warenkorbseite ws_basket.htm

Wie es zusammenspielt

Der Ablauf ist auf allen vier Seiten derselbe:

Ein Widget von econda fragt Empfehlungen an und bekommt eine Produktliste zurück.
Eine Rückruffunktion wandelt diese Liste in Shop-Parameter um.
Der Shop lädt per AJAX ein eigenes Template, das diese Produkte mit Shop-Tags darstellt.
Der Inhalt landet in einem vorbereiteten Bereich der Seite.

Unterschiedlich ist nur, welchen Zusammenhang das Widget mitbekommt, also ob es die aktuelle Kategorie, das aktuelle Produkt oder den Warenkorbinhalt kennt.

Zwei Wege

	ohne Tracking-Schnittstelle (empfohlen)	mit Tracking-Schnittstelle
Freischaltung bei WEBSALE	keine	Tracking-Schnittstelle und Dataflow-Manager
Datenfeed	über econda geklärt	WEBSALE legt ihn im Dataflow-Manager an
Einzubindende Dateien	`ws-module-cs-links-1.8.5.js`, `econda-recommendations-design.js`, `econda-recommendations-3.0.11.js`	WEBSALE Systembibliothek, Design-Komponente, `econda-recommendations-3.0.20.min.js`
Klammerung des Skripts	in `window.econda.ready(() => { ... });`	ohne diese Klammerung

Alles Übrige ist gleich. Die folgende Anleitung beschreibt den empfohlenen Weg, die Abweichungen stehen jeweils dabei.

Vorbereitung

Nach der Beauftragung bekommen Sie von econda eine Account-ID und eine oder mehrere Widget-IDs. Teilen Sie diese WEBSALE mit. Technisch könnten Sie danach beginnen. Sinnvoller ist es, zuerst zu klären, was die Widgets zurückliefern sollen, denn davon hängt ab, welchen Zusammenhang Sie mitgeben.

Platzierung	Was empfohlen werden soll	Ersatz, wenn nichts passt
Startseite	bei wiedererkanntem Besucher Produkte aus seinem Profil, beispielsweise zuletzt angesehen und nicht gekauft, dazu passende Empfehlungen	Topseller und neue Produkte des Shops
Kategorieseite	Produkte aus dem Profil, eingegrenzt auf dieselbe Kategorie	Topseller und neue Produkte der Kategorie
Produktdetailansicht	zusätzlich zum gewählten Produkt weitere Produkte aus dem Profil	Topseller der Kategorie, danach des Shops
Warenkorb	Produkte, die andere Kunden dazu gekauft haben	vordefinierte Liste mit Mitnahmeprodukten im günstigeren Preisbereich

Auf Startseite, Kategorie- und Produktseite wird zusätzlich mit Profilkennungen angefragt, also Besucher-, Kunden-, Benutzer- oder Empfängerkennung, sofern der Besucher wiedererkannt wird. Wann das geschehen soll, ist die wichtigste Frage bei der Einrichtung der Widgets. Wie die Empfehlungen daraus gebildet werden, stellen Sie im Interface von econda ein.

Einrichten

Schritt 1: JavaScript-Dateien einbinden

Ohne Tracking-Schnittstelle:

Datei	Herkunft
`ws-module-cs-links-1.8.5.js`	muss vom Designer erstellt werden
`econda-recommendations-design.js`	global vorhanden
`econda-recommendations-3.0.11.js`	von econda, falls nicht mitgeliefert aus dem econda-Backend

Mit Tracking-Schnittstelle stattdessen:

<head>
   <script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
   <script type="text/javascript" src="../ihr-verzeichnis/ws-design-1.8.3.js"></script>
   <script type="text/javascript" src="/$WS/ws_sysdata/js/econda-recommendations-3.0.20.min.js"></script>
</head>

Materialien: WEBSALE JavaScript-Bibliothek

Schritt 2: Funktionen in die Design-Komponente aufnehmen

Vier Funktionen werden an festen Punkten aufgerufen. Sie dürfen leer bleiben, müssen aber vorhanden sein. Über sie bauen Sie Ladeanzeigen, Meldungen und Animationen.

// vor dem Absetzen der AJAX-Anfrage, beispielsweise für eine Ladeanzeige
function ws_AJAXloadEcondaStart() {}

// wenn die AJAX-Verbindung selbst fehlschlug
function ws_AJAXloadEcondaError() {}

// wenn Cross-Sell-Produkte geladen werden konnten
function ws_AJAXloadEcondaResponseSuccess() {}

// wenn keine Cross-Sell-Produkte geladen werden konnten
function ws_AJAXloadEcondaResponseError() {}

Schritt 3: Den Anzeigebereich festlegen

Ein HTML-Element mit einer Kennung markiert die Stelle, an der die Empfehlungen erscheinen. Es bleibt leer, der Inhalt kommt später per AJAX hinein.

<div id="econda-cross-sell"></div>

Zeigen Sie mehrere Widgets auf einer Seite, braucht jedes einen eigenen Bereich mit eigener Kennung und ein eigenes Template. Sonst überschreibt die zweite Antwort den Inhalt der ersten.

Schritt 4: Das JavaScript einbinden

Empfohlen wird die Einbindung unterhalb des Anzeigebereichs im <body>.

<div id="econda-cross-sell"></div>

<script type="text/javascript">
window.econda.ready(() => {

   function econda_callback(targetElement, data, templateName) {
      if (data.products.length == 0)
         return;

      var payload = ws_getEcondaPayload(data.products);

      ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~', '~WS-Charset~',
         ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError,
         'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
   }

   var widget = new econda.recengine.Widget({
      renderer: {
         type: 'websale',
         callback: econda_callback
      },
      accountId: 'Ihre Account ID',
      id: Ihre Widget ID,
      context: {
      }
   });

   widget.render();

});
</script>

Mit Tracking-Schnittstelle entfällt die äußere Klammerung window.econda.ready(() => { ... });, der Inhalt bleibt derselbe.

Sie können das Skript auch in den <head>-Bereich setzen. Dann muss der Aufruf warten, bis die Seite steht:

$(document).ready(function() {
   widget.render();
});

Der Zusammenhang je Seite

Nur dieser eine Teil unterscheidet sich zwischen den vier Seiten. Startseite, ohne Zusammenhang:

context: {
}

Produktübersichtsseite, mit dem Kategoriepfad:

context: {
   categories: {
      type: 'productcategory',
      path: '~CAT-JSPath~'
   }
}

Produktdetailansicht, mit Kategoriepfad und Produkt:

context: {
   products: [{id: '~PR-ProdIndex~'}],
   categories: {
      type: 'productcategory',
      path: '~CAT-JSPath~'
   }
}

Warenkorbseite, mit allen Produkten im Warenkorb:

context: {
   products: [{BASKET-PR-Data}~DC-Int1_set(0)~{@BASKET-PR-Data}~DC-Int1_inc~{!DC-Int1(1)},{/!DC-Int1(1)}{id: '~BASKET-PR-ProdIndex~'}{/@BASKET-PR-Data}{/BASKET-PR-Data}]
}

Der Zähler setzt das Komma zwischen den Einträgen, aber nicht vor dem ersten. Ohne ihn wäre die Liste kein gültiges JavaScript. Legen Sie ein Template unter dem Namen an, der in WS-AJAXLoadTpl() steht. Darin gehört ein AJAX-Bereich, dessen Name die Kennung aus Schritt 3 trägt.

<WS-Ajax-econda-cross-sell>
   {WS-PRListFromLoadTplLink_data}
      {@WS-PRListFromLoadTplLink_data}
         {PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
            <a href="~WS-EnsureNextLinkContainsURLParams~~PR-Link~~WS-PRListFromLoadTplLink_addlink~">~PR-Name~</a>
         {/PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
      {/@WS-PRListFromLoadTplLink_data}
   {/WS-PRListFromLoadTplLink_data}
</WS-Ajax-econda-cross-sell>

Innerhalb der Klammerung PR-LoadData() stehen alle gewohnten Produkt-Tags zur Verfügung. Die Gestaltung ist damit frei. WS-EnsureNextLinkContainsURLParams sorgt dafür, dass der angehängte Parameter mit dem richtigen Trennzeichen beginnt. Bei SEO-URLs ist das nicht vorhersehbar. Liefert econda keine Produkte, bleibt der Anzeigebereich leer. Wie Sie stattdessen etwas anderes zeigen, steht weiter unten. Referenz: PR-LoadData() · WS-Ajax-”ID” · WS-AJAXLoadTpl() · WS-EnsureNextLinkContainsURLParams · WS-PRListFromLoadTplLink_addlink · WS-PRListFromLoadTplLink_data · WS-PRListFromLoadTplLink_id · WS-PRListFromLoadTplLink_type

Das JavaScript im Einzelnen

Der Code besteht aus zwei Blöcken: der Rückruffunktion und dem Widget.

Stelle	Bedeutung
`ws_getEcondaPayload(data.products)`	erzeugt aus der Antwort von econda die Parameter für den Shop. Die Funktion steckt in der WEBSALE JavaScript-Bibliothek
`if (data.products.length == 0) return;`	bricht ab, wenn econda nichts geliefert hat, und spart den überflüssigen Aufruf an den Shop
`~WS-AJAXLoadTpl(...)~`	das Template, über das die Empfehlungen dargestellt werden
`type: 'websale'`	muss immer so stehen
`callback`	der Name der Rückruffunktion aus dem ersten Block
`accountId` und `id`	Account-ID und Widget-ID von econda
`context`	der Zusammenhang, siehe Schritt 4

Für mehrere Widgets auf einer Seite wird der zweite Block wiederholt, jeweils mit einer eigenen Rückruffunktion und einem eigenen Template. Verwenden Sie ausnahmsweise dasselbe Template, muss der Name des AJAX-Bereichs darin je Widget ausgetauscht werden, beispielsweise über einen One-Time-Parameter. Im econda-Kontrollpanel legen Sie fest, welche Art von Daten ein Widget liefert, beispielsweise Topseller oder “zusammen gekauft”. Die Entscheidung, welches Widget auf welcher Seite erscheint, fällt also dort und nicht im Template.

Eine Ersatzanzeige einbauen

Liefert econda nichts, bleibt die Stelle im Auslieferzustand leer. Statt der Lücke lässt sich etwas anderes zeigen, beispielsweise die Cross Links des Shops.

Schritt 1: Das JavaScript anpassen

Zwei Änderungen: Der Abbruch entfällt, damit das Template auch ohne econda-Daten geladen wird. Und an das Tag wird ein One-Time-Parameter angehängt, der den aktuellen Produktindex an das Template übergibt.

<script type="text/javascript">
window.econda.ready(() => {

   function econda_callback(targetElement, data, templateName) {
      var payload = ws_getEcondaPayload(data.products);

      ws_AJAXloadTemplatePOST('~WS-AJAXLoadTpl(incl_econda_cross_sell.htm)~&otp1=~PR-ProdIndex~', '~WS-Charset~',
         ws_AJAXloadEcondaStart, ws_AJAXloadEcondaError,
         'ws_AJAXloadEcondaResponseSuccess()', 'ws_AJAXloadEcondaResponseError()', payload);
   }

   ...

});
</script>

Die positive Klammerung zeigt die Empfehlungen von econda, die negative den Ersatz.

<WS-Ajax-econda-cross-sell>

   <!-- Empfehlungen von econda -->
   {WS-PRListFromLoadTplLink_data}
      {@WS-PRListFromLoadTplLink_data}
         {PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
            <a href="~WS-EnsureNextLinkContainsURLParams~~PR-Link~~WS-PRListFromLoadTplLink_addlink~">~PR-Name~</a>
         {/PR-LoadData($WS-PRListFromLoadTplLink_id$,$WS-PRListFromLoadTplLink_type$)}
      {/@WS-PRListFromLoadTplLink_data}
   {/WS-PRListFromLoadTplLink_data}

   <!-- Ersatz: die Cross Links des Shops -->
   {!WS-PRListFromLoadTplLink_data}
      {PR-LoadData($WS-OTP1$,0)}
         {Cat-AdvData($CS-Links,999)}
            {@PR-Data}
               <a href="~PR-Link~">~PR-Name~</a>
            {/@PR-Data}
         {/Cat-AdvData($CS-Links,999)}
      {/PR-LoadData($WS-OTP1$,0)}
   {/!WS-PRListFromLoadTplLink_data}

</WS-Ajax-econda-cross-sell>

Der One-Time-Parameter aus Schritt 1 ist der Grund, warum das Template im Ersatzfall überhaupt weiß, um welches Produkt es geht. Ohne ihn fehlt die Grundlage für die Cross Links.

Mit der Ersatzanzeige wird bei jedem Seitenaufruf ein AJAX-Aufruf an den Shop abgesetzt, auch wenn econda nichts liefert. Das ist der Preis dafür, dass die Stelle nie leer bleibt.

Referenz: WS-OTPX() · Cat-AdvData()

Empfehlungen in einem Slider zeigen

Bei vielen Empfehlungen ist ein Slider übersichtlicher. Die Einbindung läuft wie oben, nur der Aufruf der Animation gehört in die Funktion, die nach erfolgreichem Laden aufgerufen wird. Erst dann stehen die Produkte im Anzeigebereich.

function ws_AJAXloadEcondaResponseSuccess() {
   $('#mycarousel_horizontal_econda').slick({
      dots: false,
      arrows: true,
      infinite: false,
      speed: 300,
      slidesToShow: 6,
      slidesToScroll: 6,
      responsive: [
         { breakpoint: 1200, settings: { slidesToShow: 4, slidesToScroll: 4 } },
         { breakpoint: 992,  settings: { slidesToShow: 3, slidesToScroll: 3 } },
         { breakpoint: 660,  settings: { slidesToShow: 2, slidesToScroll: 2 } },
         { breakpoint: 480,  settings: { slidesToShow: 1, slidesToScroll: 1 } }
      ]
   });
}

Rufen Sie die Animation nicht beim Laden der Seite auf. Zu diesem Zeitpunkt ist der Anzeigebereich noch leer, und der Slider hätte nichts zu zeigen.

Von “mit Schnittstelle” auf “ohne Schnittstelle” umstellen

Das Vorgehen entspricht dem beim Tracking: Die alte Einbindung läuft weiter, die neue wird im Design-Testmodus daneben aufgebaut und erst nach erfolgreichem Test getauscht.

Die freie Positionierung der Tracking-Schnittstelle bei WEBSALE freischalten lassen.
Den Inhalt der ws_analyse.js in eine eigene Datei auslagern und aus der ws_analyse.js entfernen.
Diese Datei zusammen mit WS-ExternalStatistics in {!ST-DesignTest} auf allen Seiten einbinden.
Die neue Einbindung in ST-DesignTest aufbauen.
Im Design-Testmodus prüfen.
Die Klammerungen entfernen und die alte Einbindung abräumen.

Wegweiser: Integration von econda

Wegweiser

Wie es zusammenspielt

Zwei Wege

Vorbereitung

Einrichten

Schritt 1: JavaScript-Dateien einbinden

Schritt 2: Funktionen in die Design-Komponente aufnehmen

Schritt 3: Den Anzeigebereich festlegen

Schritt 4: Das JavaScript einbinden

Der Zusammenhang je Seite

Schritt 5: Das Widget-Template anlegen

Das JavaScript im Einzelnen

Eine Ersatzanzeige einbauen

Schritt 1: Das JavaScript anpassen

Schritt 2: Das Widget-Template anpassen

Empfehlungen in einem Slider zeigen

Von “mit Schnittstelle” auf “ohne Schnittstelle” umstellen

Verwandte Themen

​Wie es zusammenspielt

​Zwei Wege

​Vorbereitung

​Einrichten

​Schritt 1: JavaScript-Dateien einbinden

​Schritt 2: Funktionen in die Design-Komponente aufnehmen

​Schritt 3: Den Anzeigebereich festlegen

​Schritt 4: Das JavaScript einbinden

​Der Zusammenhang je Seite

​Schritt 5: Das Widget-Template anlegen

​Das JavaScript im Einzelnen

​Eine Ersatzanzeige einbauen

​Schritt 1: Das JavaScript anpassen

​Schritt 2: Das Widget-Template anpassen

​Empfehlungen in einem Slider zeigen

​Von “mit Schnittstelle” auf “ohne Schnittstelle” umstellen

​Verwandte Themen

Wie es zusammenspielt

Zwei Wege

Vorbereitung

Einrichten

Schritt 1: JavaScript-Dateien einbinden

Schritt 2: Funktionen in die Design-Komponente aufnehmen

Schritt 3: Den Anzeigebereich festlegen

Schritt 4: Das JavaScript einbinden

Der Zusammenhang je Seite

Schritt 5: Das Widget-Template anlegen

Das JavaScript im Einzelnen

Eine Ersatzanzeige einbauen

Schritt 1: Das JavaScript anpassen

Schritt 2: Das Widget-Template anpassen

Empfehlungen in einem Slider zeigen

Von “mit Schnittstelle” auf “ohne Schnittstelle” umstellen

Verwandte Themen