Implementazione di un’applicazione a pagina singola

Adobe Experience Platform Web SDK offre funzionalità avanzate che consentono all’azienda di eseguire personalizzazioni su tecnologie lato client di nuova generazione, ad esempio applicazioni a pagina singola (SPA).

I siti web tradizionali utilizzavano modelli di navigazione “da pagina a pagina”, detti anche Applicazioni a più pagine. In questi siti web le progettazioni sono strettamente collegate agli URL e lo spostamento tra le pagine richiedeva un caricamento di pagina completo.

Le applicazioni web moderne, come le applicazioni a pagina singola, hanno invece adottato un modello che attiva rapidamente il rendering dell’interfaccia utente del browser, spesso indipendente dai ricaricamenti delle pagine. Queste esperienze vengono attivate dalle interazioni dei clienti, ad esempio scorrimento, clic e movimenti del cursore. Con l’evolversi 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 di Experience Platform Web SDK per le applicazioni a pagina singola

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

Visualizzazioni XDM e applicazioni a pagina singola

Il Compositore esperienza visivo di Adobe Target per applicazioni a pagina singola sfrutta un concetto denominato Visualizzazioni: un gruppo logico di elementi visivi che insieme formano un’esperienza di applicazione a pagina singola. 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 o elementi visivi raggruppati all’interno di un sito.

Per ulteriori informazioni sulle visualizzazioni, nell’esempio seguente viene utilizzato un ipotetico sito di e-commerce online implementato in React per esplorare l’esempio Visualizzazioni.

Dopo aver visitato la home page, un’immagine protagonista promuove una vendita di Pasqua e gli ultimi prodotti disponibili sul sito. In questo caso, è possibile definire una visualizzazione per l’intera schermata iniziale. Questa visualizzazione può essere chiamata semplicemente “home”.

Quando il cliente diventa più interessato ai prodotti venduti dall’azienda, decide di fare clic sul collegamento Prodotti. Analogamente alla home page, l’intero sito prodotti può essere definito come Visualizzazione. Questa visualizzazione potrebbe essere denominata “products-all”.

Poiché una visualizzazione può essere definita come un intero sito o un gruppo di elementi visivi in un sito. I quattro prodotti visualizzati nel sito prodotti possono essere raggruppati e considerati come Visualizzazione. Questa visualizzazione potrebbe essere denominata “products” (prodotti).

Quando il cliente decide di fare clic sul pulsante Carica altro per esplorare altri prodotti sul sito, in questo caso l’URL del sito Web non cambia. Tuttavia, è possibile creare una visualizzazione qui per rappresentare solo la seconda riga di prodotti visualizzati. Il nome View potrebbe essere “products-page-2”.

Il cliente decide di acquistare alcuni prodotti dal sito e procede alla schermata di pagamento. Sul sito di pagamento, al cliente vengono offerte le opzioni per scegliere la consegna normale o express. Una visualizzazione può essere qualsiasi gruppo di elementi visivi in un sito, quindi è possibile creare una visualizzazione per le preferenze di consegna e chiamarla “Preferenze di consegna”.

Il concetto di visualizzazioni può essere esteso molto oltre questo scenario. Questi scenari sono solo alcuni esempi di visualizzazioni che possono essere definite in un sito.

Implementazione di visualizzazioni XDM

È possibile sfruttare le visualizzazioni XDM in Target per consentire agli addetti al marketing di eseguire test A/B e XT nelle applicazioni a pagina singola tramite il Compositore esperienza visivo. Per completare la configurazione di uno sviluppatore una tantum, è necessario eseguire i passaggi seguenti:

sendEvent() esempi di funzioni

In questa sezione vengono illustrati tre esempi che illustrano come richiamare la funzione sendEvent() in React per un’ipotetica applicazione a pagina singola per e-commerce.

Esempio 1: home page per test A/B

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

