Implementazione di applicazioni a pagina singola (lato client)

Le applicazioni a pagina singola (single-page application, SPA) stanno diventando sempre più popolari nello sviluppo web. I framework SPA più diffusi includono React, Vue, AngularJS, Ember e Backbone. Se il tuo sito web dovesse utilizzare uno di questi framework, leggi questo articolo sui metodi di implementazione consigliati.

Linee guida

Con questa soluzione, l'implementazione per le SPA è identica a quella per le non SPA. Non è necessario implementare una chiamata API per il caricamento della pagina SPA o contrassegnare quali campagne sono rilevanti per queste chiamate. Inoltre, la soluzione è perfettamente compatibile con il framework.

Come funziona

Alla parte pesante ci pensa Dynamic Yield:

• Il caricamento degli elementi della pagina viene monitorato, anche quando la pagina stessa non si ricarica completamente. L'operazione dipende da un'API web chiamata MutationObserver, che fornisce collegamenti alle mutazioni DOM e ci consente di tracciare quando un nodo DOM viene inserito, distrutto o modificato. In questo modo, Dynamic Yield può applicare (o riapplicare) le modifiche al momento giusto. Quando la pagina viene disattivata, Dynamic Yield non tenterà più di modificarne gli elementi.
• Lo script Dynamic Yield si basa su una macchina a stati e tutte le campagne sono oggetti intelligenti stateful. In questo modo, lo script risponderà alle modifiche apportate alle tue applicazioni.

Limitazioni note

• È necessario un aggiornamento della pagina per assegnare gli utenti a segmenti di pubblico basati su CRM.
• L'impostazione del contesto della pagina è obbligatoria.

Nota: se le regole di rilevamento automatico (regole di contesto) sono abilitate per un tipo di pagina specifico, il contesto di pagina implementato in questo tipo di pagina fungerà da ripiego, se nessuna delle regole fosse applicabile.

Rilevamento di nuove pagine

Le soluzioni SPA usano diversi metodi per rilevare eventuali modifiche alle pagine:

• modifiche agli URL vengono rilevate utilizzando API di cronologia ed eventi Hashchange .
  Il rilevamento delle modifiche agli URL ignora i cambiamenti ai parametri della stringa di query URL;
• modifiche al tag del titolo nell'intestazione della pagina o a Document.Title.
• Le modifiche al contesto vengono rilevate dai cambiamenti subiti dall'oggetto DY.recommendationContext.

Rendering della campagna

I contenuti dinamici e le campagne di raccomandazione vengono visualizzati direttamente nel DOM.

Sezioni che non ereditano il CSS del sito

Se la tua sezione non dovesse ereditare i CSS, i contenuti dinamici e i consigli del sito, le tue campagne verranno renderizzate direttamente nello shadow DOM. Di conseguenza, queste campagne non interferiranno con il rilevamento delle modifiche al DOM del framework front-end.

Per consentire un accesso senza interruzioni agli elementi HTML delle campagne, nel corrispondente codice JavaScript verranno sovrascritte più funzioni di interrogazione e verranno interrogati prima i DOM shadow delle campagne. Se non fosse possibile individuare alcun elemento, il sistema interrogherà il DOM come fallback.

Le funzioni disponibili sono:

• document.getElementByID
• document.querySelector
• document.querySelectorAll
• document.getElementsByName
• document.getElementsByClassName
• document.getElementsByTagName

Risoluzione dei problemi di utilizzo di uno shadow DOM

Cos'è una root #shadow e perché è presente in tutte le mie campagne Dynamic Yield in esecuzione sulla pagina?

Una root #shadow (o un DOM "shadow") è il modo in cui Dynamic Yield inserisce i contenuti sui siti abilitati alle funzioni SPA: dovrebbe essere presente in tutte le campagne in corso su pagine impostate per sostituire/aggiungere prima/aggiungere dopo un elemennto. Questo comportamento è considerato normale per i siti con unzioni SPA abilitate.

Perché il CSS della mia campagna non influisce sugli elementi della mia pagina web?

Queste informazioni riguardano i siti che non hanno il flag di funzionalità INHERIT_SITE_CSS abilitato.

Questo comportamento è dovuto anche allo shadow DOM. Elementi (e tag di stile) all'interno degli shadow DOM si trovano in un'istanza DOM separata dal resto della pagina web.

Se stai cercando di manipolare gli oggetti presennti all'interno dello shadow DOM dall'esterno, o viceversa, prova a usare un codice JavaScript anziché un CSS.

Targeting del DOM tramite un DOM "shadow" (stessa sintassi dei no shadow DOM):

document.querySelector('#someElement').style.color = 'red';

Targeting dello shadow DOM dal DOM:

document.querySelector('div[data-dy-embedded-object]').shadowRoot.querySelector('#someElement').style.color = 'red'

Targeting del shadow DOM da un altro shadow DOM separato:

// uguale al Targeting dello shadow DOM dal DOM, ma potrebbe essere necessario aggiungere un elemento waitForElement per scopi di temporizzazione

DYO.waitForElement('#shadow-root-container div[data-dy-embedded-object]', function() {

   document.querySelector('#shadow-root-container div[data-dy-embedded-object]').shadowRoot.querySelector('#someElement').style.color = 'purple'

 })

Nota: si può usare jQuery per aggiornare lo stile o attivare le classi di elementi in esecuzione all'interno dello shadow DOM, utilizzando questi stessi metodi, ma con Sintassi $() al posto di un querySelector.