Personalisierung mit Shopper Context

Mit Shopper Context können Sie Einkaufserlebnisse personalisieren, indem Sie Ihre Werbeaktionen, Preise, Produktempfehlungen und Inhalte, die auf Ihrer Website bereitgestellt werden, auf der Grundlage des Käuferverhaltens anpassen. Wenn Käufer beispielsweise Ihre Website von einem mobilen Gerät aus besuchen, bieten Sie ihnen einen Rabatt von 10% % an.

Der benannte useUpdateShopperContext Hook wird verwendet, um den Shopper-Kontext auf einer PWA-Kit-Website (Progressive Web App) festzulegen. Die Standardimplementierung von Shopper Context in PWA Kit ist eine Demonstration der Personalisierungsfunktionen. In der in diesem Leitfaden beschriebenen Demo-Implementierung verwenden wir Abfrageparameter, um ein Personalisierungsschema zu aktivieren, das den Inhalt der Product Listing Page (PLP) und Werbeaktionen ändert. Erweitern Sie unsere Implementierung mit benutzerdefiniertem Code, der zu Ihrer eigenen Personalisierungsstrategie passt.

In diesem Leitfaden wird unsere Demo-Implementierung von Shopper Context erläutert und erläutert, wie Sie sie konfigurieren und erweitern, um die Personalisierungsstrategie für Ihre PWA Kit-Website zu unterstützen. Die in diesem Leitfaden beschriebene Funktionalität wird in einer Hybrid-Storefront nicht unterstützt.

Es wird empfohlen, die Personalisierung in einer Nicht-Produktionsumgebung zu testen, bevor Sie Ihre Änderungen in der Produktion bereitstellen. Sie können Ihre Personalisierung auch mit der Storefront-Vorschau in der Vorschau anzeigen.

Ersetzen Sie vor dem Ausführen der Befehle in dieser Anleitung alle Platzhalter durch tatsächliche Werte. Platzhalter haben das folgende Format: $PLACEHOLDER.

Anwendungsbeispiel

Dieses Video zeigt ein Beispiel für die Personalisierung von Inhalten und Werbeaktionen mit der Demo-Implementierung von Shopper Context.

Shopper Context in PWA Kit

Voraussetzungen

So verwenden Sie die Personalisierung mit Shopper Context:

Erstellen Sie Ihre Website mit:
- Die React App-Vorlage für den Einzelhandel
- React App für den Einzelhandel Version 5.0.0 oder höher
Du hast die Rolle des Account Managers als Business Manager Administrator. Wenn Sie diese Rolle nicht haben, bitten Sie Ihren Account Manager-Administrator, sie Ihnen zuzuweisen. Weitere Informationen finden Sie unter Managing Account Manager for Salesforce B2C Commerce Users (Verwalten des Account Manager für Salesforce B2C Commerce-Benutzer).
Wenn Sie dies noch nicht getan haben, richten Sie die Autorisierung für Shopper-APIs ein.
Richten Sie Ihre Website basierend auf den Arten der Personalisierung ein, die Sie verwenden möchten. Richte zum Beispiel Kundengruppen im Business Manager ein, um Regeln für personalisierte Preise, Produkte oder Werbeaktionen anzuwenden.

Konfigurieren des Käuferkontexts

1. Erstellen eines privaten SLAS Client

Erstellen Sie in der SLAS-Admin-Benutzeroberfläche (Shopper Login and API Access) einen privaten SLAS-Client. Siehe Erstellen eines SLAS-Clients.

2. Aktivieren von Shopper-Kontext und Hooks

Im Business Manager:

Käuferkontext aktivieren Weitere Informationen finden Sie unter Festlegen und Abrufen des Käuferkontexts.
Erfüllen Sie diese Hooks-Voraussetzungen.

3. Laden Sie die shopper_context_hooks Kassette hoch

Die shopper_context_hooks Cartridge fungiert als Positivliste, um sicherzustellen, dass nur der Kontext, den Sie für Personalisierungskampagnen verwenden möchten, vom Client aus festgelegt werden kann. Im Business Manager:

Fügen Sie es dem Cartridge-Pfad Ihrer Website hinzu shopper_context_hooks. Dieser Schritt gewährleistet die Websitesicherheit, indem verhindert wird, dass nicht autorisierte Mitglieder Ihres Websiteentwicklungsteams alle Shopper Context-Bereiche festlegen.
- Wechseln Sie zu Verwaltungsstandorte > > Verwalten von Websites.
- Wählen Sie den Standort aus, an dem Sie diese Kassette verwenden möchten. Beispiel für einen Site-Bezeichner: RefArch.
- Klicken Sie auf die Registerkarte Einstellungen.
- Fügen Sie im Feld Patronen den neuen Patronenpfad shopper_context_hookshinzu. Fügen Sie den neuen Patronenpfad vor dem Pfad für app_storefront_baseein. Beispiel: shopper_context_hooks:app_storefront_base
Installieren Sie die Kassette und laden Sie sie hoch.
- Klonen Sie das Repository für Shopper Context-Hooks. Der Name des Verzeichnisses auf oberster Ebene lautet shopper_context_hooks.
- Um Paketabhängigkeiten zu installieren, führen Sie aus dem shopper_context_hooks Verzeichnis Folgendes aus:
  
  npm install
- Konfigurieren von Client-IDs durch Aktualisieren CLIENT_REGISTRY in cartridges/shopper_context_hooks/cartridge/scripts/config/clientRegistry.js
- Erstellen Sie eine dw.json Datei in dem shopper_context_hooks Verzeichnis. Ersetzen Sie die $ Zeichenfolgen in diesem Beispiel durch tatsächliche Werte, oder legen Sie die entsprechenden Umgebungsvariablen fest.
1{ 2 "hostname": "$HOST.demandware.net", 3 "username": "$USERNAME", 4 "password": "$PASSWORD", 5 "code-version": "$VERSION" 6}
- Führen Sie im shopper_context_hooks Verzeichnis Folgendes aus:
  
  npm run uploadCartridge

Weitere Informationen zum Hochladen der Cartridge finden Sie unter Hochladen von Code für Storefront Reference Architecture (SFRA).

4. Konfigurieren Sie benutzerdefinierte Website-Voreinstellungen.

Konfigurieren Sie die Clientregistrierung, indem Sie eine benutzerdefinierte Standorteinstellung hinzufügen. Importieren Sie dazu die system-objecttype-extensions.xml im Business Manager.

Wechseln Sie zu Administration > Site Entwicklung Import > & Export.
Klicken Sie unter “Exportdateien importieren” & auf “Hochladen”.
Klicken Sie auf Datei auswählen.
Navigieren Sie zu meta/meta.
Auswählen system-objecttype-extensions.xml
Klicken Sie auf Hochladen.
Nachdem die Datei hochgeladen wurde, klicken Sie auf Zurück.
Klicken Sie unter Metadaten auf Importieren.
Wählen Sie aus system-objecttype-extensions.xml und klicken Sie auf Weiter.
Nachdem die Datei validiert wurde, klicken Sie auf Importieren.

5. Aktualisieren Sie die Cartridge CLIENT_REGISTRY über die shopper_context_hooks Site-Einstellungen

So aktualisierst du deine Konfiguration im Business Manager:

Gehen Sie zu Merchant Tools > Website-Einstellungen > Benutzerdefinierte Einstellungen > Shopper Context Hooks Einstellungen.
Aktualisieren Sie das Feld Client Registry mit einer JSON-Konfiguration. Geben Sie Ihre Client-ID ein, die Sie in Schritt 1 eingerichtet haben, und die Shopper-Kontextschlüssel, die der Client festlegen kann. Sie können einen beliebigen Schlüssel eingeben, der im ShopperContext-Typ verfügbar ist. Verwenden Sie für Client-IDs, die Berechtigungen zum Festlegen aller Shopper Context-Schlüssel erfordern, wie z. B. die Client-ID, die für Storefront Preview verwendet wird, den Schlüssel all.

In diesem Beispiel legen wir Shopper-Kontextschlüssel für zwei verschiedene Client-IDs fest.

Anforderungen von der Client-ID aaaaaaaa-8536-4a39-acbb-8e7f1759f901 können nur die 3 angegebenen Schlüssel im Shopper Context festlegen.
Anforderungen von der Client-ID bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff können alle Schlüssel im Shopper Context setzen.

1{
2  "aaaaaaaa-8536-4a39-acbb-8e7f1759f901": ["sourceCode", "geoLocation", "deviceType"],
3  "bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff": ["all"]
4}

6. Hinzufügen des Kontextbereichs "Käufer"

Fügen Sie dem SLAS Private Client diesen Shopper-Kontextbereich hinzu: sfcc.shopper-context.rw. Siehe Erstellen eines SLAS-Clients.

Demo-Implementierung von Shopper Context

In unserer Demo von Shopper Context wird der sourceCode Abfrageparameter “set through” verwendet, um inhaltliche Änderungen auf einem PLP und neue Werbeaktionen für eine bestimmte Kundengruppe auszulösen. Sie können die Demo in Aktion auf einem PLP sehen, indem Sie sie zur URL hinzufügen &sourcecode=instagram.

