Implémentation d’applications monopages

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

Les sites web traditionnels fonctionnaient sur des modèles de navigation "page à page", également appelés applications multi-pages, où 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, telles que les applications d’une seule page, ont adopté un modèle qui propulse l’utilisation rapide du rendu de l’interface utilisateur du navigateur, 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 que les paradigmes du web moderne évoluent, la pertinence des événements génériques traditionnels, tels qu’un chargement de page, pour déployer la personnalisation et l’expérimentation ne fonctionne plus.

Avantages du SDK Web Platform pour SPA

Voici quelques avantages offerts par le SDK Web Adobe Experience Platform pour vos applications monopages :

Vues XDM et applications monopages

Le VEC Adobe Target pour SPA tire parti d’un concept appelé Vues : un groupe logique d’éléments visuels qui, ensemble, constituent une expérience SPA. Une application d’une seule page peut donc être considérée comme une transition entre les vues, au lieu des URL, selon les interactions de l’utilisateur. Une Vue peut généralement représenter un site entier ou des éléments visuels regroupés au sein d’un site.

Pour expliquer plus en détail les vues, l’exemple suivant utilise un hypothétique site de commerce électronique en ligne implémenté dans React pour explorer les exemples de vues.

Après avoir accédé au site d’accueil, une image à forte identification fait la promotion d’une vente de Pâques ainsi que des produits les plus récents disponibles sur le site. Dans ce cas, une Vue peut être définie pour l’ensemble de l’écran d’accueil. Ce point de vue peut simplement être appelé "accueil".

À 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 de produits peut être définie sous la forme d’une vue. Cette vue peut être nommée "products-all".

Une Vue pouvant être définie comme un site entier ou un groupe d’éléments visuels sur un site, les quatre produits affichés sur le site de produits peuvent être regroupés et considérés comme une Vue. Cette vue peut être appelé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, mais une Vue peut être créée ici pour représenter uniquement la deuxième ligne de produits qui s’affiche. Le nom de la vue peut être "products-page-2".

Le client ou la cliente décide d’acheter quelques produits sur le site et passe à l’écran de passage en caisse. Sur le site de paiement, le client dispose d’options lui permettant de choisir une diffusion normale ou express. Une Vue peut être n’importe quel groupe d’éléments visuels d’un site. Une Vue peut donc être créée pour les préférences de diffusion et appelée "Préférences de diffusion".

Le concept de Vues peut être étendu beaucoup plus loin. Il ne s’agit que de quelques exemples de vues qui peuvent être définies sur un site.

Implémenter des vues XDM

Les vues XDM peuvent être exploitées dans Adobe Target pour permettre aux marketeurs d’exécuter des tests A/B et XT sur SPA via le compositeur d’expérience visuelle. Pour effectuer une configuration de développeur ou développeuse unique, procédez comme suit :

Exemples de fonctions sendEvent()

Cette section présente trois exemples illustrant l’appel de la fonction sendEvent() dans React pour un hypothétique SPA de commerce électronique.

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() 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

L’équipe marketing souhaite personnaliser la deuxième ligne de produits en définissant la couleur du libellé du prix sur rouge après qu’un utilisateur ait cliqué 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 du test A/B

L’équipe marketing souhaite exécuter un test A/B pour déterminer si la modification de la couleur du bouton du bleu au rouge lorsque la livraison express est sélectionnée peut augmenter les conversions (au lieu de conserver la couleur du bouton bleu pour les deux options de livraison).

Pour personnaliser le contenu du site en fonction des préférences de diffusion sélectionnées, une Vue peut être créée pour chaque préférence de diffusion. Lorsque l’option Livraison normale est sélectionnée, la vue peut être nommée "checkout-normal". Si Livraison express est sélectionné, la vue peut être nommée "Extraction 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 du compositeur d’expérience visuelle pour un SPA

Une fois que vous avez défini vos vues XDM et mis en oeuvre sendEvent() avec ces vues XDM transmises, le VEC pourra détecter ces vues 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 vue spécifique. Toutes les actions d’une vue sont regroupées sous cette vue.

Actions

Cliquer sur une action met en surbrillance l’élément du site sur lequel cette action sera appliquée. Chaque action du VEC créée sous une vue comporte les icônes suivantes : Information, Edit, Clone, Move et Delete. Ces icônes sont expliquées plus en détail dans le tableau qui suit.

Utilisation du compositeur d’expérience visuelle pour SPA exemples

Cette section présente trois exemples d’utilisation du compositeur d’expérience visuelle pour créer des actions et des modifications pour les activités A/B ou XT.

Exemple 1 : mise à jour de la vue "home"

Auparavant, dans ce document, une vue nommée "accueil" était définie pour l’ensemble du site d’accueil. L’équipe marketing souhaite maintenant mettre à jour la vue "accueil" de la manière suivante :

Pour effectuer ces mises à jour dans le VEC, sélectionnez Composer et appliquez ces modifications à la vue "accueil".

Exemple 2 : modifier les étiquettes des produits

Pour la vue "products-page-2", l’équipe marketing souhaite remplacer l’étiquette Price par Prix de vente et changer la couleur de l’étiquette en rouge.

Pour effectuer ces mises à jour dans le compositeur d’expérience visuelle, procédez comme suit :

Exemple 3 : personnaliser le style des préférences de diffusion

Les vues peuvent être définies à un niveau granulaire, par exemple un état ou une option d’un bouton radio. Auparavant, dans ce document, les vues étaient définies pour les préférences de livraison, "checkout-normal" et "checkout-express". L’équipe marketing souhaite remplacer la couleur du bouton par le rouge pour la vue "express".

Pour effectuer ces mises à jour dans le compositeur d’expérience visuelle, procédez comme suit :