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 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 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 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 d’Experience Platform Web SDK pour les SPA

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

Vues XDM et applications monopages

Le compositeur d’expérience visuelle d’Adobe Target pour SPA tire parti d’un concept appelé Vues : 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. Une vue 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 vues.

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 vue peut être définie pour l’ensemble de l’écran d’accueil. Cette vue pourrait simplement s’appeler « page d’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 des produits peut être définie comme une vue. Cette vue peut être nommée « products-all ».

É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 le site de produits peuvent être regroupés et considérés comme une vue. 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, mais une vue peut être créée ici pour représenter uniquement la deuxième ligne de produits affichés. 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 passage en caisse, le client a la possibilité de choisir entre une livraison normale ou une livraison express. Une vue peut être n’importe quel groupe d’éléments visuels sur un site. Par conséquent, une vue peut ê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 bien au-delà de cela. Ce ne sont là que quelques exemples de vues pouvant être définies sur un site.

Implémenter des vues XDM

Il est possible d’utiliser les vues XDM dans Adobe Target pour permettre aux spécialistes du marketing d’exécuter des tests A/B et XT sur des 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 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() 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 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 exécuter un test A/B pour déterminer si le fait de modifier la couleur du bouton de bleu à rouge lorsque l’option Diffusion express est sélectionnée peut stimuler les conversions (contrairement à ce qui se passe lorsque la couleur du bouton est bleue 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 une Vue pour chaque préférence de diffusion. Lorsque Diffusion normale est sélectionné, la vue peut être nommée « passage en caisse normal ». Si Diffusion express est sélectionné, la vue peut être nommée « 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 du compositeur d’expérience visuelle pour une SPA

Une fois que vous avez défini vos vues XDM et implémenté sendEvent() avec ces vues XDM transmises, le compositeur d’expérience visuelle sera en mesure de détecter ces vues et de 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

Cliquez sur une action pour mettre en surbrillance l’élément sur le site auquel cette action sera appliquée. Chaque action du compositeur d'expérience visuelle créée sous une vue comporte 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 du compositeur d’expérience visuelle pour créer des actions et des modifications pour des activités A/B ou XT.

Exemple 1 : mise à jour de la vue « accueil »

Plus tôt dans ce document, une vue nommée « home » a été définie 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 la vue « products-page-2 », l’équipe marketing souhaite remplacer le libellé Price par Prix de vente et changer 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

Les vues peuvent être définies à un niveau granulaire, par exemple un état ou une option d’un bouton radio. Plus tôt dans ce document, les vues ont été définies 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 :