Show Menu
SUJETS×

Mise en œuvre d’une application d’une seule page

Les sites Web traditionnels fonctionnaient sur des modèles de navigation « page à page », appelés également applications multi-pages dans lesquelles 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, comme les applications monopages, adoptent plutôt un modèle qui projette rapidement le rendu de l’interface utilisateur du navigateur, ce qui est souvent indépendant des rechargements de page. Ces expériences sont souvent déclenchées par des interactions client, comme faire défiler, cliquer et faire bouger le curseur. À mesure de l’évolution des paradigmes du Web moderne, la pertinence des événements génériques traditionnels, comme le chargement des pages, pour déployer la personnalisation et les expériences ne fonctionnent plus.
at.js 2.x offre des fonctionnalités diversifiées qui permettent à votre entreprise d’exécuter la personnalisation sur les technologies côté client de nouvelle génération. Cette version vise à améliorer at.js pour obtenir des interactions harmonieuses avec les applications monopages.
Voici quelques avantages de l’utilisation d’at.js 2.x qui ne sont pas disponibles dans les versions précédentes :
  • 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 considérablement l’expérience de vos utilisateurs finaux sur votre site, car les offres sont immédiatement affichées via le cache, sans délai par les appels de serveur traditionnels.
  • Une simple ligne de code et une configuration de développement unique pour permettre aux spécialistes marketing de créer et d’exécuter des activités A/B et de ciblage d’expérience (WT) via le VEC sur votre application monopage.

Vues cibles et applications d’une seule page Adobe Target

Le VEC de Adobe Target pour les applications SPA tire profit d’un nouveau concept nommé Vues : un groupe logique d’éléments visuels qui, ensemble, forment une expérience pour application d’une seule page. Une application d’une seule page (SPA) peut donc être considérée comme une transition entre les vues (et pas entre les URL) basée sur les interactions des utilisateurs. Une Vue peut généralement représenter un site entier ou des éléments visuels regroupés dans un site.
Pour expliquer plus en détail les Vues, parcourez cet hypothétique site d’e-commerce en ligne implémenté dans React et explorez quelques exemples de Vues. Cliquez sur les liens ci-dessous pour ouvrir ce site dans un nouvel onglet du navigateur.
Lien : Site d'accueil
Lorsque nous arrivons sur la page d’accueil, nous voyons immédiatement une image à forte identification qui présente les soldes de Pâques ainsi que les produits les plus récents en vente sur le site. Dans ce cas, une Vue peut être définie comme tout le site d’accueil. Ceci est bon à noter comme nous allons le développer dans la section Implémentation d’Adobe Target Views ci-dessous.
Lien : Site de produits
Comme les produits vendus par l’entreprise nous paraissent intéressants, nous décidons de cliquer sur le lien Produits. Comme pour le site d’accueil, l’intégralité du site de produits peut être définie comme une ue.V Nous pouvons nommer cet affichage « produits » comme le nom de chemin d’accès dans https://target.enablementadobe.com/react/demo/#/products) .
Au début de cette section, nous avons défini les vues en tant que site entier ou même un groupe d’éléments visuels sur le site. Comme illustré ci-dessus, les quatre produits affichés sur le site peuvent également être regroupés et considérés comme une vue. Si nous souhaitons donner un nom à cet affichage, nous pouvons l’appeler « Produits ».
Nous décidons de cliquer sur le bouton Voir Plus pour découvrir d’autres produits sur le site. L’URL du site Web ne change pas dans ce cas. Mais une Vue ici ne représente que la deuxième ligne des produits ci-dessus. Cette Vue peut être appelée « PAGE-PRODUIT-2 ».
Comme nous avons aimé certains produits sur le site, nous avons décidé d’en acheter quelques uns. Sur la page de paiement du site, certaines options permettent de choisir une livraison normale ou express. Parce qu’une Vue peut être n’importe quel groupe d’éléments visuels sur un site, nous pouvons l’appeler « Vue des préférences de livraison ».
De plus, le concept des Vues peut être beaucoup plus étendu. Si les marketeurs souhaitent personnaliser le contenu du site selon la préférence de livraison sélectionnée, une Vue peut être créée pour chaque préférence de livraison. Dans ce cas, lorsque vous sélectionnez Livraison normale, l’affichage peut être appelé « Livraison normale ». Si l’option Livraison express est sélectionnée, l’affichage peut être appelé « Livraison express ».
Désormais, les spécialistes en marketing peuvent exécuter un test A/B pour déterminer si la modification de la couleur du bleu au rouge lorsque la livraison express est sélectionnée peut augmenter les conversions, contrairement au bouton de couleur bleue pour les deux options de livraison.

