Implémentation d’une application à page unique (côté client)

Les applications à page unique (SPA) sont de plus en plus populaires dans le développement web. Les frameworks SPA les plus populaires sont React, Vue, AngularJS, Ember et Backbone. Si votre site web utilise l’un de ces frameworks, lisez cet article pour connaître la méthode d’implémentation recommandée.

Directives

Avec cette solution, l’implémentation des SPA est identique à celle des non-SPA. Il n’est pas nécessaire d’implémenter un appel d’API pour le chargement de la page d’un SPA ou de marquer quelles campagnes sont pertinentes pour ces appels. De plus, la solution est transparente pour le framework.

Comment ça marche 

Dynamic Yield se charge des tâches les plus lourdes :

• Le chargement des éléments de la page est surveillé, même lorsque la page elle-même ne se recharge pas complètement. Cela se fait à l’aide d’une API web appelée MutationObserver, qui insère des crochets dans les mutations du DOM et nous permet de suivre l’insertion, la destruction ou la modification d’un nœud du DOM. Grâce à cela, Dynamic Yield applique (ou réapplique) les changements au bon moment. Lorsque la page est désactivée, Dynamic Yield ne tente plus de modifier les éléments de cette page.
• Le script de Dynamic Yield possède une machine à états, et toutes les campagnes sont des objets intelligents à états. De cette façon, le script réagit aux changements dans vos applications.

Limites connues

• Un rafraîchissement de la page est nécessaire pour affecter des utilisateurs à des audiences basées sur la gestion de la relation client.
• La définition du contexte de la page est obligatoire.

Remarque : si les règles de détection automatique (règles contextuelles) sont activées pour un type de page spécifique, le contexte de page implémenté sur ce type de page sert de solution de repli si toutes les règles ne s’appliquent pas.

Détection des nouvelles pages

La solution SPA utilise plusieurs méthodes pour détecter les modifications apportées à la page :

• Les changements d’URL sont détectés à l’aide de l’API Historique et des événements Hashchange.
  La détection des modifications d’URL ignore les modifications des paramètres de la chaîne de requête de l’URL.
• Les modifications de la balise Title dans l’en-tête de la page, ou les modifications de Document.Title.
• Les changements de contexte sont détectés par les modifications de l’objet DY.recommendationContext.

Rendu de campagne

Le contenu dynamique et les campagnes de recommandation sont rendus directement dans le DOM.

Sections qui n’héritent pas du CSS du site

Si votre section n’hérite pas du CSS du site, le contenu dynamique et les campagnes de recommandation sont rendus directement dans le DOM fantôme (shadow DOM). Ainsi, ces campagnes n’interfèrent pas avec la détection des changements du DOM du framework frontal.

Pour permettre un accès transparent aux éléments HTML des campagnes, le code JavaScript de la campagne comporte plusieurs fonctions d’interrogation, qui interrogent d’abord les DOM fantômes des campagnes. Si aucun élément n’est trouvé, il interroge le DOM en guise de solution de repli.

Ces fonctions sont les suivantes :

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

Résolution des problèmes liés à l’utilisation d’un DOM fantôme

Qu’est-ce que #shadow-root et pourquoi est-il visible dans toutes mes campagnes Dynamic Yield exécutées sur la page ?

#shadow-root (ou DOM fantôme) permet à Dynamic Yield d’injecter du contenu dans les sites SPA compatibles, et devrait être visible dans toutes les campagnes exécutées sur la page qui sont configurées pour remplacer/ajouter avant/ajouter après. Ceci est considéré comme un comportement normal pour les sites SPA activé.

Pourquoi le CSS de ma campagne n’affecte-t-il pas les éléments de ma page web ?

Cette information concerne les sites pour lesquels l’option INHERIT_SITE_CSS est activée :

Ce comportement est également dû au DOM fantôme. Les éléments (et les balises de style) situés dans le DOM fantôme se trouvent dans une instance DOM distincte du reste de la page web.

Si vous essayez de manipuler des objets se trouvant dans le DOM fantôme depuis l’extérieur, ou vice versa, utilisez JavaScript plutôt que CSS.

Cibler le DOM à partir du DOM fantôme (même syntaxe que sans DOM fantôme) :

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

Cibler le DOM fantôme à partir du DOM :

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

Cibler le DOM fantôme à partir d’un DOM fantôme distinct :

// identique à « Cibler le DOM fantôme à partir du DOM », mais il peut être utile d’ajouter un waitForElement pour améliorer la synchronisation.

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'

 })

Remarque : jQuery peut être utilisé pour mettre à jour le style ou changer les classes des éléments fonctionnant dans le DOM fantôme, en utilisant ces mêmes méthodes mais avec la syntaxe $() au lieu d’un querySelector.