Implémentation d’applications d’une seule page
Adobe Experience Platform Web SDK fournit des fonctionnalités riches qui permettent à votre entreprise d’exécuter de la personnalisation sur des technologies côté client de nouvelle génération, telles que les applications d’une seule page (SPA).
Les sites web traditionnels utilisaient des modèles de navigation « page à page », également appelés applications multi-pages. Dans ces sites web, les conceptions sont étroitement liées aux URL et le déplacement entre les pages nécessite un chargement complet de la page.
Les applications web modernes, telles que les applications d’une seule page, ont plutôt adopté un modèle qui propulse l’utilisation rapide du rendu de l’interface utilisateur du navigateur, qui est souvent indépendant des rechargements de page. Ces expériences sont déclenchées par les interactions des clients, telles que les défilements, les clics et les mouvements de curseur. À mesure que les paradigmes du web moderne ont évolué, la pertinence des événements génériques traditionnels, tels que le chargement d’une page, pour déployer la personnalisation et l’expérimentation ne fonctionne plus.
Avantages de la Experience Platform Web SDK pour les SPA
Voici quelques avantages liés à l’utilisation de Adobe Experience Platform Web SDK pour vos applications monopages :
- Capacité à mettre en cache toutes les offres au chargement de la page afin de passer de plusieurs appels serveur à un seul appel serveur.
- Améliorez l’expérience utilisateur sur votre site, car les offres sont affichées immédiatement via le cache sans le délai introduit par les appels au serveur traditionnels.
- Une seule ligne de code et une configuration de développeur unique permettent aux marketeurs de créer et d’exécuter des activités de A/B Test et de Experience Targeting (XT) via le Visual Experience Composer (VEC) sur votre SPA.
Vues XDM et applications d’une seule page
Le compositeur d’expérience visuelle Adobe Target pour les SPA tire parti d’un concept appelé Views : un groupe logique d’éléments visuels qui constituent ensemble une expérience SPA. Une application d’une seule page peut donc être considérée comme une transition par vues, au lieu d’URL, en fonction des interactions utilisateur. Un View peut généralement représenter l’ensemble d’un site ou des éléments visuels regroupés au sein d’un site.
Pour mieux expliquer ce que sont les vues, l’exemple suivant utilise un hypothétique site d’e-commerce en ligne implémenté dans React pour explorer des exemples de Views.
Après avoir accédé au site d'accueil, une image de héros promeut une vente de Pâques ainsi que les nouveaux produits disponibles sur le site. Dans ce cas, une View peut être définie pour l’ensemble de l’écran d’accueil. Ce View pourrait simplement s'appeler « chez soi ».
À mesure que le client s'intéresse davantage aux produits que l'entreprise vend, il décide de cliquer sur le lien Produits. Tout comme le site d’accueil , l’intégralité du site produits peut être définie comme un View. Ce View pourrait être nommé « products-all ».
Puisqu’un View peut être défini comme un site entier ou un groupe d’éléments visuels sur un site. Les quatre produits présentés sur le site des produits pourraient être regroupés et considérés comme des View. Cette vue peut être nommée « produits ».
Lorsque le client décide de cliquer sur le bouton Charger plus pour explorer d’autres produits sur le site, l’URL du site web ne change pas dans ce cas. Cependant, un View peut être créé ici pour représenter uniquement la deuxième ligne de produits qui s’affiche. Le nom du View peut être « products-page-2 ».
Le client décide d'acheter quelques produits sur le site et passe à l'écran de passage en caisse. Sur le site de passage en caisse, le client a la possibilité de choisir entre une livraison normale ou une livraison express. Un View peut être n’importe quel groupe d’éléments visuels sur un site. Par conséquent, un View peut être créé pour les préférences de diffusion et appelé « Préférences de diffusion ».
Le concept de Views peut être étendu bien au-delà de ce scénario. Ces scénarios ne sont que quelques exemples de Views qui peuvent être définis sur un site.
XDM Views d’implémentation
XDM Views peut être utilisé dans Target pour permettre aux marketeurs d’exécuter des tests A/B et XT sur des SPA via Visual Experience Composer. Pour ce faire, les étapes suivantes doivent être effectuées afin de terminer une configuration de développeur ponctuelle :
-
Installez Adobe Experience Platform Web SDK.
-
Déterminez toutes les XDM Views de votre application monopage que vous souhaitez personnaliser.
-
Après avoir défini la XDM Views, pour diffuser des activités A/B ou XT VEC, implémentez la fonction
sendEvent()
avecrenderDecisions
définie surtrue
et la XDM View correspondante dans votre application d’une seule page. Le XDM View doit être transmis enxdm.web.webPageDetails.viewName
. Cette étape permet aux spécialistes du marketing d’exploiter le Visual Experience Composer pour lancer des tests A/B et XT pour ces XDM.code language-javascript alloy("sendEvent", { "renderDecisions": true, "xdm": { "web": { "webPageDetails": { "viewName":"home" } } } });
sendEvent()
, toutes les XDM Views qui doivent être rendues à l’utilisateur final sont récupérées et mises en cache. Les appels sendEvent()
suivants avec XDM Views transmis sont lus à partir du cache et rendus sans appel au serveur.Exemples de fonctions sendEvent()
Cette section présente trois exemples montrant comment appeler la fonction sendEvent()
dans React pour une hypothétique SPA d’e-commerce.
Exemple 1 : page d’accueil du test A/B
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()
devez ê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
L’équipe marketing souhaite personnaliser la deuxième ligne de produits en modifiant la couleur du libellé de prix en rouge après qu’un utilisateur ou une utilisatrice clique sur Charger plus.
function onViewChange(viewName) {
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"web": {
"webPageDetails": {
"viewName": viewName
}
}
}
});
}
class Products extends Component {
render() {
return (
<button type="button" onClick={this.handleLoadMoreClicked}>Load more</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);
}
}
Exemple 3 : préférences de diffusion des tests A/B
L’équipe marketing souhaite effectuer un test A/B pour voir si la couleur du bouton qui passe du bleu au rouge lorsque l’option Diffusion express est sélectionnée. L'équipe pense que cette modification peut augmenter les conversions (plutôt que de garder la couleur bleue du bouton pour les deux options de diffusion).
Pour personnaliser le contenu du site en fonction de la préférence de diffusion sélectionnée, vous pouvez créer un View pour chaque préférence de diffusion. Lorsque l’option Diffusion normale est sélectionnée, le View peut être nommé « passage en caisse normal ». Si l’option Diffusion express est sélectionnée, le View peut être nommé « passage en caisse express ».
function onViewChange(viewName) {
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"web": {
"webPageDetails": {
"viewName": viewName
}
}
}
});
}
class Checkout extends Component {
render() {
return (
<div onChange={this.onDeliveryPreferenceChanged}>
<label>
<input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
<span> Normal Delivery (7-10 business days)</span>
</label>
<label>
<input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
<span> Express Delivery* (2-3 business days)</span>
</label>
</div>
);
}
onDeliveryPreferenceChanged(evt) {
var selectedPreferenceValue = evt.target.value;
onViewChange(selectedPreferenceValue);
}
}
Utilisation de l’Visual Experience Composer pour une SPA
Une fois la définition de vos XDM Views et les sendEvent()
implémentées avec celles XDM Views transmises, le compositeur d’expérience visuelle peut détecter ces Views et permettre aux utilisateurs de créer des actions et des modifications pour les activités A/B ou XT.
panneau Modifications
Le panneau Modifications capture les actions créées pour une View spécifique. Toutes les actions d’une View sont regroupées sous cette View.
Actions
Cliquez sur une action pour mettre en surbrillance l’élément sur le site où cette action est appliquée. Chaque action du compositeur d’expérience visuelle créée sous un View possède les icônes suivantes : Informations, Modifier, Cloner, Déplacer et Supprimer. Ces icônes sont expliquées plus en détail dans le tableau ci-dessous.
Remarque : une fois une opération de clonage effectuée, vous devez accéder au View dans le VEC via Browse pour voir si l’action clonée était une opération valide. Si l’action ne peut pas être appliquée au View, une erreur s’affiche.
Événement de chargement de page : toutes les actions correspondant à l’événement de chargement de page sont appliquées au chargement initial de la page de votre application web.
Remarque : une fois l’opération de déplacement effectuée, vous devez accéder au View dans le compositeur d’expérience visuelle via Browse pour vérifier si le déplacement était une opération valide. Si l’action ne peut pas être appliquée au View, une erreur s’affiche.
Utilisation du compositeur d’expérience visuelle (VEC) pour les SPA
Cette section présente trois exemples d’utilisation de l’Visual Experience Composer pour créer des actions et des modifications pour les activités A/B ou XT.
Exemple 1 : mise à jour de la vue « accueil »
Plus tôt dans cet article, un View nommé « home » a été défini pour l’ensemble du site d’accueil. L’équipe marketing souhaite maintenant mettre à jour la vue d’accueil des manières suivantes :
- Remplacez les boutons Ajouter au panier et Comme par une teinte bleue plus claire. Cette modification doit se produire lors du chargement de la page, car elle implique de modifier les composants de l’en-tête .
- Remplacez le libellé Derniers produits pour 2026 par Produits les plus chauds pour 2026 et modifiez la couleur du texte en violet.
Pour effectuer ces mises à jour dans le compositeur d’expérience visuelle, sélectionnez Composer et appliquez ces modifications à la vue « accueil ».
Exemple 2 : modification des libellés de produit
Pour l’View « products-page-2 », l’équipe marketing souhaite remplacer le libellé Price par Prix de vente et modifier la couleur du libellé en rouge.
Pour effectuer ces mises à jour dans le VEC, les étapes suivantes sont requises :
- Sélectionnez Parcourir dans le VEC.
- Sélectionnez Produits dans la barre de navigation supérieure du site.
- Sélectionnez Charger plus une fois pour afficher la deuxième ligne de produits.
- Sélectionnez Composer dans le VEC.
- Appliquez des actions pour modifier le libellé de texte en Prix de vente et la couleur en rouge.
Exemple 3 : personnalisation du style des préférences de diffusion
Views peut être défini à un niveau granulaire, comme un état ou une option d’un bouton radio. Plus tôt dans cet article, Views ont été définis pour les préférences de diffusion, « checkout-normal » et « checkout-express ». L’équipe marketing souhaite modifier la couleur du bouton en rouge pour la vue « passage en caisse express ».
Pour effectuer ces mises à jour dans le VEC, les étapes suivantes sont requises :
- Sélectionnez Parcourir dans le VEC.
- Ajouter des produits au panier sur le site.
- Sélectionnez l’icône du panier dans le coin supérieur droit du site.
- Sélectionnez Extraire votre commande.
- Sélectionnez le bouton radio Diffusion express sous Préférences de diffusion.
- Sélectionnez Composer dans le VEC.
- Remplacez la couleur du bouton Pay par le rouge.
sendEvent()
est exécutée lorsque le bouton radio Diffusion express est sélectionné. Par conséquent, le compositeur d’expérience visuelle ne prend pas en compte le View « checkout-express » tant que le bouton radio n’est pas sélectionné.