Implémentation d’Adobe Target Views

À présent que nous avons examiné le concept d’Adobe Target Views, nous pouvons l’exploiter dans Target pour permettre aux spécialistes du marketing d’exécuter des tests AB et XT sur les applications monopages via le compositeur d’expérience visuelle. Une configuration développeur unique sera nécessaire. Examinons les étapes à suivre.
  1. Installez at.js 2.x.
    Tout d’abord, nous devons installer at.js 2.x. Cette version d’at.js a été développée en tenant compte des applications monopages. Les versions précédentes d’at.js et de mbox.js ne prennent pas en charge les affichages d’Adobe Target et le compositeur d’expérience visuelle pour les applications monopages.
    Téléchargez at.js 2.x via l’interface utilisateur d’Adobe Target située dans Configuration > Implémentation. at.js 2.x peut également être déployé via Adobe Launch. Toutefois, les extensions d’Adobe Target ne sont pas encore disponibles ni prises en charge.
  2. Implémentez la fonction la plus récente d’at.js 2.x triggerView() sur vos sites.
    Après avoir défini les affichages de votre application monopage où vous souhaitez exécuter un test A/B ou XT, implémentez la fonction triggerView() d’at.js 2.x avec les affichages transmis sous forme de paramètres. Cela permet aux spécialistes du marketing d’utiliser le compositeur d’expérience visuelle pour concevoir et exécuter les tests A/B et XT pour ces vues définies. Si la fonction triggerView() n’est pas définie pour ces affichages, le VEC ne détectera pas les affichages. Les spécialistes en marketing ne peuvent donc pas utiliser le VEC pour concevoir et exécuter des tests A/B et XT.
    adobe.target.triggerView(viewName, options)
    Paramètre
    Type
    Obligatoire ?
    Validation
    Description
    viewName
    Chaîne
    Oui
    1. Aucun espace à la fin.
    2. Ne peut pas être vide.
    3. Le nom de la vue doit être unique pour toutes les pages.
    4. Avertissement  : le nom de l’affichage ne doit pas commencer ou se terminer par «  /  ». Cela est dû au fait que le client extrait généralement le nom de la vue à partir du chemin d’URL. Pour nous, « accueil » et «  /home  » sont différents.
    5. Avertissement  : la même vue ne doit pas être déclenchée plusieurs fois avec l’option {page: true} .
    Transmettez n’importe quel nom en tant que type de chaîne que vous souhaitez représenter votre vue. Ce nom d’affichage s’affiche dans le panneau Modifications du compositeur d’expérience visuelle pour que les marketeurs puissent créer des actions et exécuter leurs activités A/B et XT.
    Options
    Objet
    Non
    options > page
    Booléen
    Non
    TRUE  : la valeur par défaut de la page est true. Lorsque page=true , des notifications sont envoyées aux serveurs Edge pour incrémenter le nombre d’impressions.
    FALSE  : lorsque page=false , les notifications ne sont pas envoyées pour incrémenter le nombre d’impressions. Cette opération ne doit être utilisée que si vous souhaitez recréer un composant sur une page avec une offre.
    Examinons maintenant quelques exemples d’utilisation pour appeler la fonction triggerView() dans React pour notre hypothétique SPA de commerce électronique :
    Lien : Site d'accueil
    En tant que marketeurs, si nous souhaitons exécuter des tests A/B sur tout le site d’accueil, nous pouvons nommer la vue « accueil » :
 function targetView() {
   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);
   }

   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(viewName);
   }
 }

 // react router v4
 const history = syncHistoryWithStore(createBrowserHistory(), store);
 history.listen(targetView);

 // react router v3
 <Router history={hashHistory} onUpdate={targetView} >

