Condition préalable

Configuration du site de référence Geometrixx Finance comme décrit dans Prise en main du site de référence Geometrixx Finance.

Scénario de site de référence

Geometrixx Finance est une organisation de premier plan dans le domaine des services financiers qui offre des solutions financières complètes et personnalisées pour répondre aux exigences de différents profils clients. Elle vient de lancer une gamme de cartes de crédit destinée à des clients choisis. Son objectif est d’accéder à ces clients et à d’autres publics potentiels sur leur périphérique préféré, de leur présenter les avantages des cartes proposées et de les aider à adhérer au programme de carte de crédit. En outre, elle cherche à lancer des produits financiers supplémentaires que les clients peuvent trouver intéressants.

L’infographie suivante illustre le déroulement détaillé du scénario de site de référence.

Infographie du site de référence Geometrixx Finance

Le scénario met en scène les personnages suivants :

  • Sarah Rose, une cliente potentielle de Geometrixx Finance
  • John Doe, déjà client de Geometrixx Finance
  • Gloria Rios, chef de la division Carte de crédit, Geometrixx Finance

A présent, étudions en détail les étapes du scénario du site de référence pour voir comment AEM forms aide Geometrixx Finance à atteindre son objectif.

Remarque :

Les étapes décrites dans la présentation, où Sarah et John sont tous deux impliqués, incluent des descriptions et des images concernant Sarah. Toutefois, elles s’appliquent également à John. Toutes les différences entre Sarah et John sont évoquées dans les étapes.

Geometrixx Finance lance une campagne par courrier électronique pour atteindre des clients sélectionnés

Geometrixx Finance lance une campagne par courrier électronique personnalisé pour sélectionner des clients, y compris Sarah et John, et leur présenter le programme de carte de crédit. Le courrier électronique explique les avantages des cartes de crédit proposées et comporte également un bouton pour adhérer au programme de carte de crédit.

cc-newsletter-mobile_updated
e-Mail sur mobile

cc-newsletter-desktop_updated
e-Mail sur le bureau


Fonctionnement

AEM forms intègre Adobe Campaign pour diffuser des formulaires et des documents par des canaux marketing en ligne et hors ligne. Le message fait partie d’une campagne de marketing par courrier électronique créée dans AEM et utilisant des composants Adobe Campaign. Vous remarquerez que le message représenté dans l’illustration est personnalisé pour Sarah. Le GeometrixxFinanceWorkflow est utilisé pour déclencher l’adresse.

Démonstration

Si vous avez configuré le site de référence Geometrixx Finance comme décrit dans Prise en main du site de référence Geometrixx Finance, vous avez reçu un courrier électronique à l’adresse électronique que vous avez spécifiée lors de la création des utilisateurs, Sarah Rose et John Doe.

Sarah trouve l’offre intéressante et choisit d’y adhérer

Sarah examine l’offre puis choisit de faire la demande d’une carte de crédit. Elle clique sur le bouton Demander ma carte dans le courrier électronique.

Si Sarah clique sur Demander ma carte à partir de son périphérique mobile, la demande de carte de crédit s’ouvre dans une vue optimisée pour l’affichage sur un périphérique mobile. Au lieu de présenter le formulaire de demande en entier dans une seule vue, cette vue affiche une section à la fois de l’application. Cela permet à Sarah d’afficher et de fournir des informations progressivement lorsqu’elle navigue d’une section à l’autre.

Les illustrations suivantes présentent quelques-uns des écrans qui s’affichent lorsque Sarah parcourt la demande de carte de crédit sur son périphérique mobile.

cc-application-mobile1
cc-application-mobile3
cc-application-mobile2_updated
cc-application-mobile4

Si Sarah clique sur Demander ma carte à partir du bureau de son ordinateur, le formulaire de demande de carte de crédit s’ouvre, comme le montre l’illustration suivante. Le formulaire de demande est organisé en différentes sections, comme une mise en page de carte. Sarah navigue d’une section à l’autre pour remplir les renseignements requis.

cc-application-desktop

Sarah remplit une partie de la demande lorsqu’elle se rappelle qu’elle doit se précipiter à une réunion. Elle clique donc sur Revenir plus tard dans le formulaire de demande, ce qui enregistre toutes les informations que Sarah a déjà fournies. Une boîte de dialogue apparaît pour confirmer si elle souhaite recevoir un courrier électronique contenant un lien avec sa demande partiellement remplie, pour la terminer ultérieurement. Sarah clique sur Envoyer un courrier.

come-back-later-mobile
come-back-later-desktop