Il team marketing desidera personalizzare la seconda riga di prodotti cambiando il colore dell’etichetta prezzo in rosso dopo che un utente ha fatto clic su Carica altro.

function onViewChange(viewName) {

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

class Products extends Component {

  render() {
    return (
      <button type="button" onClick={this.handleLoadMoreClicked}>Load more</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);
  }

}

Esempio 3: preferenze di consegna per test A/B

Il team marketing desidera eseguire un test A/B per verificare se cambiare il colore del pulsante da blu a rosso quando si seleziona Consegna express. Il team ritiene che questa modifica possa aumentare le conversioni (invece di mantenere il pulsante blu con entrambe le opzioni di consegna).

Per personalizzare il contenuto sul sito a seconda della preferenza di consegna selezionata, è possibile creare una Visualizzazione per ogni preferenza di consegna. Quando è selezionata l’opzione Consegna normale, è possibile denominare Visualizzazione “Checkout-normal”. Se è selezionata l’opzione Consegna express, Visualizzazione può essere denominata “checkout-express”.

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

class Checkout extends Component {

  render() {
    return (
      <div onChange={this.onDeliveryPreferenceChanged}>
        <label>
          <input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
          <span> Normal Delivery (7-10 business days)</span>
        </label>
        <label>
          <input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
          <span> Express Delivery* (2-3 business days)</span>
        </label>
      </div>
    );
  }

  onDeliveryPreferenceChanged(evt) {
    var selectedPreferenceValue = evt.target.value;
    onViewChange(selectedPreferenceValue);
  }

}

Utilizzo di Compositore esperienza visivo per un’applicazione a pagina singola

Dopo aver definito le visualizzazioni XDM e implementato sendEvent() con le visualizzazioni XDM passate, il Compositore esperienza visivo è in grado di rilevare queste visualizzazioni e consentire agli utenti di creare azioni e modifiche per le attività A/B o XT.

Pannello Modifiche

Il pannello Modifiche acquisisce le azioni create per una particolare Visualizzazione. Tutte le azioni per una Visualizzazione sono raggruppate in tale Visualizzazione.

Azioni

Facendo clic su un’azione viene evidenziato l’elemento del sito in cui questa viene applicata. Ogni azione del Compositore esperienza visivo creata in una Visualizzazione presenta le icone seguenti: Informazioni, Modifica, Clone, Sposta e Elimina. Queste icone sono spiegate più dettagliatamente nella tabella seguente.

Esempi di utilizzo del Compositore esperienza visivo per le applicazioni a pagina singola

Questa sezione descrive tre esempi per utilizzare il Compositore esperienza visivo per creare azioni e modifiche per le attività A/B o XT.

Esempio 1: aggiornare la vista “home”

In precedenza in questo articolo era stata definita una visualizzazione denominata “home” per l’intero sito principale. Ora il team marketing desidera aggiornare la visualizzazione “home” nei seguenti modi:

Per apportare questi aggiornamenti nel Compositore esperienza visivo, seleziona Componi e applica le modifiche alla visualizzazione “Home page”.

Esempio 2: modificare le etichette dei prodotti

Per la Visualizzazione di “products-page-2”, il team marketing desidera modificare l’etichetta Prezzo in Prezzo di vendita e cambiare il colore dell’etichetta in rosso.

Per apportare questi aggiornamenti nel Compositore esperienza visivo, è necessario attenersi ai seguenti passaggi:

Esempio 3: personalizzare lo stile delle preferenze di consegna

Le visualizzazioni possono essere definite a un livello granulare, ad esempio uno stato o un’opzione da un pulsante di opzione. In precedenza in questo articolo Le visualizzazioni erano definite per le preferenze di consegna, “checkout-normal” e “checkout-express”. Il team marketing desidera cambiare il colore del pulsante in rosso per la visualizzazione “checkout-express”.

Per apportare questi aggiornamenti nel Compositore esperienza visivo, è necessario attenersi ai seguenti passaggi: