Personalizzazione con Contesto di acquisto

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.

Questo video mostra un esempio di come personalizzare contenuti e promozioni con l'implementazione demo di Shopper Context.

Contesto acquirente in PWA Kit
undefined

Per utilizzare la personalizzazione con Buyerper Context:

  • Nell'interfaccia utente di amministrazione SLAS (Shopper Login and API Access), creare un client privato SLAS. Vedere Creazione di un client SLAS.

In Business Manager:

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

  • Installare e caricare la cartuccia.

    • Clonare il repository degli hook di Shopper Context. Il nome della directory di primo livello è shopper_context_hooks.

    • 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.

    • shopper_context_hooks Dalla directory, eseguire:

      npm run uploadCartridge

Per ulteriori informazioni sul caricamento del cartridge, vedere Caricamento del codice per Storefront Reference Architecture (SFRA).

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.

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.

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.

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.

In questa sezione viene suggerita una soluzione per un errore comune che può verificarsi durante l'utilizzo di Shopper Context.

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.