Geometrixx Finance envoie le courrier électronique suivant à Sarah. Il comprend un bouton Reprendre qui la ramène à son brouillon de formulaire de demande. Les illustrations suivantes montrent le message reçu sur mobile et sur ordinateur.

resume-mobile_updated
resume-desktop_updated

Remarque :

John Doe, qui est un client existant de Geometrixx Finance, peut également accéder au brouillon de la demande de carte de crédit dans son dossier Brouillons sur le portail Geometrixx Finance, lorsqu’il est connecté.

jdoe-draft-mobile
jdoe-drafts

Fonctionnement

Le bouton Demander ma carte du courrier électronique conduit Sarah à la demande de carte de crédit. La demande est un formulaire adaptatif fourni avec le package cq-geometrixx-finance-adaptiveform-pkg.zip, tandis que le package cq-geometrixx-finance-layout-pkg.zip définit la présentation de la demande. Le formulaire adaptatif utilise divers composants et expressions pour collecter des renseignements et s’adapte aux réponses des utilisateurs.

Le formulaire adaptatif est configuré pour modifier la disposition, selon que le formulaire est ouvert à partir d’un périphérique mobile ou d’un ordinateur. Il affiche la mise en page pour périphériques mobiles progressive si vous y accédez à partir d’un périphérique mobile, qui présente un nombre spécifié de champs à la fois et non l’intégralité du formulaire. Dans la vue affichée sur le bureau d’un ordinateur, il affiche le formulaire adaptatif complet.

Le bouton Revenir plus tard lance une action d’envoi qui génère un identifiant unique de l’utilisateur et enregistre la demande partiellement remplie en tant que brouillon dans un nœud du référentiel AEM. En outre, il affiche une autorisation de recherche de boîte de dialogue pour envoyer un courrier électronique contenant un lien vers le nœud contenant le brouillon de la demande. Le bouton Envoyer un courrier dans la boîte de dialogue de confirmation déclenche un courrier électronique contenant un lien vers le nœud qui contient le brouillon. La configuration de l’expression Reciblage cron, décrite dans Prise en main du site de référence Geometrixx Finance, déclenche le courrier électronique à 2 h 00 chaque jour pour les candidats n’ayant pas terminé leur brouillon de demande.

Démonstration

Cliquez sur le bouton Demander ma carte dans le message reçu à l’étape précédente. Renseignez quelques champs, explorez divers composants du formulaire adaptatif, puis cliquez sur Revenir plus tard pour recevoir un autre courrier électronique avec un bouton Reprendre qui pointe vers le brouillon de demande.

Si vous n’avez pas configuré Campaign et par conséquent n’avez reçu aucun courrier à votre adresse électronique, vous pouvez afficher le formulaire de demande tel qu’il apparaîtrait à Sarah en consultant l’URL suivante.

http://<hôte>:<port>/content/geometrixx-finance/global/fr/cards/credit/apply.html?enableAnonymous=true&firstName=Sarah&lastName=Rose&email=<votre adresse e-mail>&cardType=2

Sarah reprend et envoie la demande

Sarah revient ultérieurement, vérifie sa messagerie électronique, puis clique sur le bouton Reprendre dans le courrier électronique reçu de Geometrixx Finance, ce qui la redirige vers la demande partiellement remplie de carte de crédit. Les informations qu’elle a fournies antérieurement sont préremplies. Elle navigue d’une section du formulaire à la suivante, complète la demande, puis l’envoie.

Fonctionnement

Le bouton Reprendre dans le courrier électronique redirige Sarah vers le nœud contenant le brouillon de sa demande.

Démonstration

Si vous avez configuré Campaign comme décrit dans Prise en main du site de référence Geometrixx Finance, vous avez reçu un courrier électronique contenant un lien vers le brouillon de la demande à l’adresse électronique que vous avez spécifiée pour Sarah. Allez-y, renseignez les sections restantes dans la demande et envoyez-la.

Geometrixx Finance reçoit et approuve la demande

Geometrixx Finance reçoit la demande de carte de crédit envoyée par Sarah. La demande passe à Gloria Rios de la division Carte de crédit de Geometrixx Finance. Elle est en train de réviser la demande, exécute l’évaluation des risques et l’approuve.

Fonctionnement

Lorsque Sarah envoie la demande, un processus Workbench implémenté sur le site de référence se déclenche et une tâche est assignée à Gloria Rios pour examiner la demande, l’approuver ou la rejeter. L’utilisateur Gloria Rios a été créé automatiquement lorsque vous avez installé AEM Forms JEE, comme décrit dans Prise en main du site de référence Geometrixx Finance.

