[Beta]{class="badge informative" title="Cette fonctionnalité est actuellement en version bêta limitée"}
Conception de modèle de page de destination
Après avoir créé un modèle de page de destination, utilisez l’espace de conception visuelle pour créer les composants de structure et de contenu dans votre modèle de page.
Ajouter la structure et le contenu structure-content-landing-page
-
Pour commencer la conception de votre contenu, faites glisser un élément du Structures et déposez-le sur la zone de travail.
Ajoutez autant d’éléments de Structures que nécessaire et modifiez les paramètres de chacun dans le volet de droite.
note tip TIP Sélectionnez le composant n:n colonne pour définir le nombre de colonnes de votre choix (entre trois et 10). Vous pouvez également définir la largeur de chaque colonne en déplaçant les flèches situées sous celle-ci. 
La taille de chaque colonne ne peut pas être inférieure à 10 % de la largeur totale du composant de structure. Seules les colonnes vides peuvent être supprimées.
-
Développez la section Contenu et ajoutez autant de composants de contenu que nécessaire dans un ou plusieurs composants de structure.
-
Si nécessaire, vous pouvez effectuer des personnalisations supplémentaires pour chaque composant dans les onglets Paramètres ou Style.
Par exemple, vous pouvez modifier le style de texte, la marge intérieure ou la marge de chaque composant.
-
Pour ajouter du contenu conditionnel et adapter le contenu aux profils ciblés en fonction de règles conditionnelles, sélectionnez un composant de contenu et cliquez sur l’icône Activer le contenu conditionnel dans la barre d’outils du composant.
Pour plus d’informations, voir Contenu conditionnel.
Ajouter un CSS personnalisé
Vous pouvez ajouter votre propre CSS personnalisé directement dans l’espace de conception de la page de destination. Utilisez le CSS personnalisé pour appliquer un style avancé et spécifique, pour une plus grande flexibilité et un meilleur contrôle de l’aspect de votre contenu. Il est recommandé d’ajouter ce style de niveau supérieur avant d’inclure des composants tels que des images, des boutons et du texte.
Avec au moins un composant de contenu dans la zone de travail, sélectionnez le composant Corps dans l’arborescence de navigation de gauche pour accéder à l’éditeur CSS personnalisé.
-
Dans l’onglet Styles qui s’affiche à droite, cliquez sur Ajouter un CSS personnalisé.
note note NOTE Le bouton Ajouter un CSS personnalisé n’est disponible que lorsque le composant Corps est sélectionné. Cependant, vous pouvez appliquer des styles CSS personnalisés à tous les composants qu’il contient. L’éditeur pop-up Ajouter un CSS personnalisé s’affiche avec des commentaires de code d’espace réservé.
-
Saisissez votre code CSS dans l’éditeur.
Assurez-vous que le code CSS personnalisé est valide et suit la syntaxe appropriée. Si la page CSS saisie n’est pas valide, un message d’erreur s’affiche et la page CSS ne peut pas être enregistrée. Pour en savoir plus, voir Validité CSS.
-
Cliquez sur Enregistrer pour enregistrer le fichier CSS personnalisé.
La feuille de style personnalisée est appliquée au contenu existant. Vous pouvez vérifier que votre CSS personnalisé est appliqué en fonction de vos besoins. Pour plus d'informations sur la façon d'apporter des modifications et d'ajuster l'application de la feuille de style, voir Dépannage.
Ajout de ressources
Dans l’éditeur de contenu visuel, sélectionnez l’icône Marketo Engage Assets (
-
Ajoutez une nouvelle ressource en faisant glisser la ressource image et en la déposant dans un composant de structure.
-
Remplacez une ressource image existante en la sélectionnant sur la zone de travail et en cliquant sur Sélectionner une ressource dans les outils source d’images.
Pour plus d’informations sur l’utilisation des ressources de votre type de source, voir Utilisation des ressources pour la création de contenu.
Ajouter des formulaires
Un formulaire est un composant réutilisable pouvant être référencé par plusieurs pages de destination et modèles de page de destination dans Adobe Journey Optimizer B2B edition. Il s’agit d’un bloc de champs et d’un bouton d’envoi qui peuvent être précréés et rapidement insérés pour accélérer la conception des pages et la rendre plus cohérente.
L’exemple suivant décrit les étapes à suivre pour ajouter un formulaire lors de la conception de votre page.
-
Sous la section Contenu, faites glisser l’élément Formulaire et déposez-le dans un composant structurel de l’espace de conception de page.
note tip TIP Pour ajouter le formulaire de sorte qu’il occupe toute la disposition horizontale dans l’e-mail, ajoutez une structure de colonnes 1:1, puis faites-y glisser le formulaire et déposez-le. -
Cliquez sur l’icône Formulaire dans la barre d’outils du composant ou utilisez les propriétés Incorporer le formulaire à droite pour sélectionner le formulaire publié.
-
Si vous souhaitez remplacer le type de suivi par défaut pour le formulaire, modifiez le paramètre en fonction des exigences de la page ou du modèle.
Il s’agit également de la page Merci pour le formulaire. Ce paramètre détermine ce qui se passe lorsqu’un visiteur envoie le formulaire :
-
Rester sur la page - Sélectionnez cette option pour que le visiteur reste sur la même page lors de l’envoi du formulaire.
-
Page de destination - Sélectionnez cette option pour sélectionner n’importe quelle page de destination Journey Optimizer B2B edition ou Marketo Engage comme suite.
-
URL externe - Sélectionnez cette option pour spécifier n’importe quelle URL comme page de suivi. Une fois que le visiteur a envoyé le formulaire, le navigateur charge l’URL désignée.
note tip TIP Si vous souhaitez utiliser le formulaire pour télécharger un fichier, vous pouvez spécifier une URL pour le fichier hébergé. Avec cette configuration, le bouton d’envoi fonctionne comme un bouton de téléchargement.
-
-
Si vous souhaitez limiter l’affichage du formulaire par type d’appareil, modifiez le paramètre Options d’affichage :
- Afficher uniquement sur les ordinateurs de bureau
- Afficher uniquement sur les appareils mobiles
- Afficher sur tous les appareils (par défaut)
-
Si nécessaire, sélectionnez l’onglet Styles dans le panneau de droite pour définir les marges du formulaire dans la page.
Parcourir les calques, paramètres et styles
Lorsque vous travaillez avec le contenu dans l’espace de conception visuelle, vous pouvez accéder aux composants, colonnes et éléments de contenu à l’aide de l’arborescence de navigation. Cliquez sur l’icône Arborescence de navigation (
L’exemple suivant décrit les étapes à suivre pour ajuster la marge intérieure et l’alignement vertical dans un composant de structure avec des colonnes.
-
Sélectionnez la colonne dans le composant de structure directement dans la zone de travail ou à l’aide de l’arborescence de navigation affichée à gauche.
-
Dans la barre d’outils Colonne, cliquez sur l’outil Sélectionner une colonne et choisissez celle à modifier.
Vous pouvez également le sélectionner dans l’arborescence de la structure. Les paramètres modifiables de cette colonne sont affichés dans les onglets Paramètres et Styles sur la droite.
-
Pour modifier les propriétés de la colonne, cliquez sur l’onglet Styles à droite et modifiez-les selon vos besoins :
-
Pour Arrière-plan, modifiez la couleur d’arrière-plan si nécessaire.
Décochez la case pour un arrière-plan transparent. Activez le paramètre Image d’arrière-plan pour utiliser une image comme arrière-plan au lieu d’une couleur unie.
-
Pour Alignement, sélectionnez l’icône Haut, Milieu ou Bas.
-
Pour Marge intérieure, définissez la marge intérieure pour tous les côtés.
Sélectionner Marge intérieure différente pour chaque côté si vous souhaitez mieux définir la marge intérieure. Cliquez sur l’icône Verrouiller pour interrompre la synchronisation.
-
Développez la section Avancé pour définir les styles intégrés de la colonne.
-
-
Si nécessaire, répétez ces étapes pour ajuster l’alignement et la marge intérieure des autres colonnes du composant.
-
Enregistrez vos modifications.
Personnaliser le contenu
Journey Optimizer B2B edition utilise une syntaxe simple intégrée qui vous permet de créer des expressions avec du contenu personnalisé placé entre des accolades doubles {}. Vous pouvez ajouter plusieurs expressions dans le même contenu ou champ sans restriction.
Exemples :
-
Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}} -
Hello {{profile.person.name.fullName}}
Lors du traitement du contenu, Journey Optimizer B2B edition remplace l’expression par les données contenues dans la base de données Experience Platform. Donc, le premier exemple devient Bonjour John Doe.
L’exemple suivant décrit les étapes de personnalisation du contenu à l’aide d’attributs de lead/compte et de jetons système.
-
Sélectionnez le composant de texte et cliquez sur l’icône Ajouter une personnalisation dans la barre d’outils.
Cette action ouvre la boîte de dialogue Modifier le Personalization.
-
Cliquez sur + ou … pour ajouter un jeton à l’espace vide.
-
Cliquez sur Enregistrer.
Modifier le tracking des URL liées
-
Cliquez sur l’icône Liens (
-
Si nécessaire, cliquez sur l’icône Modifier (
Vous pouvez également ajouter des Balises pour un lien.
Enregistrer votre travail
Cliquez sur Enregistrer à tout moment pour enregistrer le modèle de page de destination.
Afficher les options
Tirez parti des options d’affichage et de validation du contenu disponibles dans l’espace de conception visuelle.
-
Effectuez un zoom avant/arrière sur le contenu dans les options de zoom prédéfinies.
-
Basculez vers l’affichage du contenu sur les ordinateurs de bureau, les appareils mobiles ou en texte seul/texte brut.
- Cliquez sur l’icône Affichage pour afficher un aperçu du contenu sur tous les appareils.
- Sélectionnez l’un des appareils prêts à l’emploi ou saisissez des dimensions personnalisées pour prévisualiser le contenu.
Plus d’options
Dans le menu Plus… situé en haut de l’espace de conception visuelle, vous pouvez effectuer les actions suivantes :
- Réinitialiser la page de destination - Cliquez sur cette option pour vider la zone de travail de conception visuelle de son contenu et redémarrer la création de votre contenu de page.
- Modifier votre conception - Revenez à la page d’accueil Créer votre page de destination principale. À partir de là, vous pouvez choisir un autre modèle pour redémarrer le processus de conception ou choisir de concevoir la page à partir de zéro dans une zone de travail vierge.
- Exporter HTML - Téléchargez le contenu de la zone de travail visuelle sur votre système local au format HTML présenté sous la forme d’un fichier zip.