Empfehlungs-Widgets auf der Website

Ein Widget ist ein fertiger Produktblock auf der Website: „Das könnte Ihnen gefallen“ auf der Startseite, „Zusammen gekauft“ auf der Produktseite, „Zuletzt angesehen“ im Warenkorb. Sie richten es in OneTrace.pro ein und fügen einmalig einen kurzen Code in die Website ein. Danach ändern Sie Art, Gestaltung und Aktivierung, ohne die Website anzupassen.

Voraussetzungen sind ein installierter Tracker (Website anbinden), ein Produktkatalog sowie Ereignisse zu Produktaufrufen, Warenkorb und Käufen (Empfehlungen und Produktkatalog). Widgets erstellen und ändern können „Inhaber“, „Administrator“ und „Manager“.

Widget erstellen

1. Öffnen Sie Kommunikation → Website, Tab Widgets.
2. Klicken Sie auf Widget erstellen.
3. Füllen Sie links die Einstellungen aus – rechts sehen Sie sofort die Vorschau.
4. Klicken Sie auf Speichern.

Einstellungen

Vorschau

Die Vorschau stellt das Widget genauso dar wie auf der Website, mit echten Produkten aus Ihrem Katalog. Für „Zusammen angesehen“ und Ähnliche wird ein Beispiel verwendet – das erste verfügbare Produkt, dessen ID über der Vorschau steht. Gibt es keine passenden Produkte, werden graue Platzhalter angezeigt, damit Sie die Gestaltung beurteilen können. Der Umschalter Desktop / Smartphone verengt die Fläche auf Smartphone-Breite.

Auf der Website passt sich das Layout an die Breite des verfügbaren Platzes an, nicht an die Bildschirmbreite: In einer schmalen Spalte und auf dem Smartphone stehen die Karten zu zweit in einer Reihe. Schriftart und Textfarbe übernimmt das Widget von der Website.

Code für die Website

Jedes Widget in der Liste hat einen Block Code für die Website. Fügen Sie ihn in die Seitenvorlage dort ein, wo der Block erscheinen soll:

<div data-cdp-widget="a1b2c3d4e5f6" data-item="SKU-1"></div>

Attribute:

• data-item – ID des Produkts der Seite oder der Produkte im Warenkorb, durch Komma getrennt: data-item="SKU-1,SKU-7". Pflicht für die Arten „Zusammen angesehen“, „Zusammen gekauft“ und „Ähnlich“ – setzen Sie es aus der Seitenvorlage ein.
• data-category – Kategorie-ID für beliebte Produkte, wenn auf verschiedenen Seiten unterschiedliche Kategorien gebraucht werden.
• data-exclude – durch Komma getrennte IDs von Produkten, die nicht angezeigt werden sollen, etwa solche, die bereits im Warenkorb liegen.

Persönliche und zuletzt angesehene Produkte werden anhand des Besuchers ausgewählt, dafür ist data-item nicht nötig.

Gibt es keine passenden Produkte, bleibt der Platz auf der Seite leer – das Layout bricht nicht.

Aktivieren und deaktivieren

Der Schalter Auf der Website anzeigen in der Widget-Karte schaltet es ab, ohne die Website zu ändern: Der Status wechselt zu „Pausiert“, der Block auf der Seite wird geleert. Schalten Sie es wieder ein, kehren die Produkte zurück. Die Schaltfläche mit dem Papierkorb löscht das Widget vollständig: Auf der Website wird es nicht mehr angezeigt.

Die Schaltfläche mit dem Stift öffnet Widget bearbeiten. Änderungen sind beim nächsten Laden der Seite auf der Website sichtbar, den Code müssen Sie nicht ändern.

Statistik

Unter dem Namen des Widgets steht die Statistik der letzten 30 Tage:

Die Gesamtwirkung der Empfehlungen auf der Website nach Art finden Sie im Bereich Empfehlungen.

Single-Page-Websites

Der Tracker findet Widgets selbst nach dem Laden der Seite, beim Erscheinen neuer Elemente und bei einer Änderung von data-item. Auf Websites mit React, Vue und Ähnlichem genügt es daher, das Attribut zu ändern – der Block wird neu gezeichnet.

Müssen die Produkte ohne Änderung der Attribute aktualisiert werden, etwa nach einer Änderung des Warenkorbs, rufen Sie Folgendes auf:

cdp.widgets({ force: true });

Eigener Code statt Widget

Entwickler können einen Empfehlungsblock direkt aus dem Code ausgeben, ohne Einrichtung im Admin-Bereich:

window.addEventListener('load', () => {
  cdp.renderRecommendations('#recs', {
    type: 'viewed_with', item: 'SKU-1', title: 'Zusammen angesehen', layout: 'carousel', columns: 4,
  });
});

Der Block sieht genauso aus wie ein Widget, Impressionen und Klicks werden automatisch erfasst. Sie können ihn schon vor dem Laden des Trackers aufrufen: Der Aufruf wartet in der Warteschlange. Das Element muss bereits auf der Seite sein, deshalb wartet das Beispiel auf das Ereignis load. Ein leeres Ergebnis leert das Element. Farbe, Eckenradius und Schaltfläche richten Sie bequemer im Widget im Admin-Bereich ein.