L’image suivante illustre le flux de tâches d’approbation qui traite la demande de carte de crédit et génère une sortie PDF à partir de la demande.

approval-workflow

Gloria ouvre la tâche dans HTML Workspace, passe en revue les détails de la demande de carte de crédit et les approuve. En fonction des détails fournis par Sarah, les tâches d’approbation de carte de crédit incluent un résumé des risques généré par l’étape de traitement des données de la demande dans le flux de tâches d’approbation. Il aide Gloria à évaluer les risques associés à l’approbation de la carte de crédit.

html-ws

Démonstration

Si vous avez installé le serveur AEM forms JEE, vous pouvez accéder à HTML Workspace à l’adresse http://<hostname>:<port>/lc/ws, où l’hôte et le port se rapportent à l’emplacement d’installation du serveur JEE. Connectez-vous à HTML Workspace à l’aide de grios/password en tant que nom d’utilisateur/mot de passe pour Gloria Rios, et approuvez la demande de carte de crédit.

Sarah reçoit le kit de bienvenue

Lorsque la demande de carte de crédit de Sarah est approuvée, elle reçoit un courrier électronique contenant un lien vers le kit de bienvenue. Elle ouvre le kit de bienvenue, qui inclut les détails du compte de sa carte de crédit. Le kit de bienvenue comprend également une fenêtre de carrousel qui affiche des offres promotionnelles personnalisées pour Sarah. Lorsqu’elle parcourt la page, elle découvre que le kit de bienvenue contient un formulaire incorporé de demande de carte ajoutée.Sarah remplit rapidement les détails requis du kit de bienvenue et demande la carte ajoutée. Une boîte de dialogue de confirmation pour la demande de carte ajoutée s’affiche.

welcome-kit-mobile_updated
welcome-kit-desktop_UPDATED

Le kit de bienvenue est personnalisé pour Sarah et affiche des informations la concernant. Il fournit une option pour télécharger une version PDF du kit de bienvenue. Le bouton fléché au bas de l’écran permet à Sarah de faire défiler la page vers le bas et de parcourir d’autres sections du kit de bienvenue.

welcome-kit-mobile2
welcome-kit-desktop2

Le kit de bienvenue réitère également les avantages de la carte de crédit dans une mise en page de carte interactive. Alors que les avantages des cartes sont statiques dans la version mobile, les cartes sont dynamiques dans la version ordinateur et les détails des avantages s’affichent lorsque Sarah les survole avec le curseur, comme illustré dans l’illustration ci-dessous.

welcome-kit-benefits

Le kit de bienvenue comprend un autre formulaire de demande que Sarah peut remplir et envoyer pour solliciter une carte ajoutée depuis le kit de bienvenue, sans avoir à accéder au portail ou au bureau Geometrixx Finance.

welcome-kit-mobile3
welcome-kit-desktop3_UPDATED

Remarque :

John Doe étant déjà client chez Geometrixx Finance, il peut effectuer un suivi sur l’état du statut de sa demande et afficher le kit de bienvenue sur le portail Geometrixx Finance.

application-status-mobile
application-status

Fonctionnement

Le kit de bienvenue est un document adaptatif inclus dans le package cq-geometrixx-finance-content-pkg.zip. Les offres promotionnelles dans le kit de bienvenue sont fournies par le serveur d’Adobe Target. Les offres sont personnalisées et ciblées pour des segments de clientèle spécifiques. Le kit de bienvenue récupère les offres à partir d’un serveur Adobe Target préconfiguré pour un segment d’audience constitué de clientes - femmes - de carte Platine.

Les cartes interactives dans la version pour ordinateur, qui présentent les avantages de la carte de crédit dans le kit de bienvenue, est une disposition personnalisée créée à l’aide de la carte de mise en page par défaut d’un fragment de document.

La demande de carte ajoutée est un formulaire adaptatif inclus dans le document adaptatif du kit de bienvenue.

Démonstration

Cliquez sur le bouton Reprendre dans le courrier électronique que vous avez reçu à l’étape précédente. Il ouvre le brouillon de la demande. Renseignez toutes les informations et envoyez la demande. Vous recevrez ensuite un kit de bienvenue. Examinez le kit de bienvenue.

Si vous n’avez pas configuré Campaign et par conséquent, n’avez pas reçu le courrier électronique contenant le kit de bienvenue, vous pouvez en prendre connaissance à l’adresse URL suivante :

