Show Menu
SUJETS×

Créer une Landing Page

A propos de la création des landing pages

Ce cas d'utilisation présente l'utilisation du Digital Editor dans le cadre de la création d'une Landing Page à partir de la console Adobe Campaign.
Avant de commencer le paramétrage de la Landing Page dans Adobe Campaign, vous devez avoir à disposition un ou plusieurs modèles représentant la ou les pages HTML.
L'objectif principal de ce cas d'utilisation est de faire correspondre les champs des formulaires de la Landing Page avec des champs métiers dans Adobe Campaign en utilisant les fonctionnalités du DCE.

Création de la Landing Page

Pour créer une nouvelle Application Web de type Landing Page, respectez les étapes suivantes :
  1. Dans l’onglet Campagnes , cliquez sur le lien Application Web , puis sur le bouton Créer .
  2. Sélectionnez le modèle Nouvelle landing page , saisissez un libellé, puis cliquez sur Enregistrer .
  3. Cliquez sur l'onglet Edition .
  4. Supprimez l'activité Fin .
  5. Ajoutez une activité Page à la suite de l’activité Enregistrement .
  6. Editez l'activité Page 2 , puis décochez l'option Activer les transitions sortantes dans l'onglet Propriétés .
  7. Enregistrez les modifications.
Vous obtenez alors le séquencement suivant :
La création d'une application web est présentée dans cette section .

Etape 1 - Sélection et chargement de modèles

Dans cette section nous allons voir comment importer un contenu HTML pour chaque page de l'application Web.
Un modèle doit contenir :
  • un fichier HTML (obligatoire)
  • un ou plusieurs fichiers CSS (facultatif)
  • un ou plusieurs fichiers image (facultatif)
Pour charger le modèle dans la première page, respectez les étapes suivantes :
  1. Ouvrez la première activité Page de l'application Web.
  2. Sélectionnez A Partir d'un fichier comme choix de modèles de contenus disponibles.
  3. Sélectionnez le fichier HTML à utiliser.
  4. Cliquez sur Ouvrir afin de démarrer l'import.
    Lors du chargement, la liste des fichiers chargés apparait. Le système d'import vérifie que tous les fichiers liés au HTML sélectionné sont présents (CSS, images, etc.).
    Cliquez sur le bouton Fermer lorsque l'import est terminé.
    Vous devez attendre d’avoir reçu le message suivant avant de procéder à la fermeture : La mise en ligne des ressources externes est terminée .
  5. Cliquez sur l'onglet Propriétés .
  6. Saisissez un libellé pour chaque page (par exemple : Page 1 = Collecte, Page 2 = Remerciements).
Vous devez effectuer ces étapes pour chacune des pages insérées dans l'application Web.
Le DCE exécute le code JavaScript de la page HTML chargée. Il se peut que des erreurs JavaScript propres au modèle HTML soient remontées dans l'interface Adobe Campaign. Ces erreurs ne concernent pas l'éditeur. Pour vérifier qu'il n'y a aucune erreur dans les fichiers importés, il est conseillé de les tester dans un navigateur (Internet Explorer / FireFox / Chrome) avant d'importer les fichiers dans le DCE.

Etape 2 - Paramétrage du contenu

Dans cette section, nous allons ajuster le contenu importé puis associer les champs de la base de données avec le formulaire de la page web. L'application Web créée précédemment est la suivante :

Modification du contenu

Nous allons d'abord modifier les couleurs de la page. Pour cela :
  1. Ouvrez la page Collecte .
  2. Cliquez sur la zone d'arrière-plan.
  3. Cliquez sur la zone Couleur de fond dans la zone droite.
  4. Sélectionnez une nouvelle couleur de fond dans le nuancier.
  5. Validez le changement en cliquant sur OK
  6. Reproduisez les mêmes étapes pour modifier la couleur du bouton

Association des champs du formulaire

Nous allons associer les champs proposés dans la page à des champs de la base de données, afin de stocker les informations renseignées.
  1. Sélectionnez un champ du formulaire.
  2. Editez la section Champ dans la zone droite de l'éditeur.
  3. Sélectionnez le champ de la base de données que vous souhaitez associer au champ sélectionné.
  4. Reproduisez cette association pour chaque champ de la page.
Il est possible de rendre un champ obligatoire : par exemple, cliquez sur le champ Email puis activez l'option Obligatoire .

Insertion d'un champ de personnalisation

Cette étape permet de personnaliser le contenu de la page de remerciements. Pour cela :
  1. Ouvrez la page Remerciements .
  2. Positionnez le curseur dans une zone de texte, là où vous souhaitez insérer le prénom du destinataire.
  3. Sélectionnez Champ de personnalisation dans le menu Insérer de la barre d'outils.
  4. Sélectionnez le prénom.
Le champ de personnalisation s'affiche sur fond jaune dans l'éditeur.

Etape 3 - Publication du contenu

Le contenu est publié à partir du tableau de bord de l’application web. Cliquez sur le bouton Publier pour effectuer la publication.
Lors de la publication, un journal est affiché. Le système de mise en ligne analyse l'intégralité des contenus présents dans l'application Web.
Dans le journal de publication, les avertissements ou erreurs potentiels sont triés par activité.
Le formulaire est maintenant disponible : son URL est accessible dans le tableau de bord de l'application et peut être proposée aux destinataires.