Lien : Site Produits
Examinons maintenant un exemple un peu plus complexe. En tant que marketeurs, nous voulons personnaliser la deuxième ligne des produits en modifiant la couleur de l’étiquette « Prix » en rouge après avoir cliqué sur le bouton Charger plus.
 function targetView(viewName) {
   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(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});
     targetView('PRODUCTS-PAGE-' + page);
   }
 }

Si les marketeurs souhaitent personnaliser le contenu du site selon la préférence de livraison sélectionnée, une Vue peut être créée pour chaque préférence de livraison. Dans ce cas, lorsque vous sélectionnez Livraison normale, l’affichage peut être appelé « Livraison normale ». Si l’option Livraison express est sélectionnée, l’affichage peut être appelé « Livraison express ».
Les marketeurs souhaitent à présent exécuter un test AB pour déterminer si la modification de la couleur du bleu au rouge augmente les conversations lorsque la livraison express est sélectionnée, au lieu de conserver la couleur du bouton bleu pour les deux options de livraison.
 function targetView(viewName) {
   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(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;
     targetView(selectedPreferenceValue);
   }
 }

Diagrammes du système at.js 2.x

Les diagrammes suivants vous aident à comprendre le flux de tâches d’at.js 2.x avec les vues et la manière dont cela améliore l’intégration des applications web monopages. Pour une meilleure présentation des concepts utilisés dans at.js 2.x, voir Implémentation d’applications monopage .
Étape
Détails
1
L’appel renvoie le Experience Cloud ID si l’utilisateur est authentifié. Un autre appel synchronise l’ID de client.
2
La bibliothèque at.js se charge de manière synchrone et masque le corps du document.
at.js peut également être chargé de manière asynchrone avec une option pré-masquant l’extrait de code implémenté sur la page.
3
Une demande de chargement de page est faite, incluant tous les paramètres configurés (MCID, SDID et ID client).
4
Les scripts de profil s’exécutent, puis sont introduits dans le magasin de profils. Le magasin demande des audiences qualifiées auprès de la bibliothèque d’audiences (par exemple, audiences partagées depuis Adobe Analytics, Gestion de l’audience, etc.).
Les attributs du client sont envoyés par lot dans le magasin de profils.
5
Selon les paramètres de requête d’URL et les données de profil, Target décidez quelles activités et expériences renvoyer au visiteur pour la page active et les futures vues.
6
Le contenu ciblé est renvoyé à la page, comprenant, éventuellement, les valeurs de profil pour une personnalisation plus poussée.
Le contenu ciblé sur la page actuelle est affiché aussi rapidement que possible, sans scintillement du contenu par défaut.
Contenu ciblé pour les vues présentées à la suite d’actions de l’utilisateur dans une application d’une seule page cache dans le navigateur, afin qu’elles puissent être appliquées instantanément sans appel au serveur supplémentaire lorsque les vues sont triggerView() déclenchées.
7
Les données Analytics sont envoyées aux serveurs de collecte de données.
8
Les données ciblées sont associées aux données d’Analytics par l’intermédiaire du SDID et sont traitées dans le stockage de rapports d’Analytics.
Il est alors possible de consulter les données Analytics dans Analytics et dans Target par l’intermédiaire des rapports Analytics for Target (A4T).
Désormais, où que soit implémenté triggerView() sur votre application d’une seule page, les vues et actions sont récupérées depuis le cache et présentées à l’utilisateur sans appel au serveur. triggerView() envoie également une demande de notification au serveur principal Target afin d’incrémenter et d’enregistrer le nombre d’impressions.
Étape
Détails
1
triggerView() est appelée dans l’application d’une seule page pour afficher les vues et appliquer les actions pour modifier les éléments visuels.
2
Le contenu ciblé pour la vue est lu à partir du cache.
3
Le contenu ciblé s’affiche aussi rapidement que possible, sans scintillement du contenu par défaut.
4
La demande de notification est envoyée au magasin de profils Target pour compter le visiteur dans l’activité et incrémenter les mesures.
5
Les données Analytics sont envoyées aux serveurs de collecte de données.
6
Les données Target sont associées aux données Analytics par l’intermédiaire du SDID et sont traitées dans le magasin de rapports Analytics. Il est alors possible de consulter les données Analytics à la fois dans Analytics et Target, par l’intermédiaire des rapports d’A4T.