http:// <hôte>:<port>/content/forms/af/geometrixx-finance/credit-card-welcome-kit.html?wcmmode=disabled&cardType=2&gender=2&dataRef=crx:///content/welcomeSarah.xml

Sarah reçoit un relevé de carte de crédit

Comme Sarah commence à utiliser la carte de crédit, elle reçoit ensuite un autre courrier électronique de Geometrixx Finance comprenant son relevé de carte de crédit. Les illustrations suivantes montrent le courrier électronique contenant un lien vers un relevé de carte de crédit sur un appareil mobile.

statement-newsletter-mobile1_updated
statement-newsletter-mobile2

Le courrier électronique contenant un lien vers le relevé de carte de crédit se présente comme suit sur un bureau d’ordinateur.

statement-email-desktop_updated

Sarah clique sur Afficher le relevé dans le courrier électronique pour afficher le relevé de carte de crédit. Le relevé interactif est constitué de plusieurs éléments :

  • Récapitulatif du relevé
  • Rapport détaillé des dépenses
  • Analyse graphique des dépenses
  • Option pour effectuer un paiement pour le montant dû indiqué par le relevé
  • Téléchargement du reçu de paiement

Les illustrations suivantes montrent une partie différente du relevé de carte de crédit sur un périphérique mobile, lorsque Sarah le fait défiler vers le bas.

CCstatement1_updated
CCstatement2

Sarah n’a pas besoin d’accéder au portail ni d’effectuer une recherche dans son courrier électronique pour afficher son dernier relevé de carte de crédit. Elle a juste à cliquer sur le bouton Afficher mon dernier relevé depuis un relevé quelconque pour ouvrir son dernier relevé.

CCstatement3
CCstatement4

Le relevé détaillé est présenté dans un tableau dynamique et offre la possibilité de payer une partie ou le montant dû complet indiqué dans le relevé.

CCstatement5

Sarah effectue le paiement dû depuis la page du relevé et dispose d’une option pour télécharger immédiatement le reçu de paiement.

Le relevé de carte de crédit tel qu’il sera rendu sur un bureau d’ordinateur est illustré ci-dessous.

statement-desktop_updated

Fonctionnement

Le relevé de carte de crédit est un document adaptatif. Il est généré à l’aide du traitement par lots et envoyé via Campaign. Le tableau détaillé des dépenses dans le relevé est un tableau dynamique. Le graphique de l’analyse des dépenses est un composant personnalisé de graphique qui lit le tableau des dépenses et génère un graphique circulaire.

Démonstration

Vous pouvez tester le relevé de carte de crédit interactif à l’adresse URL suivante :

http://<nom_hôte>:<port>/content/forms/af/geometrixx-finance/account-statement.html?wcmmode=disabled&dataRef=crx:///content/geomtrixx-finance-statement-data/srose/april.xml

Geometrixx Finance analyse les performances du formulaire de demande de carte de crédit

Geometrixx Finance, de temps à autres, examine les performances de son formulaire de demande de carte de crédit pour vérifier tous les problèmes que les clients peuvent rencontrer. Cette analyse lui permet de prendre les meilleures décisions concernant les modifications requises par la demande de carte de crédit afin d’améliorer l’expérience utilisateur, de réduire les taux d’abandon de formulaire et par conséquent, d’augmenter la conversion. Le site tire profit de l’intégration d’Adobe Analytics à AEM forms pour son analyse. L’illustration suivante représente le tableau de bord des analyses.

Pour plus d’informations sur la façon d’interpréter le tableau de bord des analyses, reportez-vous à la section Affichage et compréhension des rapports d’analyse AEM Forms.

cc-application-analytics

Fonctionnement

Les mesures de performances du formulaire de demande de carte de crédit font l’objet d’un suivi à l’aide d’Adobe Analytics. Pour plus d’informations sur la configuration d’Adobe Analytics et l’affichage des rapports, voir Configuration des analyses de formulaires et documents.

Démonstration

Pour que vous puissiez afficher et explorer le rapport d’analyse, nous fournissons des données sources pour la demande de carte de crédit sur le site de référence. Effectuez les étapes suivantes pour afficher le rapport avec les données sources :

  1. Accédez à l’interface utilisateur Formulaires et documents à l’adresse http://<hostname>:<port>/aem/forms.html/content/dam/formsanddocuments.
  2. Cliquez pour ouvrir le dossier Geometrixx Finance.
  3. Cliquez sur l’outil Sélectionner dans la barre d’outils, puis sélectionnez le formulaire adaptatif Demande de carte de crédit.
  4. Cliquez sur Plus dans la barre d’outils, puis cliquez sur Rapport d’analyse pour générer le rapport d’analyse avec des données sources.