In unserer Demo verwenden wir den useUpdateShopperContext Hook, um eine Personalisierungskampagne auszulösen. Fügen Sie in Ihrem Projekt Shopper Context-Abfrageparameter in der SHOPPER_CONTEXT_SEARCH_PARAMS Konstante in app/constants.js hinzu oder entfernen Sie sie, um Ihre eigenen Personalisierungen zu erzielen, die durch Abfrageparameter ausgelöst werden.

Wenn Sie z. B. benutzerdefinierte Attribute hinzugefügt haben, die mithilfe von Abfrageparametern festgelegt werden sollen, fügen Sie diese als benutzerdefinierte Abfrageparameter in app/constants.jsein. In diesem Beispiel fügen wir die folgenden Parameter hinzu: deviceType und storeId.

1export const SHOPPER_CONTEXT_SEARCH_PARAMS = {
2   // These are the default query parameters.
3    sourceCode: {paramName: 'sourceCode'},
4    geoLocation: {
5        city: {paramName: 'city'},
6        country: {paramName: 'country'},
7        countryCode: {paramName: 'countryCode'},
8        latitude: {paramName: 'latitude', type: SHOPPER_CONTEXT_FIELD_TYPES.DOUBLE},
9        longitude: {paramName: 'longitude', type: SHOPPER_CONTEXT_FIELD_TYPES.DOUBLE},
10        metroCode: {paramName: 'metroCode'},
11        postalCode: {paramName: 'postalCode'},
12        region: {paramName: 'region'},
13        regionCode: {paramName: 'regionCode'}
14    },
15    // These are examples of custom query parameters that you can optionally add.
16    customQualifiers: {
17        deviceType: {paramName: 'deviceType'}
18    },
19    assignmentQualifiers: {
20        storeId: {paramName: 'storeId'}
21    }
22}, // More code here...

Erweitern des Käuferkontexts

Optional können Sie eine Personalisierung hinzufügen, die über das hinausgeht, was in der Demo-Implementierung von Shopper Context enthalten ist. Sie können beispielsweise Inhalte basierend auf der Geolokalisierung eines Käufers personalisieren.

In diesem Beispielcode erhalten wir die Geolokalisierung eines Käufers. Nachdem Sie die Geolokalisierung erhalten haben, können Sie die von Ihnen gewählte Personalisierung anwenden. Beispiel:

Für New York, USA: 20% % Rabatt auf Damenoberteile.
Für Boston, USA: 15% Rabatt auf Damenoberteile.

1// ... Default imports in the hook
2import {useEffect, useState} from 'react'
3
4export const useUpdateShopperContext = () => {
5    // ... Default code in the hook
6    const [location, setLocation] = useState({latitude: null, longitude: null})
7
8     // Get the latitude and longitude of the shopper's geolocation using the browser's navigator.geolocation API.
9    const fetchLocation = () => {
10        if (typeof navigator !== 'undefined' && navigator.geolocation) {
11            navigator.geolocation.getCurrentPosition(
12                (position) => {
13                    setLocation({
14                        latitude: position.coords.latitude,
15                        longitude: position.coords.longitude
16                    })
17                },
18                (err) => {
19                    console.error(err.message) // Handle errors gracefully
20                },
21                {
22                    enableHighAccuracy: true, // Try to get the most accurate location
23                    timeout: 10000, // Time in milliseconds before timing out
24                    maximumAge: 60000 // Cache the location for 1 minute
25                }
26            )
27        } else {
28            console.error('Geolocation is not supported by this browser.')
29        }
30    }
31
32    fetchLocation()
33
34    // Update the Shopper Context when the latitude and/or longitude changes.
35    useEffect(() => {
36        if (location.latitude && location.longitude) {
37            const newShopperContext = {
38                geoLocation: {
39                    latitude: location.latitude,
40                    longitude: location.longitude
41                }
42            }
43            handleShopperContextUpdate(shopperContext, newShopperContext)
44        }
45    }, [location.latitude, location.longitude])
46}

Problembehandlung im Käuferkontext

Dieser Abschnitt enthält einen Lösungsvorschlag für einen häufigen Fehler, der bei der Verwendung von Shopper Context auftreten kann.

Falsche oder fehlende Personalisierung

Mögliche Ursache: Die Personalisierung im Business Manager ist nicht richtig konfiguriert.

Vorgeschlagene Lösung: Stelle sicher, dass der von dir festgelegte Kontextauslöser einer Personalisierungskampagne im Business Manager zugewiesen ist.