Produktempfehlungen auf der Website

Das Web SDK kann Produktempfehlungen auf Ihrer Website anzeigen: auf einer Produktseite, im Warenkorb, auf einer Katalogseite oder auf einer 404-Seite. Die Produkte stammen aus dem Produktkatalog der Anwendung. Es gibt zwei Möglichkeiten, sie anzuzeigen:

Widget: Fügen Sie ein Element mit dem Attribut data-pw-recommendations hinzu, und das SDK füllt es mit einem Produktraster.
Headless-API: Rufen Sie Pushwoosh.recommendations.fetch auf und rendern Sie die Produkte mit Ihrem eigenen Markup.

Ein Live-Beispiel ist der Pushwoosh-Demo-Shop unter pushon.pushwoosh.com. Er hat einen Widget-Block auf der 404-Seite und Headless-Blöcke auf der Produktseite und im Warenkorb.

Voraussetzungen

Web SDK 3.96.0 oder höher, geladen vom Pushwoosh-CDN wie im Web Push SDK 3.0-Leitfaden beschrieben. Das npm-Paket web-push-notifications enthält die Empfehlungen noch nicht.
Produkte im Produktkatalog der Anwendung.
Für die Anwendung aktivierte Empfehlungen auf der Website. Siehe Empfehlungen auf der Website aktivieren.

Empfehlungen auf der Website aktivieren

Jede Anwendung muss separat aktiviert werden, da der Feed, der die Blöcke ausliefert, öffentlich ist und kein API-Token benötigt. Bis dahin antwortet der Feed mit einem Fehler und die Blöcke bleiben leer.

So aktivieren Sie Empfehlungen auf der Website im Control Panel:

Gehen Sie für die Anwendung zu Inhalt → Produktkatalog.
Klicken Sie auf On-site recommendations.
Aktivieren Sie Show recommendations on my website.
Geben Sie unter Website domains die Domains der Websites ein, auf denen die Blöcke angezeigt werden sollen, eine pro Zeile. Zum Beispiel shop.example.com.
Klicken Sie auf Speichern.

Bereich On-site recommendations mit aktiviertem Schalter Show recommendations on my website, einer Domain unter Website domains und der Schaltfläche Save

Nach dem Speichern:

Website domains zeigt die Domains so an, wie Pushwoosh sie gespeichert hat: mit hinzugefügtem https://, in Kleinbuchstaben und ohne Duplikate. Prüfen Sie die Liste auf Tippfehler.
Blöcke werden nur auf den aufgeführten Websites geladen. Wenn Sie Website domains leer lassen, werden Blöcke auf jeder Website geladen.
Die Änderung wird innerhalb einer Minute wirksam.

Wenn Sie keinen Zugriff auf das Control Panel haben, bitten Sie den Pushwoosh-Support oder Ihren Customer Success Manager, die Empfehlungen auf der Website für die Anwendung zu aktivieren. Geben Sie den Anwendungscode und die Domains Ihrer Websites an.

Empfehlungsstrategien

Strategie	Was sie anzeigt	Voraussetzung
`viewed`	Produkte, die dieser Besucher kürzlich angesehen hat. Bei einem angemeldeten Besucher stehen die unter seiner User ID angesehenen Produkte an erster Stelle.	Mit `trackProductView` gesendete Produktaufrufe.
`bestsellers_30d`	Die meistverkauften Produkte der Anwendung in den letzten 30 Tagen. Ausverkaufte Produkte werden übersprungen.	Bestell-Events mit den Artikeln der Bestellung.
`also_bought`	Produkte, die häufig zusammen mit einem bestimmten Produkt gekauft oder angesehen werden. Ausverkaufte Produkte werden übersprungen.	Mit `trackProductView` gesendete Produktaufrufe, Bestell-Events oder andere Events, die eine Produkt-ID enthalten. Siehe Produktaktivität verfolgen. Die Anfrage benötigt eine Produkt-ID.

Wenn eine Strategie nichts anzuzeigen hat, liefert der Feed stattdessen die Fallback-Strategie aus. Die Fallback-Strategie ist standardmäßig bestsellers_30d. Setzen Sie sie auf none, um stattdessen eine leere Antwort zu erhalten. Die Antwort gibt immer an, welche Strategie tatsächlich ausgeliefert wurde, sodass Sie den Titel des Blocks ändern können.

Produktaufrufe verfolgen

Die Strategien viewed und also_bought verwenden Produktaufrufe. Rufen Sie auf jeder Produktseite trackProductView auf, nachdem das SDK bereit ist:

Pushwoosh.push(() => {
  Pushwoosh.trackProductView({
    id: 'SKU-123',
    name: 'Linen shirt',
    price: 49.9,
    currency: 'USD',
    category: 'Shirts',
    url: 'https://shop.example.com/linen-shirt',
    imageUrl: 'https://shop.example.com/img/linen-shirt.jpg',
  });
});

Nur id ist erforderlich. Verwenden Sie dieselbe Produkt-ID wie in Ihrem Produktkatalog. Das SDK sendet ein PW_ProductView-Event und überspringt wiederholte Aufrufe desselben Produkts innerhalb von 30 Sekunden, sodass ein Neuladen der Seite nicht als zweiter Aufruf zählt.

Bestell-Events senden

Die Strategie bestsellers_30d zählt nur Verkäufe aus Bestell-Events und ist die Standard-Fallback-Strategie für jeden Block. Wenn ein Besucher eine Bestellung aufgibt, senden Sie PW_OrderCreated:

Pushwoosh.push((api) => {
  api.postEvent('PW_OrderCreated', {
    orderId: 'ORDER-10293',
    items: [
      { productId: 'SKU-123', quantity: 1 },
      { productId: 'SKU-456', quantity: 2 },
    ],
  });
});

orderId ist erforderlich, da eine Bestellung ohne diese ID nicht gezählt wird. Verwenden Sie in items dieselben Produkt-IDs wie in Ihrem Produktkatalog. Wenn sich eine Bestellung ändert, senden Sie PW_OrderUpdated mit derselben orderId und denselben items. Wie Sie Bestell-Events stattdessen von Ihrem Server senden, erfahren Sie unter Bestseller: Fügen Sie Artikel zu Ihren Bestell-Events hinzu.

Fügen Sie dort, wo der Block erscheinen soll, ein Element mit dem Attribut data-pw-recommendations hinzu. Das SDK lädt das Widget nur auf Seiten, die ein solches Element enthalten.

<div
  data-pw-recommendations
  data-pw-strategy="also_bought"
  data-pw-product-id="SKU-123"
  data-pw-fallback="bestsellers_30d"
  data-pw-limit="4"
  data-pw-title="Bought together"
  data-pw-fallback-title="Popular right now"
  data-pw-block="pdp-also-bought"
  data-pw-min-height="260"
></div>

Attribut	Beschreibung
`data-pw-recommendations`	Kennzeichnet das Element als Empfehlungsblock. Erforderlich.
`data-pw-strategy`	`viewed`, `bestsellers_30d` oder `also_bought`. Standardwert ist `bestsellers_30d`.
`data-pw-fallback`	Strategie, die ausgeliefert wird, wenn die Hauptstrategie nichts hat: `viewed`, `bestsellers_30d`, `also_bought` oder `none`. Standardwert ist `bestsellers_30d`.
`data-pw-limit`	Anzahl der Produkte, von 1 bis 12. Standardwert ist 6.
`data-pw-product-id`	Das Produkt auf dem Bildschirm. Erforderlich für `also_bought`.
`data-pw-exclude`	Kommagetrennte Produkt-IDs, die nicht angezeigt werden sollen, zum Beispiel die Produkte, die bereits im Warenkorb liegen. Bis zu 50.
`data-pw-block`	Name des Blocks. Er wird zu Produktlinks und Klick-Events hinzugefügt, sodass Sie Blöcke in der Analyse unterscheiden können.
`data-pw-title`	Titel des Blocks.
`data-pw-fallback-title`	Titel, der angezeigt wird, wenn die Fallback-Strategie ausgeliefert wurde, zum Beispiel „Popular right now“ statt „You viewed“.
`data-pw-min-height`	Platz, der während des Ladens des Blocks reserviert wird, um eine Layoutverschiebung zu vermeiden. Eine Zahl wird als Pixel interpretiert. Jede CSS-Längenangabe funktioniert ebenfalls.

Das Widget zeigt Bild, Name und Preis jedes Produkts an und verlinkt auf die Produktseite. Produktlinks enthalten utm_medium=onsite. Ein Klick auf ein Produkt sendet ein PW_RecommendationClick-Event mit dem Namen des Blocks, der Strategie und der Position des Produkts.

Wenn Sie ein data-pw-*-Attribut ändern, wird der Block neu geladen. Aktualisieren Sie zum Beispiel data-pw-product-id, wenn sich das Produkt auf dem Bildschirm ohne Neuladen der Seite ändert.

Blöcke für typische Seiten

Seite	Strategie	Zu setzende Attribute
Produktseite	`also_bought`	`data-pw-product-id` mit dem Produkt auf dem Bildschirm, `data-pw-exclude` mit derselben ID
Warenkorb	`also_bought`	`data-pw-product-id` mit einem Produkt im Warenkorb, `data-pw-exclude` mit allen Produkten im Warenkorb
Katalog- oder Startseite	`bestsellers_30d`	—
404-Seite	`viewed`	`data-pw-fallback="bestsellers_30d"` und `data-pw-fallback-title`, damit Erstbesucher beliebte Produkte sehen

Blockzustände

Das Widget setzt das Attribut data-pw-state auf dem Blockelement:

loading: Die Produkte werden geladen.
ready: Die Produkte werden angezeigt.
empty: Weder die Strategie noch die Fallback-Strategie hat Produkte. Der Block bleibt leer.
error: Die Produkte wurden nicht geladen. Der Block bleibt leer.

Verwenden Sie den Zustand, um Ihren eigenen Rahmen oder Ihre eigene Überschrift um einen leeren Block auszublenden:

.recommendations-frame:has([data-pw-state="empty"], [data-pw-state="error"]) {
  display: none;
}

Das Widget wird in einem Shadow DOM gerendert, sodass das CSS Ihrer Website seinen Inhalt nicht erreicht. Setzen Sie stattdessen diese Custom Properties auf dem Blockelement:

Eigenschaft	Beschreibung	Standardwert
`--pw-reco-font`	Schriftfamilie	Von der Seite übernommen
`--pw-reco-accent`	Preisfarbe	Aktuelle Textfarbe
`--pw-reco-radius`	Eckenradius der Produktbilder	`8px`
`--pw-reco-columns`	Anzahl der Rasterspalten. Auf Bildschirmen mit einer Breite von bis zu 600px hat das Raster immer 2 Spalten.	So viele wie passen

[data-pw-recommendations] {
  --pw-reco-columns: 4;
  --pw-reco-radius: 0;
  --pw-reco-accent: #337ab7;
}

Für eine feinere Gestaltung sind der Titel, das Raster und jede Produktkarte als CSS Parts title, grid und card verfügbar, zum Beispiel [data-pw-recommendations]::part(card).

Single-Page-Anwendungen

Standardmäßig sucht das SDK einmal nach Blöcken, wenn es bereit ist. Wenn Ihre Website Blöcke erst später rendert, zum Beispiel bei der Navigation in einer Single-Page-Anwendung, setzen Sie im init-Aufruf recommendations.spa auf true:

Pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX',
  // other initialization parameters...
  recommendations: {
    spa: true,
  },
}]);

Ersetzen Sie XXXXX-XXXXX durch Ihren Anwendungscode.

Das SDK beobachtet die Seite dann weiterhin und lädt das Widget, sobald ein Block erscheint.

Um das Widget auch dann deaktiviert zu lassen, wenn eine Seite data-pw-recommendations-Elemente enthält, setzen Sie recommendations.widget auf false. Die Headless-API funktioniert weiterhin.

Blöcke mit eigenem Markup rendern

Verwenden Sie die Headless-API, wenn das Layout des Widgets nicht zu Ihrem Design passt. Fordern Sie Produkte mit Pushwoosh.recommendations.fetch an und melden Sie Klicks mit Pushwoosh.recommendations.trackClick:

Pushwoosh.push(async () => {
  const request = {
    strategy: 'also_bought',
    productId: 'SKU-123',
    exclude: ['SKU-123'],
    fallback: 'bestsellers_30d',
    limit: 4,
    block: 'pdp-also-bought',
  };
  const { items, strategy } = await Pushwoosh.recommendations.fetch(request);

  const title = strategy === request.strategy ? 'Bought together' : 'Popular right now';
  renderBlock(title, items, (item, index) => {
    Pushwoosh.recommendations.trackClick({
      block: request.block,
      strategy,
      productId: item.id,
      position: index + 1,
    });
  });
});

fetch akzeptiert dieselben Parameter wie die Widget-Attribute: strategy, fallback, limit, productId, exclude und block. Es gibt zurück:

items: die Produkte. Jedes hat id, title, description, image_url, url, price, price_formatted, old_price_formatted (nur bei einem reduzierten Produkt), currency, category und sku.
strategy: die tatsächlich ausgelieferte Strategie. Sie weicht von der angeforderten ab, wenn die Fallback-Strategie ausgeliefert wurde, und ist none, wenn die Antwort leer ist.

Wenn die Anfrage fehlschlägt, löst fetch einen Fehler aus. Fangen Sie ihn ab und blenden Sie den Block aus.

trackClick sendet das Event PW_RecommendationClick. Es wird auch dann zugestellt, wenn der Klick eine andere Seite öffnet. position ist die Position des Produkts im Block, beginnend bei 1.

Verhalten ohne Einwilligung zur Kommunikation

Wenn die Kommunikation mit Pushwoosh für den Besucher deaktiviert ist, zum Beispiel mit communicationEnabled: false im init-Aufruf (siehe Benutzerzustimmung für Web-Push-Benachrichtigungen verwalten):

trackProductView und trackClick senden nichts.
Blöcke zeigen weiterhin Produkte an, aber die Anfrage identifiziert den Besucher nicht. Die Strategie viewed hat keinen Verlauf, den sie verwenden kann, daher wird die Fallback-Strategie ausgeliefert.

Sobald der Besucher die Kommunikation aktiviert, werden Produktaufrufe und Klicks wieder verfolgt.