Implementazione di un’applicazione a pagina singola
I siti web tradizionali funzionavano su modelli di navigazione “da pagina a pagina”, altrimenti noti come Applicazioni a più pagine, in cui le progettazioni del sito web erano strettamente collegate a URL e le transizioni da una pagina web a un’altra richiedevano un caricamento di pagina. Le applicazioni web moderne, come le applicazioni a pagina singola, adottano invece un modello che attiva rapidamente il rendering dell’interfaccia utente del browser, spesso indipendente dalla pagina. Queste esperienze si attivano spesso tramite le interazioni dei clienti, ad esempio lo scorrimento, clic e movimenti del cursore. Con l’evoluzione dei paradigmi del web moderno, la rilevanza degli eventi generici tradizionali, come il caricamento delle pagine, per distribuire personalizzazione e sperimentazione non funziona più.
at.js 2.x offre funzioni avanzate che consentono di eseguire personalizzazioni su tecnologie lato client di nuova generazione. Questa versione si concentra sul miglioramento di at.js per garantire interazioni in sintonia con le applicazioni a pagina singola.
Di seguito sono riportati alcuni vantaggi dell’utilizzo di at.js 2.x che non sono disponibili nelle versioni precedenti:
- Capacità di memorizzare nella cache tutte le offerte al caricamento di pagina per ridurre più chiamate al server a una singola chiamata al server.
- Migliorate enormemente le esperienze degli utenti finali sul sito, in quanto le offerte appaiono immediatamente tramite la cache senza intervalli dovuti alle chiamate al server tradizionali.
- Una semplice riga di codice e una configurazione per sviluppatori una tantum per consentire agli esperti di marketing di creare ed eseguire attività A/B e Targeting esperienza (XT) tramite il Compositore esperienza visivo sull’applicazione a pagina singola.
Adobe Target visualizzazioni e applicazioni a pagina singola
Il Compositore esperienza visivo Adobe Target per SPA sfrutta un nuovo concetto denominato Visualizzazioni: un gruppo logico di elementi visivi che insieme formano un'esperienza SPA. Un’applicazione a pagina singola può, infatti, essere considerata come transizione attraverso le visualizzazioni (al posto degli URL) basata sulle interazioni dell’utente. In genere, una visualizzazione può rappresentare un intero sito o elementi visivi raggruppati all'interno di un sito.
Per spiegare ulteriormente cosa sono le visualizzazioni, navighiamo in questo ipotetico sito di e-commerce online implementato in React ed esploriamo alcune visualizzazioni di esempio. Fai clic sui collegamenti di seguito per aprire il sito in una nuova scheda del browser.
Collegamento: Sito principale
Quando entriamo nella home page, notiamo subito un’immagine protagonista (hero image) che promuove un’offerta di Pasqua e gli ultimi prodotti venduti sul sito. In questo caso, si può definire una visualizzazione come l’intera home page. Questo è utile da sapere, ma torneremo sull'argomento più avanti, nella sezione Implementazione di Adobe Target visualizzazioni.
Collegamento: Sito Prodotti
Interessati ai prodotti venduti dall’azienda, decidiamo di fare clic sul collegamento Prodotti. Come con la home page, l’intero sito dei prodotti può essere definito come visualizzazione. Possiamo denominare questa visualizzazione "products" come nel nome del percorso https://target.enablementadobe.com/react/demo/#/products)
.
All'inizio di questa sezione, abbiamo definito visualizzazioni come l'intero sito o anche un gruppo di elementi visivi sul sito. Come si vede qui sopra, è possibile raggruppare i quattro prodotti visibili sul sito e considerarli come una visualizzazione. Se vogliamo, possiamo denominare questa visualizzazione “Products”.
Decidiamo di fare clic sul pulsante Carica altro per esplorare altri prodotti sul sito. In questo caso, l’URL del sito web non cambia. Tuttavia, una visualizzazione qui può rappresentare solo la seconda riga di prodotti visibili qui sopra. Possiamo chiamare questa visualizzazione “PRODUCTS-PAGE-2”.
Collegamento: Estrazione
Visto che ci piacciono alcuni prodotti presenti sul sito, decidiamo di comprarne un paio. Ora, sulla pagina di checkout, sono disponibili alcune opzioni per scegliere la consegna normale o express. Poiché una visualizzazione può essere qualsiasi gruppo di elementi visivi su un sito, questa possiamo chiamarla “Preferenze di consegna”.
Il concetto di visualizzazioni si può estendere ulteriormente. Se gli esperti di marketing desiderano personalizzare il contenuto sul sito a seconda della preferenza di consegna selezionata, è possibile creare una visualizzazione per ogni opzione di consegna. In questo caso, quando selezioniamo Consegna normale, possiamo chiamare la visualizzazione “Consegna normale”. Se selezioniamo l’opzione Consegna Express, la visualizzazione si può chiamare “Consegna express”.
Adesso, gli esperti di marketing potrebbero voler eseguire un test A/B per valutare se cambiare il colore da blu a rosso quando si seleziona l’opzione Consegna express per aumentare le conversioni, invece di mantenere il pulsante blu con entrambe le opzioni di consegna.
Implementazione di Adobe Target visualizzazioni
Ora che abbiamo capito cosa sono le Adobe Target visualizzazioni, possiamo sfruttare questo concetto in Target per consentire agli addetti al marketing di eseguire test A/B e XT sull'SPA tramite il Compositore esperienza visivo. Questo richiederà una configurazione per sviluppatori una tantum. Seguiamo i passaggi per configurarlo.
-
Installare at.js 2.x.
Innanzitutto, dobbiamo installare at.js 2.x. Questa versione di at.js è stata sviluppata pensando all’SPA. Le versioni precedenti di at.js non supportano le visualizzazioni Adobe Target e il Compositore esperienza visivo per SPA.
Scarica at.js 2.x tramite l'interfaccia utente Adobe Target disponibile in Administration > Implementation. at.js 2.x può essere distribuito anche tramite tag in Adobe Experience Platform.
-
Implementare at.js 2.Funzione x,
[triggerView()](https://experienceleague.adobe.com/docs/target-dev/developer/client-side/at-js-implementation/functions-overview/adobe-target-triggerview-atjs-2.html?lang=it)
nei siti.Dopo aver definito le visualizzazioni dell’SPA in cui desideri eseguire un test A/B o XT, implementa at.js 2.Funzione x
triggerView()
con le visualizzazioni passate come parametro. Questo consente agli esperti di marketing di utilizzare il Compositore esperienza visivo per progettare ed eseguire i test A/B e XT per queste visualizzazioni definite. Se la funzionetriggerView()
non è definita per tali visualizzazioni, il Compositore esperienza visivo non le rileva e, pertanto, gli addetti al marketing non possono utilizzarlo per progettare ed eseguire test A/B e XT.note note NOTE Per il supporto della visualizzazione in at.js, viewsEnabled deve essere impostato su true; in caso contrario tutte le funzionalità di visualizzazione sono disabilitate. adobe.target.triggerView(viewName, options)
table 0-row-5 1-row-5 2-row-5 3-row-5 Parametro Tipo Obbligatorio Convalida Descrizione viewName Stringa Sì 1. Senza spazi finali.
2. Non può essere vuoto.
3. Il nome della visualizzazione deve essere univoco per tutte le pagine.
4. Avviso: il nome della visualizzazione non deve iniziare o finire con "/
". Questo perché il cliente in genere estrae il nome della visualizzazione dal percorso URL. Per noi, "home" e "/home
" sono diversi.
5. Avviso: non attivare la stessa visualizzazione in sequenza più volte con l'opzione{page: true}
.Passa un nome qualsiasi come tipo di stringa che desideri rappresenti la tua visualizzazione. Questo nome della visualizzazione appare nel pannello Modifications del Compositore esperienza visivo per consentire agli addetti al marketing di creare azioni ed eseguire le attività A/B e XT. options Oggetto No options > page Booleano No TRUE: il valore predefinito della pagina è vero. Con page=true
, si inviano notifiche ai server perimetrali per incrementare il conteggio delle impression.
FALSE: conpage=false
, non verranno inviate notifiche per incrementare il conteggio delle impression. Da utilizzare solo per eseguire nuovamente il rendering di un componente su una pagina con un’offerta.Passiamo ora ad alcuni esempi d'uso su come richiamare la funzione
triggerView()
in React per il nostro ipotetico SPA di e-commerce:Collegamento: Sito principale
In qualità di esperto di marketing, se desideri eseguire test A/B sull’intero sito principale, potrebbe essere utile assegnare alla visualizzazione il nome “home”:
function targetView() {
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);
}
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
}
}
// react router v4
const history = syncHistoryWithStore(createBrowserHistory(), store);
history.listen(targetView);
// react router v3
<Router history={hashHistory} onUpdate={targetView} >
Collegamento: Sito Prodotti
Ora vediamo un esempio un po' più complicato. Diciamo che, in qualità di esperti di marketing, vogliamo personalizzare la seconda riga dei prodotti cambiando il colore dell’etichetta "Prezzo" in rosso dopo che un utente ha fatto clic sul pulsante Carica altro.
function targetView(viewName) {
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(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});
targetView('PRODUCTS-PAGE-' + page);
}
}
Collegamento: Estrazione
Se gli esperti di marketing desiderano personalizzare il contenuto sul sito a seconda della preferenza di consegna selezionata, è possibile creare una visualizzazione per ogni opzione di consegna. In questo caso, quando selezioniamo Consegna normale, possiamo chiamare la visualizzazione “Consegna normale”. Se selezioniamo l’opzione Consegna Express, la visualizzazione si può chiamare “Consegna express”.
Adesso, gli esperti di marketing potrebbero voler eseguire un test A/B per valutare se cambiare il colore da blu a rosso quando si seleziona l’opzione Consegna express per aumentare le conversioni, invece di mantenere il pulsante blu con entrambe le opzioni di consegna.
function targetView(viewName) {
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(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;
targetView(selectedPreferenceValue);
}
}
Diagrammi di sistema di at.js 2.x
I seguenti diagrammi ti aiutano a comprendere il flusso di lavoro di at.js 2.x tramite Visualizzazioni e come questo migliori l’integrazione con le applicazioni a pagina singola. Per una migliore introduzione dei concetti utilizzati in at.js 2.x, consulta Implementazione di un’applicazione a pagina singola.
at.js si carica anche in modo asincrono con un'opzione che nasconde lo snippet implementato sulla pagina.
Gli attributi del cliente vengono inviati all’archivio profili in un processo batch.
Il contenuto mirato sulla pagina corrente viene mostrato il più rapidamente possibile senza che venga visualizzato momentaneamente il contenuto predefinito.
Contenuto mirato per le viste mostrate come risultato delle azioni dell'utente in un’applicazione a pagina singola memorizzata nella cache del browser, in modo da applicarla immediatamente senza una chiamata al server aggiuntiva quando si attivano le viste tramite
triggerView()
.I dati di Analytics possono quindi essere visualizzati sia in Analytics che in Target tramite Analytics per i report Target (A4T).
Ora, ovunque si implementi triggerView()
nell’applicazione a pagina singola, le visualizzazioni e le azioni vengono recuperate dalla cache e mostrate all’utente senza una chiamata al server. triggerView()
invia anche una richiesta di notifica al backend Target per incrementare e registrare i conteggi delle impression.
triggerView()
nell’applicazione a pagina singola per eseguire il rendering della visualizzazione e applicare azioni per modificare gli elementi visuali.Compositore esperienza visivo per app a pagina singola
Dopo aver completato l’installazione di at.js 2.x e aggiunto triggerView()
al sito, utilizza il Compositore esperienza visivo per eseguire attività A/B e XT. Per ulteriori informazioni, consulta Compositore esperienza visivo per app a pagina singola.
triggerView()
implementato.Utilizza TriggerView per garantire che A4T funzioni correttamente con at.js 2.x e SPA
Per garantire che Analytics for Target (A4T) funzioni correttamente con at.js 2.x, assicurati di inviare lo stesso codice SDID nella richiesta Target e nella richiesta Analytics.
Come best practice relative alle applicazioni a pagina singola:
- Utilizza eventi personalizzati per generare una notifica quando nell’applicazione si verifica qualcosa di interessante
- Attiva un evento personalizzato prima che inizi il rendering della visualizzazione
- Attiva un evento personalizzato quando termina il rendering della visualizzazione
at.js 2.x ha aggiunto una nuova funzione API triggerView(). Utilizza triggerView()
per notificare ad at.js quando sta per essere eseguito il rendering di una visualizzazione.
Per vedere come combinare eventi personalizzati, at.js 2.x, e Analytics, vediamo un esempio. Questo esempio presuppone che la pagina HTML contenga l’API del visitatore, seguita da at.js 2.x, seguita da AppMeasurement.
Supponiamo che siano presenti i seguenti eventi personalizzati:
at-view-start
- Quando inizia il rendering della visualizzazioneat-view-end
- Quando termina il rendering della visualizzazione
Per fare in modo che A4T funzioni con at.js 2.x,
Il gestore di inizio della visualizzazione sarà simile al seguente:
document.addEventListener("at-view-start", function(e) {
var visitor = Visitor.getInstance("<your Adobe Org ID>");
visitor.resetState();
adobe.target.triggerView("<view name>");
});
Il gestore di fine visualizzazione sarà simile al seguente:
document.addEventListener("at-view-end", function(e) {
// s - is the AppMeasurement tracker object
s.t();
});
at-view-start
e at-view-end
. Questi eventi non fanno parte degli eventi personalizzati di at.jsAnche se in questi esempi viene utilizzato il codice JavaScript, tutto questo può essere semplificato se si utilizza un gestore di tag, ad esempio i tag in Adobe Experience Platform.
Se segui la procedura precedente, dovresti disporre di una soluzione A4T solida per le applicazioni a pagina singola.
Best practice di implementazione
Le API di at.js 2.x consentono di personalizzare l'implementazione di Target in molti modi, ma è importante seguire l'ordine corretto delle operazioni durante questo processo.
Le informazioni seguenti descrivono l'ordine delle operazioni da seguire quando si carica un'applicazione a pagina singola per la prima volta in un browser e per qualsiasi modifica della visualizzazione successiva.
Ordine delle operazioni per il caricamento della pagina iniziale order
Se si dispone di un livello dati, è consigliabile caricare i dati critici necessari per l'invio a Target prima di eseguire la richiesta Target. Questo consente di utilizzare targetPageParams
per includere tutti i dati che si desidera utilizzare per il targeting.
Quando pageLoadEnabled
e viewsEnabled
sono impostati su true in targetGlobalSettings, at.js richiede automaticamente tutte le offerte VEC Target al passaggio 2.
getOffers
può essere utilizzato anche per ottenere offerte VEC dopo il caricamento della pagina. Per farlo, assicurati che la richiesta includa execute>pageLoad
e prefetch>views
nella chiamata API.
triggerView()
triggerView()
venga chiamato dopo la restituzione della richiesta Target e che termini l'applicazione delle offerte alla cache. Questo passaggio deve essere eseguito una sola volta per ogni visualizzazione.triggerView({"page": false})
Ordine delle operazioni per la modifica della visualizzazione SPA (nessun ricaricamento dell'intera pagina)
visitor.resetState()
getOffers()
triggerView()
triggerView()
triggerView({"page": false})
Video di formazione
I video che seguono contengono ulteriori informazioni:
Come funziona at.js 2.x
Consulta la pagina relativa al funzionamento di at.js 2.x per ulteriori informazioni.
Implementare at.js 2.x in un’applicazione a pagina singola
Per ulteriori informazioni, consulta Implementare at.js 2.x di Adobe Target in un'applicazione a pagina singola (SPA).
Utilizzo del Compositore esperienza visivo per l'SPA in Adobe Target
Per ulteriori informazioni, vedere Utilizzo del Compositore esperienza visivo per le applicazioni a pagina singola (VEC SPA) in Adobe Target.