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 VEC 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 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 « maison ».

À 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 pourrait s’appeler « 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 des 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. Cependant, une Vue peut être créée ici pour représenter uniquement la deuxième ligne de produits qui s’affiche. Le nom Vue 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 Affichage peut être n’importe quel groupe d’éléments visuels sur un site. Par conséquent, un Affichage peut être créé pour les préférences de diffusion et appelé « Préférences de diffusion ».

Le concept de Vues peut être étendu bien au-delà de ce scénario. Ces scénarios ne sont que quelques exemples de vues qui peuvent être définies sur un site.

Implémentation vues XDM

Les vues XDM peuvent être utilisées dans 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 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 une Vue pour chaque préférence de diffusion. Lorsque Diffusion normale est sélectionné, le Affichage peut être nommé « passage en caisse normal ». Si Diffusion express est sélectionné, le Affichage 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 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 est 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 où cette action est 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 les activités A/B ou XT.

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

Plus tôt dans cet article, une Vue nommée « accueil » 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 l’Affichage « products-page-2 », l’équipe marketing souhaite remplacer le libellé Prix 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

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