Implémenter des applications monopages (SPA) web-spa-implementation

Le SDK Web de Adobe Experience Platform offre des fonctionnalités riches qui permettent à votre entreprise d’exécuter la personnalisation sur les technologies côté client de nouvelle génération, telles que les applications d’une seule page (SPA).

Les sites web traditionnels fonctionnaient sur des modèles de navigation « page à page », appelés également applications multi-pages dans lesquelles les conceptions de site web étaient étroitement couplées à des URL et les transitions d’une page web à une autre nécessitaient un chargement de page.

Les applications web modernes, comme les applications monopages, adoptent plutôt un modèle qui projette rapidement le rendu de l’interface utilisateur du navigateur, ce qui est souvent indépendant des rechargements de page. Ces expériences peuvent être déclenchées par des interactions client, comme faire défiler, cliquer et faire bouger le curseur. À mesure de l’évolution des paradigmes du Web moderne, la pertinence des événements génériques traditionnels, comme le chargement des pages, pour déployer la personnalisation et les expériences ne fonctionnent plus.

Avantages du SDK Web pour SPA web-spa-benefits

Voici quelques avantages de l’utilisation du SDK Web pour vos applications d’une seule page :

Vues XDM et applications monopages web-spa-xdm

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

Les vues sont un groupe logique d’éléments visuels qui, ensemble, constituent une expérience SPA. Une application monopage 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 seule page ou des éléments visuels regroupés dans une page.

Pour montrer plus de détails sur les vues, l’exemple suivant utilise un hypothétique site d’e-commerce.

Le concept de vues peut être étendu bien plus loin. Ce ne sont que quelques exemples de vues qui peuvent être définies sur un site.

Implémentation des vues XDM implement-xdm-views

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

Pour effectuer une configuration de développeur ou développeuse unique, procédez comme suit :

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

Exemples de fonctions sendEvent()

Cette section présente deux exemples montrant comment invoquer la fonction sendEvent() dans React pour une application monopage hypothétique d’e-commerce.

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.

Pour exécuter des tests A/B sur l’ensemble du site d’accueil, sendEvent() doit être appelé avec 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 en définissant la couleur du libellé du prix en rouge après qu’un utilisateur ou une utilisatrice a cliqué pour afficher tous les produits Hommes.

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);
    }
}