Implementare applicazioni a pagina singola (SPA) web-spa-implementation

Adobe Experience Platform Web SDK offre funzioni avanzate che consentono di eseguire personalizzazioni su tecnologie lato client di nuova generazione, come le applicazioni a pagina singola (SPA).

I siti web tradizionali funzionano su modelli di navigazione "da pagina a pagina", altrimenti noti come applicazioni a più pagine, in cui le progettazioni del sito web sono strettamente collegate a URL e le transizioni da una pagina web a un’altra richiedono un caricamento di pagina.

Le applicazioni web moderne, come le applicazioni a pagina singola (SPA), hanno invece adottato un modello che attiva rapidamente il rendering dell’interfaccia utente del browser, spesso indipendente dai ricaricamenti delle pagine. Queste esperienze possono essere attivate dalle interazioni dei clienti, ad esempio scorrimento, clic e movimenti del cursore. Con l’evoluzione dei paradigmi del web moderno, la rilevanza degli eventi generici tradizionali, come il caricamento di una pagina, per distribuire personalizzazione e sperimentazione non funziona più.

Diagramma del ciclo di vita della pagina.

Vantaggi dell’utilizzo di Web SDK per SPA web-spa-benefits

Di seguito sono riportati alcuni vantaggi dell’utilizzo di Web SDK per le applicazioni a pagina singola:

  • Possibilità di memorizzare nella cache tutte le offerte al caricamento di pagina per ridurre più chiamate server a una singola chiamata server.
  • Migliora enormemente l’esperienza utente sul sito, in quanto le offerte vengono visualizzate immediatamente tramite la cache, senza il ritardo causato dalle chiamate al server tradizionali.
  • La configurazione per sviluppatori una tantum consente agli esperti di marketing di creare ed eseguire attività di personalizzazione e sperimentazione tramite l’editor visivo web di Adobe Journey Optimizer sull’SPA.

Visualizzazioni XDM e applicazioni a pagina singola web-spa-xdm

L'editor Web di Journey Optimizer sfrutta un concetto denominato visualizzazioni.

Le visualizzazioni sono un gruppo logico di elementi visivi che insieme formano un’esperienza SPA. Un’applicazione a pagina singola può, pertanto, essere considerata come transizione attraverso le viste, anziché gli URL, in base alle interazioni dell’utente. In genere, una visualizzazione può rappresentare un intero sito, una singola pagina o elementi visivi raggruppati all’interno di una pagina.

Per spiegare ulteriormente le visualizzazioni, nell'esempio seguente viene utilizzato un ipotetico sito di e-commerce online.

  • Dopo aver visitato la home page, un’immagine protagonista promuove le raccolte stagionali e i diversi cataloghi di prodotti disponibili sul sito. In questo caso, è possibile definire una visualizzazione per l'intera schermata iniziale. Questa visualizzazione potrebbe essere chiamata semplicemente "home".

    Immagine di esempio del sito Web che mostra una home page.

  • Quando il cliente diventa più interessato ai prodotti venduti dall'azienda, decide di fare clic sul collegamento uomini. Analogamente alla home page, l'intera pagina Men può essere definita come visualizzazione. Questa visione potrebbe essere chiamata "uomini".

    Immagine di esempio del sito Web con una visualizzazione specifica.

  • Poiché una visualizzazione può essere definita come un intero sito o come un gruppo di elementi visivi in un sito, i quattro prodotti visualizzati nel sito dei prodotti possono essere raggruppati e considerati come una visualizzazione. Questa visualizzazione potrebbe essere denominata "products" (prodotti).

    Immagine di esempio del sito Web con una visualizzazione specifica.

  • Quando il cliente decide di fare clic sul pulsante TUTTI I PRODOTTI DA UOMO per esplorare altri prodotti sul sito, l'URL del sito Web non cambia in questo caso, ma è possibile creare una visualizzazione qui per rappresentare solo la seconda riga di prodotti visualizzati. Il nome della visualizzazione potrebbe essere "products-page-2".

  • Il cliente decide di acquistare alcuni prodotti dal sito e procede alla schermata di pagamento. Lo schermo del carrello stesso può essere associato a una visualizzazione denominata "carrello". Oppure puoi avere una visualizzazione diversa all'interno della schermata di pagamento per gestire i prodotti consigliati di seguito.

    Immagine di esempio del sito Web con una visualizzazione specifica.

Il concetto di visualizzazioni può essere esteso molto di più. Questi sono solo alcuni esempi di visualizzazioni che possono essere definite su un sito.

Implementazione delle viste XDM implement-xdm-views

Le viste XDM possono essere utilizzate in Adobe Journey Optimizer per consentire agli addetti al marketing di eseguire campagne di personalizzazione web e sperimentazione sull’SPA tramite l’editor visivo web di Journey Optimizer.

Per completare la configurazione per sviluppatori una tantum, è necessario eseguire i passaggi seguenti:

  1. Installa Adobe Experience Platform Web SDK e controlla la pagina prerequisiti per il canale web.

  2. Determina tutte le viste XDM nell’applicazione a pagina singola che desideri personalizzare.

  3. Dopo aver definito le visualizzazioni XDM, per distribuire il contenuto a tali visualizzazioni, è necessario implementare la funzione sendEvent() con renderDecisions impostato su true e la visualizzazione XDM corrispondente nell'applicazione a pagina singola. La visualizzazione XDM deve essere passata in xdm.web.webPageDetails.viewName. Questo passaggio consente agli esperti di marketing di scoprire queste visualizzazioni all’interno dell’editor web di Journey Optimizer e di applicare loro le modifiche ai contenuti:

 alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
   "web": {
    "webPageDetails": {
    "viewName":"home"
   }
  }
 }
});
NOTE
Alla prima chiamata sendEvent(), tutte le viste XDM di cui eseguire il rendering per l'utente finale verranno recuperate e memorizzate nella cache. Le sendEvent() chiamate successive con viste XDM passate verranno lette dalla cache e sottoposte a rendering senza una chiamata al server.

sendEvent() esempi di funzioni

Questa sezione illustra due esempi che mostrano come richiamare la funzione sendEvent() in React per un ipotetico SPA di e-commerce.

Esempio 1: home page per test A/B web-spa-sample-1

Il team marketing desidera eseguire test A/B sull’intera home page.

Pagina di esempio dellapplicazione a pagina singola.

Per eseguire test A/B sull'intero sito principale, è necessario richiamare sendEvent() con XDM viewName impostato su home:

function onViewChange() {

  var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

  viewName = viewName || 'home'; // view name cannot be empty

  // Sanitize viewName to get rid of any trailing symbols derived from URL

  if (viewName.startsWith('#') || viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }

  alloy("sendEvent", {
    "renderDecisions": true,

    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

Esempio 2: prodotti personalizzati web-spa-sample-2

Il team marketing vuole personalizzare la seconda riga di prodotti cambiando il colore dell’etichetta del prezzo in rosso dopo che un utente fa clic per visualizzare tutti i prodotti da uomo.

Pagina di esempio dellapplicazione a pagina singola con prodotti personalizzati.

function onViewChange(viewName) {

    alloy("sendEvent", {
        "renderDecisions": true,
        "xdm": {
            "web": {
                "webPageDetails": {
                    "viewName": viewName
                }
            }
        }
    });
}

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</button>
        );
    }

    handleLoadMoreClicked() {
        var page = this.state.page + 1; // assuming page number is derived from component's state
        this.setState({
            page: page
        });
        onViewChange('PRODUCTS-PAGE-' + page);
    }
}
recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636