Plus performantes que les sites classiques, notamment en termes d’expérience utilisateur, les applications monopages (single-page applications, SPA) révolutionnent le développement web. Sans cadre bien défini, leur évaluation via des tests A/B peut toutefois s’avérer compliquée. Découvrez, dans cet article, certains concepts clés ainsi que des stratégies concrètes pour intégrer efficacement Adobe Target aux frameworks SPA courants, comme React, Vue, Angular et Ember.

Comprendre les vues et les évènements de cycle de vie des frameworks

Ces dix dernières années, nous avons déployé Adobe Target dans différents frameworks SPA. Une intégration réussie exige de comprendre les évènements de cycle de vie d’un framework.

Contrairement à ce qu’il se passe sur un site web classique, une personne qui consulte une application monopage reste sur la même page, dont les vues (des pages virtuelles) et les URL s’actualisent au fil de la navigation. Les vues doivent donc être au centre des priorités lors de l’intégration d’un service tiers comme Adobe Target.

Pour faciliter la personnalisation, le concept des vues doit être associé aux évènements du cycle de vie du framework. Le contenu personnalisé peut ainsi être diffusé au moment le plus opportun. Par exemple, le démarrage d’une vue est signalé par l’évènement componentDidMount dans React et par la méthode ngOnInit dans Angular. Il est également possible de tirer parti des évènements de cycle vie du Router d’Angular, comme NavigationEnd, qui actualise entièrement la nouvelle vue et l’URL avant toute initiative de personnalisation.

Prévenir le clignotement lors de la diffusion de contenu personnalisé

La personnalisation des applications monopages s’accompagne d’un clignotement lorsque le contenu par défaut est remplacé par du contenu test. Pour limiter ce phénomène, le contenu personnalisé doit s’afficher le plus vite possible. Chaque nouvelle vue dans l’application monopage doit déclencher une demande de contenu personnalisé afin de fluidifier l’expérience utilisateur.

Utiliser la couche de données

La couche de données joue un rôle majeur dans la gestion de ces dernières, car elle garantit la précision et l’évolutivité de l’analytics et de la personnalisation. En tant que standard web, elle fournit un objet JavaScript structuré pour partager des informations sur la page, l’internaute et d’autres éléments avec des services tiers.

Dans le cas d’Adobe Target, avant d’envoyer une demande, il est indispensable d’initialiser et de définir les valeurs de la couche de données pour optimiser la personnalisation. L’évènement onBeforeEventSend du SDK web Adobe peut servir à les actualiser dynamiquement au préalable.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
"page": {"title": "Getting Started"
}
});

Précharger le contenu pour accélérer la personnalisation

Les services Adobe Experience Platform simplifient l’intégration aux applications monopages. Lorsque vous utilisez le SDK web Adobe, la demande de personnalisation initiale précharge le contenu et le met en cache localement lors du premier chargement de la page par le biais de la commande sendEvent. Les vues suivantes peuvent afficher du contenu personnalisé à partir de ce cache en exécutant la commande sendEvent avec un nom de vue unique. Cette méthode limite les appels réseau et déclenche automatiquement des évènements d’affichage, ce qui accélère la diffusion du contenu.

Résoudre les problèmes liés au modèle DOM virtuel

Les frameworks, comme React, utilisent un modèle DOM (Document Object Model) virtuel pour optimiser les performances, ce qui peut compliquer la personnalisation. Par exemple, le contenu personnalisé appliqué au modèle DOM du navigateur peut être écrasé lors des rendus ultérieurs du modèle DOM virtuel.

Pour remédier au problème, il faut réappliquer le contenu personnalisé après ces rendus, tout en évitant de dupliquer les évènements d’affichage afin de garantir l’exactitude du reporting. La commande applyPropositions du SDK web est très utile dans ce cas de figure.

alloy("applyPropositions",{
"propositions": [],
"metadata": {},
"viewName": ""
});

En guise d’alternative, si vous ne souhaitez pas manipuler le modèle DOM, vous pouvez tester les indicateurs de fonctionnalités pour gérer les expériences prédéfinies de manière dynamique. Le contenu sera ainsi récupéré sous forme d’indicateur signalant à l’application l’élément visuel qui doit être affiché. Dans certains cas, selon l’architecture de votre application monopage, vous pouvez envisager d’adopter une approche côté serveur. Notre équipe de conseil en technologies Adobe pourra vous aider à trouver la meilleure solution.

Adopter les bonnes pratiques d’intégration d’Adobe Target aux applications monopages

• Détection du démarrage des vues. Utilisez les évènements de cycle de vie.
• Mise à jour de la couche de données. Veillez à ce que la mise à jour des valeurs soit terminée avant d’envoyer des demandes de personnalisation à Target.
• Prévention du clignotement. Diffusez le contenu personnalisé préchargé depuis Target dès que possible pour limiter ce risque.
• Gestion du contenu dynamique. Réappliquez le contenu personnalisé en cas de nouveaux rendus dynamiques des vues.

Se lancer dans l’intégration d’Adobe Target aux applications monopages

L’implémentation d’Adobe Target dans les applications monopages exige de bien maîtriser les évènements de cycle de vie liés aux vues, d’utiliser la couche de données de manière efficace et d’appliquer des stratégies pour gérer le rendu du contenu dynamique. En suivant les conseils dispensés dans cet article, vous pourrez créer une personnalisation fluide et sans clignotement.

https://business.adobe.com/fragments/resources/cards/thank-you-collections/target