Documentation Journey Optimizer Guide de Journey Optimizer

Implémentation d’applications monopage (SPA) web-spa-implementation

Dernière mise à jour : 17 octobre 2026

Créé pour :

Intermédiaire
Développeur

Le SDK web Adobe Experience Platform offre des fonctionnalités riches qui permettent à votre entreprise d’effectuer des personnalisations sur des technologies côté client de nouvelle génération, telles que les applications monopage (SPA).

Les sites web traditionnels fonctionnent sur des modèles de navigation « page à page », appelés également applications multipages, dans lesquelles les conceptions de site web sont étroitement couplées à des URL et les transitions d’une page web à une autre requièrent un chargement de page.

Les applications web modernes, comme les applications monopages, ont un modèle qui projette rapidement le rendu de l’interface d’utilisation du navigateur, ce qui est souvent indépendant des rechargements de page. Ces expériences sont souvent déclenchées par des interactions clients, comme le fait de faire défiler une page, de cliquer ou de faire bouger le curseur. Avec l’évolution des paradigmes du web moderne, les événements génériques traditionnels, comme le chargement des pages, ne sont plus pertinents pour déployer la personnalisation et les expériences.

Diagramme de cycle de vie de la page.

Avantages de l’utilisation du SDK web pour les SPA web-spa-benefits

Voici quelques avantages de l’utilisation du SDK web pour vos applications monopage :

Capacité à mettre en cache toutes les offres au chargement de la page afin de passer de plusieurs appels serveur à un seul appel serveur.
Vous améliorerez considérablement l’expérience des utilisateurs et utilisatrices finaux sur votre site, car les offres sont immédiatement affichées via le cache, sans les délais des appels de serveur traditionnels.
La configuration de développement ponctuelle permet aux spécialistes marketing de créer et d’exécuter des activités de personnalisation et d’expérimentation via l’éditeur visuel web d’Adobe Journey Optimizer sur votre SPA.

Vues XDM et applications monopage web-spa-xdm

L’éditeur web de Journey Optimizer utilise un concept appelé vues.

Les vues sont un groupe logique d’éléments visuels qui constituent une expérience SPA. Une application monopage (SPA) peut donc être considérée comme une transition entre les vues (et pas entre les URL) basée sur les interactions des utilisateurs et utilisatrices. Une vue peut généralement représenter un site entier, une page unique ou des éléments visuels regroupés sur une page.

L’exemple suivant, basé sur un exemple de site d’e-commerce, permet de mieux expliquer les vues.

Sur la page d’accueil, l’image principale fait la promotion des collections saisonnières ainsi que des différents catalogues de produits disponibles sur le site. Dans ce cas, une vue peut être définie pour l’ensemble de l’écran d’accueil. Cette vue pourrait simplement s’appeler « accueil ».
Comme les produits vendus par l’entreprise intéressent le client ou la cliente, cette personne clique sur le lien Hommes. Comme pour la page d’accueil, l’intégralité de la page Hommes peut être définie comme une vue. Cette vue pourrait s’appeler « hommes ».
Étant donné qu’une vue peut être définie comme un site entier ou un groupe d’éléments visuels sur un site, les quatre produits affichés sur la page des produits peuvent être regroupés et considérés comme une vue. Cette vue pourrait s’appeler « produits ».
Lorsque le client ou la cliente décide de cliquer sur le bouton TOUS LES PRODUITS POUR HOMMES pour afficher d’autres produits sur le site, l’URL du site web ne change pas, mais une vue peut être créée pour représenter uniquement la deuxième ligne de produits affichés. La vue pourrait s’appeler « page-produits-2».
Le client ou la cliente décide d’acheter des produits sur le site et passe à l’écran de passage en caisse. L’écran du panier peut être associé à une vue nommée « panier ». Vous pouvez également utiliser une vue différente sur la page de passage en caisse pour gérer les produits recommandés en dessous.

Le concept des vues a bien d’autres utilités. Il ne s’agit que de quelques exemples de vues pouvant être définies sur un site.

Implémentation des vues XDM implement-xdm-views

Les vues XDM peuvent être utilisées dans Adobe Journey Optimizer pour permettre aux spécialistes marketing d’exécuter des campagnes de personnalisation et d’expérimentation web sur une SPA via l’éditeur visuel web de Journey Optimizer.

Pour cela, suivez les étapes ci-après qui permettent d’effectuer une configuration de développement ponctuelle :

