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 :

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 :

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.

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 :

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 :

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 :