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

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:

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.

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:

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

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.

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.

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);
    }
}