Installez le SDK web Adobe Experience Platform et consultez la page Conditions préalables du canal web.
Choisissez les vues XDM de votre application monopage à personnaliser.
Après avoir défini les vues XDM, pour diffuser du contenu vers ces vues, vous devez implémenter la fonction sendEvent() avec renderDecisions défini sur true et la vue XDM correspondante dans votre application monopage. La vue XDM doit être transmise dans xdm.web.webPageDetails.viewName. Cette étape permet aux spécialiste marketing de voir ces vues dans l’éditeur web de Journey Optimizer et d’y appliquer des modifications de contenu :

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

NOTE

Lors du premier appel sendEvent(), toutes les vues XDM qui doivent être montrées à l’utilisateur ou à l’utilisatrice sont récupérées et mises en cache. Les appels sendEvent() suivants transmettant des vues XDM sont lus à partir du cache et affichés sans appel au serveur.

Exemples de fonctions `sendEvent()`

Cette section présente deux exemples montrant comment appeler la fonction sendEvent() dans React pour une SPA d’e-commerce d’exemple.

Exemple 1 : page d’accueil du test A/B web-spa-sample-1

L’équipe marketing souhaite exécuter des tests A/B sur l’ensemble de la page d’accueil.

Exemple de page d’application monopage.

Pour exécuter des tests A/B sur l’ensemble du site d’accueil, sendEvent() doit être appelé avec le viewName XDM défini sur 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} >

Exemple 2 : produits personnalisés web-spa-sample-2

L’équipe marketing souhaite personnaliser la deuxième ligne de produits pour que l’étiquette de prix soit rouge lorsqu’un utilisateur ou une utilisatrice clique pour voir tous les produits de la catégorie Hommes.

Exemple de page d’application monopage avec des produits personnalisés.

function onViewChange(viewName) {

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

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</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);
    }
}

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page explains how developers implement XDM views in single-page applications (SPAs) using the Adobe Experience Platform Web SDK so marketers can run personalization and experimentation on those views through the Journey Optimizer web visual editor.

Intents:

Understand how XDM views represent SPA experiences instead of URLs
Perform the one-time developer setup to implement XDM views
Deliver content to views using sendEvent() with renderDecisions set to true
Pass the XDM view name in xdm.web.webPageDetails.viewName
Invoke sendEvent() in React for view changes in an SPA

Glossary:

Single-page application (SPA): A modern web application that uses browser UI rendering often independent of page reloads, triggered by interactions such as scrolls, clicks, and cursor movements (product-specific)
View: A logical group of visual elements which together make up an SPA experience; can represent a whole site, a single page, or grouped visual elements within a page (product-specific)
XDM view: A view that can be leveraged in Adobe Journey Optimizer to run web personalization and experimentation campaigns on SPAs via the web visual editor (product-specific)
viewName: The XDM field (xdm.web.webPageDetails.viewName) that carries the view being rendered (product-specific)

Guardrails:

Implementing XDM views requires a one-time developer setup performed in order: install the Adobe Experience Platform Web SDK, check the web channel prerequisites, determine all XDM views to personalize, and implement sendEvent() with renderDecisions set to true and the corresponding XDM view.
The XDM view must be passed in xdm.web.webPageDetails.viewName.
A view name cannot be empty.
On the first sendEvent() call, all XDM views that should be rendered are fetched and cached; subsequent sendEvent() calls with XDM views passed in are read from the cache and rendered without a server call.

Terminology:

Canonical name: XDM view — Acronym: n/a — variants: view, viewName
Synonyms: “single-page application” = “SPA”
Do not confuse: “multi-page application” (page-to-page navigation requiring a page load) ≠ “single-page application” (browser UI rendering independent of page reloads)

FAQ:

Q: What is a view in the context of SPAs? — A logical group of visual elements that make up an SPA experience; it can be a whole site, a single page, or grouped elements within a page.
Q: Where is the view name passed? — In xdm.web.webPageDetails.viewName within the sendEvent() call.
Q: Does every view change trigger a server call? — No; the first sendEvent() call fetches and caches all views to be rendered, and subsequent calls with views passed in are served from the cache without a server call.
Q: What enables marketers to discover views in the web editor? — Implementing sendEvent() with renderDecisions set to true and the corresponding XDM view allows marketers to discover the views inside the Journey Optimizer web editor.

recommendation-more-help

journey-optimizer-help