Test A/B de la demande de carte de crédit

En plus d’analyser les performances de la demande de carte de crédit et de l’améliorer constamment, Geometrixx Finance tire parti de l’intégration d’AEM forms avec Target pour créer des tests A/B. Cela lui permet de proposer des expériences différentes du formulaire de demande de carte de crédit et d’identifier l’expérience qui entraîne un meilleur taux de conversion en termes de remplissage et d’envoi du formulaire.

Pour configurer Target dans le serveur AEM forms, voir Configuration et intégration de Target dans AEM forms.

Effectuez les étapes suivantes pour expérimenter la création d’un test A/B pour le formulaire de demande de cartes de crédit de Geometrixx Finance :

  1. Accédez à Formulaires & Documents à l’adresse http://<hostname>:<port>/aem/forms.html/content/dam/formsanddocuments.
  2. Cliquez pour ouvrir le dossier Geometrixx Finance.
  3. Cliquez sur l’outil Sélectionner dans la barre d’outils.
  4. Sélectionnez le formulaire adaptatif Demande de carte de crédit.
  5. Cliquez sur le bouton Plus dans la barre d’outils et sélectionnez Configurer les tests A/B. La page de configuration des tests A/B s’ouvre.
  6. Spécifiez un Nom d’activité.
  7. Dans la liste déroulante Public, sélectionnez un public auquel vous souhaitez proposer différentes expériences du formulaire. Par exemple, les Visiteurs utilisant Chrome.
  8. Dans les champs Distribution d’expérience pour les expériences A et B, spécifiez la répartition, sous forme de pourcentage, pour déterminer la répartition des expériences dans le public total. Par exemple, si vous spécifiez 40 et 60 pour les expériences A et B, respectivement, l’expérience A sera transmise à 40 % du public et les 60 % restant verront s’afficher l’expérience B.
  9. Cliquez sur Configurer. Une boîte de dialogue s’affiche pour confirmer la création du test A/B.
  10. Cliquez sur Terminer.
  11. Sélectionnez le formulaire Demande de carte de crédit et cliquez sur Ouvrir. Vous obtenez une option pour ouvrir l’une des expériences. Cliquez sur Expérience B. Le formulaire s’ouvre en mode de modification.
  12. Modifier le formulaire comme vous le souhaitez afin de créer une expérience différente de l’expérience A par défaut.
  13. Accédez à l’interface utilisateur Formulaires et documents, sélectionnez le formulaire puis cliquez sur Plus, enfin sélectionnez Démarrer le test A/B.
  14. persistence Ouvrez maintenant le formulaire dans le navigateur Chrome, plusieurs fois de suite, en utilisant l’URL suivante :
    http://<hostname>:<port>/content/dam/formsanddocuments/geometrixx-finance/credit-card-application1/jcr:content?wcmmode=disabled
    Remarque :
    Supprimez le cookie nommé mbox depuis la liste de persistance des cookies dans le navigateur avant de rouvrir le formulaire la fois suivante.
    Vous voyez l’expérience A et B du formulaire de manière aléatoire.
  15. Sélectionnez le formulaire, cliquez sur Plus, et cliquez sur Rapport de test A/B. Vous ne trouverez pas beaucoup de données dans le rapport car vous venez de démarrage du test. Ajoutons maintenant quelques données sources pour voir à quoi ressemble le rapport de test A/B.
  16. Ouvrez CRXDE Lite et prenez une copie du fichier suivant : /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
  17. Remplacez le contenu du fichier mentionné ci-dessus par le contenu du fichier suivant : /apps/geometrixx-finance/demo-artifacts/targetreport.js Remarque
     :
    Ces modifications sont uniquement à titre de démonstration. Assurez-vous de restaurer le contenu du fichier après avoir terminé cette procédure.
  18. Actualisez le rapport que vous avez généré et vous verrez quelque chose qui ressemble à ça : Examinez le tableau de bord de génération de rapports.
ab-test-report

Pour mettre fin au test A/B, cliquez sur le bouton Terminer le test A/B du tableau de bord de génération de rapports. A ce stade, une boîte de dialogue vous invite à déclarer une expérience. Sélectionnez l’expérience la plus probante et confirmez la fin du test A/B.

Si vous choisissez l’expérience A comme la plus probante, le test A/B se termine et, à partir de ce moment, seule l’expérience A sera proposée à tous les publics, y compris ceux utilisant Chrome.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne