Con Shopper Context è possibile personalizzare le esperienze di acquisto adattando promozioni, prezzi, consigli sui prodotti e contenuti forniti sul sito in base al comportamento degli acquirenti. Ad esempio, se gli acquirenti visitano il tuo sito da un dispositivo mobile, offri loro uno sconto del 10% %.
L’hook indicato useUpdateShopperContext viene utilizzato per impostare il contesto acquirente in un sito Progressive Web App (PWA) Kit. L’implementazione predefinita di Shopper Context in PWA Kit è una dimostrazione delle funzionalità di personalizzazione. Nell’implementazione demo descritta in questa guida, vengono utilizzati i parametri di query per attivare uno schema di personalizzazione che modifica il contenuto e le promozioni della pagina elenco prodotti (PLP). Estendi la nostra implementazione con codice personalizzato in base alla tua strategia di personalizzazione.
Questa guida spiega la nostra implementazione demo di Shopper Context e come configurarla ed estenderla per potenziare la strategia di personalizzazione per il tuo sito PWA Kit. La funzionalità descritta in questa guida non è supportata in uno storefront ibrido.
È consigliabile testare la personalizzazione in un ambiente non di produzione prima di distribuire le modifiche all’ambiente Production. È inoltre possibile visualizzare l’anteprima della personalizzazione utilizzando Anteprima storefront.
Prima di eseguire i comandi di questa guida, sostituire tutti i segnaposto con valori effettivi. I segnaposto sono formattati nel seguente modo: $PLACEHOLDER.
Esempio di utilizzo
Questo video mostra un esempio di come personalizzare contenuti e promozioni con l’implementazione demo di Shopper Context.
Contesto acquirente in PWA Kit
Prerequisiti
Per utilizzare la personalizzazione con Buyerper Context:
Impostare il sito in base ai tipi di personalizzazione che si desidera utilizzare. Ad esempio, impostare i gruppi clienti in Business Manager per l’applicazione di regole per la personalizzazione di prezzi, prodotti o promozioni.
Configurazione del contesto acquirente
1. Creazione di un client privato SLAS
Nell’interfaccia utente di amministrazione SLAS (Shopper Login and API Access), creare un client privato SLAS. Vedere Creazione di un client SLAS.
2. Abilitazione del contesto e degli hook dell'acquirente
Il shopper_context_hooks cartridge funge da whitelist per garantire che solo il contesto che si desidera utilizzare per le campagne di personalizzazione possa essere impostato dal client. In Business Manager:
Da aggiungere shopper_context_hooks al percorso cartridge del sito. Questo passaggio garantisce la sicurezza del sito impedendo a membri non autorizzati del team di sviluppo del sito di impostare tutti gli ambiti del contesto acquirente.
Passare ad Amministrazione > , Siti > , Gestione dei siti.
Selezionare il sito in cui si desidera utilizzare il cartridge. Esempio di identificatore del sito: RefArch.
Fare clic sulla scheda Impostazioni.
Nel campo Carucce, aggiungere il nuovo percorso shopper_context_hookscartuccia. Aggiungere il nuovo percorso della cartuccia prima del percorso per app_storefront_base.
Ad esempio:shopper_context_hooks:app_storefront_base
Per installare le dipendenze dei shopper_context_hooks pacchetti, dalla directory eseguire:
npm install
Configurare gli ID client eseguendo l’aggiornamento CLIENT_REGISTRY in cartridges/shopper_context_hooks/cartridge/scripts/config/clientRegistry.js
Creare un dw.json file nella shopper_context_hooks directory. Sostituire le $ stringhe in questo esempio con valori effettivi o impostare le variabili di ambiente corrispondenti.
4. Configurazione delle preferenze personalizzate del sito.
Configurare il Registro di sistema client aggiungendo una preferenza del sito personalizzata. A tale scopo, importare i file system-objecttype-extensions.xml in Business Manager.
Passare ad AmministrazioneSviluppo >del sito >Importazione&/Esportazione.
In File di importazione ed esportazione, fare clic su Carica.
Fare clic su Scegli file.
Passare a meta/meta.
Selezionare system-objecttype-extensions.xml.
Fare clic su Carica.
Dopo aver caricato il file, fare clic su Indietro.
In Metadati, fare clic su Importa.
Selezionare system-objecttype-extensions.xml e fare clic su Avanti.
Dopo aver convalidato il file, fare clic su Importa.
5. Aggiornare il shopper_context_hooks cartridge CLIENT_REGISTRY da Preferenze del sito
Per aggiornare la configurazione, in Business Manager:
Vai a Strumenti **** > per il commerciante, Preferenze> del sito, Preferenze >personalizzate, Preferenze per gli hook contestuali dell’acquirente.
Aggiornare il campo Registro client con una configurazione JSON. Inserire l’ID cliente impostato nel passaggio 1 e le chiavi di contesto acquirente che il client può impostare. È possibile immettere una qualsiasi delle chiavi disponibili nel tipo ShopperContext. Per gli ID client che richiedono autorizzazioni per impostare tutte le chiavi di contesto acquirente, ad esempio l’ID client utilizzato per l’anteprima dello storefront, utilizzare la chiave all.
In questo esempio, impostiamo le chiavi di contesto acquirente per due ID client diversi.
Le richieste provenienti dall’ID aaaaaaaa-8536-4a39-acbb-8e7f1759f901 client possono impostare solo le 3 chiavi specificate in Contesto acquirente.
Le richieste provenienti dall’ID bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff client possono impostare tutte le chiavi in Contesto acquirente.
Aggiungere l’ambito del contesto acquirente al client privato SLAS: sfcc.shopper-context.rw. Vedere Creazione di un client SLAS.
Implementazione demo del contesto acquirente
La nostra demo di Shopper Context utilizza il sourceCode set tramite un parametro di query per attivare modifiche al contenuto su un PLP e nuove promozioni per un gruppo di clienti specifico. È possibile vedere la demo in azione su un PLP aggiungendo &sourcecode=instagram all’URL.
Nella nostra demo utilizziamo l’hook useUpdateShopperContext per attivare una campagna di personalizzazione. Nel progetto, aggiungere o rimuovere i parametri di SHOPPER_CONTEXT_SEARCH_PARAMS query Contesto acquirente nella costante in app/constants.js per ottenere personalizzazioni personalizzate attivate dai parametri di query.
Ad esempio, se sono stati aggiunti attributi personalizzati che si desidera impostare utilizzando i parametri di query, includerli come parametri di query personalizzati in app/constants.js. In questo esempio, aggiungiamo i seguenti parametri: deviceType e 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...
Estendi il contesto dell'acquirente
Facoltativamente, è possibile aggiungere la personalizzazione oltre a quella presente nell’implementazione demo di Shopper Context. Ad esempio, è possibile personalizzare i contenuti in base alla geolocalizzazione di un acquirente.
In questo codice di esempio, otteniamo la geolocalizzazione di un acquirente. Dopo aver ottenuto la geolocalizzazione, è possibile applicare la personalizzazione scelta. Ad esempio:
Per New York, Stati Uniti: Sconto del 20% % sui top da donna.
Per Boston, Stati Uniti: Sconto del 15% % sui top da donna.
1// ... Default imports in the hook2import{useEffect, useState}from 'react'34export const useUpdateShopperContext = ()=>{5 // ... Default code in the hook6 const[location, setLocation] = useState({latitude: null, longitude: null})78 // 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.longitude16})17},18(err)=>{19 console.error(err.message)// Handle errors gracefully20},21{22 enableHighAccuracy: true, // Try to get the most accurate location23 timeout: 10000, // Time in milliseconds before timing out24 maximumAge: 60000 // Cache the location for 1 minute25}26)27}else{28 console.error('Geolocation is not supported by this browser.')29}30}3132 fetchLocation()3334 // 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.longitude41}42}43 handleShopperContextUpdate(shopperContext, newShopperContext)44}45}, [location.latitude, location.longitude])46}
Risoluzione dei problemi relativi al contesto dell'acquirente
In questa sezione viene suggerita una soluzione per un errore comune che può verificarsi durante l’utilizzo di Shopper Context.
Personalizzazione errata o mancante
Causa potenziale: La personalizzazione in Business Manager non è configurata correttamente.
Soluzione suggerita: Assicurarsi che il trigger di contesto impostato sia assegnato a una campagna di personalizzazione in Business Manager.
j