[Intégration]{class="badge positive"}
Personnalisation à l’aide du compositeur d’expérience visuelle
[AEM Sites 6.5]{class="badge informative"}
Dans ce chapitre, nous allons créer des expériences à l’aide du Compositeur d’expérience visuelle en en effectuant un glisser-déposer, en permutant ou en modifiant la disposition et le contenu d’une page web depuis Target.
Vue d’ensemble du scénario
La page d’accueil du site WKND présente les activités locales ou les meilleures choses à faire dans une ville sous la forme de disposition de cartes. En tant que personne chargée du marketing, vous avez pour tâche de modifier la page d’accueil en réorganisant les dispositions des cartes pour voir comment elles affectent l’interaction client et déclenchent la conversion.
Utilisateurs et utilisatrices impliqués
Pour cet exercice, les utilisateurs et utilisatrices suivants doivent être impliqués et effectuer certaines tâches nécessitant un accès administratif.
- Producteur ou productrice de contenu/créateur ou créatrice de contenu (Adobe Experience Manager)
- Marketeur ou marketeuse (Adobe Target/équipe d’optimisation)
Page d’accueil du site WKND
Conditions préalables
-
AEM
- Instance de publication AEM exécutée sur le port 4503
- AEM intégré à Adobe Target à l’aide de balises
-
Experience Cloud
- Accéder à vos organisations Adobe Experience Cloud -
https://<yourcompany>.experiencecloud.adobe.com - Experience Cloud fourni avec Adobe Target
- Accéder à vos organisations Adobe Experience Cloud -
Activités de la personne spécialiste marketing
-
La personne chargée du marketing crée une activité de ciblage A/B dans Adobe Target.
- Dans la fenêtre Adobe Target, accédez à l’onglet Activités.
- Cliquez sur le bouton Créer une activité et sélectionnez le type d’activité Test A/B.
- Sélectionnez le canal Web et choisissez le Compositeur d’expérience visuelle.
- Saisissez l’URL de l’activité et cliquez sur Suivant pour ouvrir le compositeur d’expérience visuelle.
- Pour que le Compositeur d’expérience visuelle charge, activez Autoriser le chargement de scripts non sécurisés dans votre navigateur et rechargez la page.
- Notez que la page d’accueil du site WKND s’ouvre dans l’éditeur du compositeur d’expérience visuelle.
- L’expérience A fournit la page d’accueil WKND par défaut ; modifions la disposition du contenu pour l’expérience B.
- Cliquez sur l’un des conteneurs de mise en page de carte (« Meilleurs torréfacteurs ») et sélectionnez l’option Réorganiser.
- Cliquez sur le conteneur que vous souhaitez réorganiser et faites-le glisser jusqu’à l’emplacement souhaité. Faisons passer le conteneur « Meilleurs torréfacteurs » de la 1ère ligne de la 1ère colonne à la 3ème ligne de la 1ère colonne. Le conteneur « Meilleurs torréfacteurs » est maintenant à côté du conteneur « Expositions de photos ».
Après l’échange
- De même, réorganisez les positions des autres conteneurs de carte.
- Ajoutons également un texte d’en-tête sous le composant Carrousel et au-dessus de la disposition de carte.
- Cliquez sur le conteneur Carrousel et sélectionnez l’option Insérer après > HTML pour ajouter un HTML.
code language-html <h1 style="text-align:center">Check Out the Hot Spots in Town</h1>
13. Cliquez sur Suivant pour poursuivre votre activité.
14. Définissez la Méthode d’affectation du trafic sur Manuelle et affectez 100 % du trafic vers l’expérience B.
15. Cliquez sur Suivant.
16. Fournissez des Mesures d’objectif pour votre activité, puis enregistrez et fermez votre test A/B.
17. Attribuez un nom (Actualisation de la page d’accueil WKND) à votre activité et enregistrez vos modifications.
18. Dans l’écran Détails de l’activité, veillez à activer votre activité.
19. Accédez à la page d’accueil WKND (http://localhost:4503/content/wknd/en.html) et notez les modifications que nous avons ajoutées à l’activité de test A/B d’actualisation de la page d’accueil WKND.
20. Ouvrez la console de votre navigateur et examinez l’onglet de réseau pour rechercher la réponse cible pour l’activité de test A/B d’actualisation de la page d’accueil WKND.
Résumé
Dans ce chapitre, une personne chargée du marketing a pu créer une expérience à l’aide du compositeur d’expérience visuelle en faisant glisser et en déposant du contenu, mais aussi en modifiant la disposition d’une page web sans changer le code pour exécuter un test.