Compositeur d’expérience visuelle pour les applications monopages

Après avoir installé le fichier at.js 2.x et l’avoir ajouté triggerView() à votre site, utilisez VEC pour exécuter les activités AB et XT. Pour plus d’informations, reportez-vous au Compositeur d’expérience visuelle pour application d’une seule page (SPA) .
Le compositeur d’expérience visuelle pour applications d’une seule page est en fait le même compositeur d’expérience visuelle que celui que vous utilisez sur les pages web ordinaires, mais certaines fonctionnalités supplémentaires sont disponibles lorsque vous ouvrez une application d’une seule page avec l’implémentation triggerView() .

Utilisez le déclencheur d’affichage pour vérifier que A4T fonctionne correctement avec at.js 2.x et les applications monopages.

Pour garantir qu’ Analytics pour Target (A4T) fonctionne correctement avec at.js 2.x, veillez à envoyer le même SDID dans la requête Target et dans la requête Analytics.
En tant que bonnes pratiques liées aux applications monopages :
  • Utilisez des événements personnalisés pour signaler qu’un élément intéressant se produit dans l’application
  • Déclenchez un événement personnalisé avant que la vue ne commence le rendu
  • Déclenchement d’un événement personnalisé lorsque la vue termine le rendu
at.js 2.x a ajouté une nouvelle fonction API déclencheur de vue() . Vous devez utiliser triggerView() pour informer at.js qu’une vue commence le rendu.
Pour découvrir comment combiner des événements personnalisés, at.js 2.x et Analytics, voyons un exemple. Cet exemple suppose que la page HTML contient l’API visiteur, suivie d’at.js 2.x, suivie d’AppMeasurement.
Supposons que les événements personnalisés suivants soient présents :
  • at-view-start - Lorsque la vue commence le rendu
  • at-view-end - Lorsque la vue termine le rendu
Pour vérifier qu’A4T fonctionne avec at.js 2.x,
Le gestionnaire de démarrage d’affichage doit se présenter comme suit :
document.addEventListener("at-view-start", function(e) {
  var visitor = Visitor.getInstance("<your Adobe Org ID>");
  
  visitor.resetState();
  adobe.target.triggerView("<view name>");
});

Le gestionnaire de fin d’affichage doit ressembler à ceci :
document.addEventListener("at-view-end", function(e) {
  // s - is the AppMeasurement tracker object
  s.t();
});

Vous devez déclencher les événements at-view-start et at-view-end . Ces événements ne font pas partie des événements personnalisés at.js.
Bien que ces exemples utilisent du code JavaScript, tout cela peut être simplifié si vous utilisez un gestionnaire de balises, tel qu’Adobe Launch .
Si les étapes précédentes sont suivies, vous devez disposer d’une solution A4T robuste pour les applications monopages.

Meilleures pratiques de mise en oeuvre

Les API at.js 2.x vous permettent de personnaliser votre Target implémentation de plusieurs manières, mais il est important de suivre l’ordre correct des opérations pendant ce processus.
Les informations suivantes décrivent l’ordre des opérations que vous devez suivre lors du chargement d’une application d’une seule page pour la première fois dans un navigateur et pour tout changement de qui se produit par la suite.

Ordre des opérations pour le chargement initial de la page

Étape
Action
Détails
1
Charger VisitorAPI JS
Cette bibliothèque est chargée d’affecter un ECID au. Cet identifiant est ensuite utilisé par d’autres Adobe solutions de la page Web.
2
Chargement d’at.js 2.x
at.js 2.x charge toutes les API nécessaires à l’implémentation des Target requêtes et des de.
3
Exécuter la Target requête
Si vous disposez d’une couche de données, nous vous recommandons de charger les données critiques à envoyer Target avant d’exécuter une Target requête. Cela vous permet targetPageParams d’envoyer les données que vous souhaitez utiliser pour le ciblage. Vous devez vous assurer que vous demandez execute > pageLoad ainsi que prefetch > dans cet appel d’API. si vous avez défini pageLoadEnabled et viewsEnabled , les deux, exécutez > pageLoad et prefetch > automatiquement avec l’étape 2 ; sinon, vous devez utiliser l’ getOffers() API pour effectuer cette requête.
4
L’appel triggerView()
Etant donné que la Target requête que vous avez initiée à l’étape 3 peut renvoyer des expériences pour l’exécution du chargement de page ainsi que pour les de, assurez-vous triggerView() qu’elle est appelée une fois la Target requête renvoyée et termine l’application du au cache. Vous ne devez exécuter cette étape qu’une seule fois par .
5
Appelez la Analytics balise de de page
Cette balise envoie le SDID associé aux étapes 3 et 4 à Analytics pour l’assemblage des données.
6
Appel supplémentaire triggerView({"page": false})
Il s’agit d’une étape facultative pour les infrastructures d’application monopage qui peuvent potentiellement rendre à nouveau certains composants de la page sans qu’un changement se produise. Dans ce cas, il est important d’appeler cette API pour vous assurer que Target les expériences sont réappliquées une fois que la structure d’application d’une seule page a rendu les composants. Vous pouvez exécuter cette étape autant de fois que vous le souhaitez afin de vous assurer que Target les expériences persistent dans votre d’application d’une seule page.

Ordre des opérations pour le changement de d’application d’une seule page (aucun rechargement de page complète)

Étape
Action
Détails
1
L’appel visitor.resetState()
Cette API permet de s’assurer que le SDID est recréé pour le nouveau de au cours de son chargement.
2
Mettre à jour le cache en appelant l’ getOffers() API
Il s’agit d’une étape facultative à entreprendre si ce changement de de est susceptible de qualifier le actuel pour plus de Target de la ou de les exclure de l’. A ce stade, vous pouvez également choisir d’envoyer des données supplémentaires pour Target activer d’autres fonctionnalités de ciblage.
3
L’appel triggerView()
Si vous avez exécuté l’étape 2, vous devez attendre la Target requête et appliquer le au cache avant d’exécuter cette étape. Vous ne devez exécuter cette étape qu’une seule fois par .
4
L’appel triggerView()
Si vous n’avez pas exécuté l’étape 2, vous pouvez exécuter cette étape dès que vous avez terminé l’étape 1. Si vous avez exécuté les étapes 2 et 3, ignorez cette étape. Vous ne devez exécuter cette étape qu’une seule fois par .
5
Appelez la Analytics balise de de page
Cette balise envoie le SDID associé aux étapes 2, 3 et 4 Analytics pour l’assemblage des données.
6
Appel supplémentaire triggerView({"page": false})
Il s’agit d’une étape facultative pour les infrastructures d’application monopage qui peuvent potentiellement rendre à nouveau certains composants de la page sans qu’un changement se produise. Dans ce cas, il est important d’appeler cette API pour vous assurer que Target les expériences sont réappliquées une fois que la structure d’application d’une seule page a rendu les composants. Vous pouvez exécuter cette étape autant de fois que vous le souhaitez afin de vous assurer que Target les expériences persistent dans votre d’application d’une seule page.

Vidéos de formation

Les vidéos suivantes comprennent davantage d’informations :

Fonctionnement d’at.js 2 badge


Voir Présentation du fonctionnement d’at.js 2.x pour plus d’informations.

Mise en oeuvre d’at.js 2.x dans un badge de


Using the VEC for SPAs in Adobe Target