[S’applique également à la version 8]{class="badge positive" title="S’applique également à Campaign v8"}

Créer une landing page creating-a-landing-page

À propos de la création des landing pages about-landing-pages-creation

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 creating-the-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 :

NOTE
La création d'une application web est présentée dans cette section.

Etape 1 - Sélection et chargement de modèles step-1---selecting-and-loading-templates

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é.

    note caution
    CAUTION
    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.

CAUTION
Le DCE exécute le code JavaScript pour la page de HTML chargée. Erreurs JavaScript dans le modèle de HTML qui peuvent apparaître dans l'interface d'Adobe Campaign. Ces erreurs ne sont pas liées à l’éditeur. Pour vérifier qu’il n’y a aucune erreur dans les fichiers importés, il est recommandé de les tester dans un navigateur web avant d’importer les fichiers dans le DCE.

Etape 2 - Paramétrage du contenu step-2---configuring-the-content

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 modifying-content

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 d’arrière-plan dans la zone droite.

  4. Sélectionnez une nouvelle couleur d’arrière-plan 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 linking-form-fields

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.

Cette étape est obligatoire car elle va permettre à l’application Web de déterminer le déroulement des étapes : enregistrer les données collectées dans la base puis afficher la page suivante (page Remerciements).

  1. Sélectionnez la variable Envoyez-le ! du bouton Collection page.

  2. Cliquez dans le menu déroulant Action.

  3. Sélectionnez l'action Page Suivante.

Insertion d'un champ de personnalisation inserting-a-personalization-field

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 un arrière-plan jaune dans l’éditeur.

Etape 3 - Publication du contenu step-3---publishing-content

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.

NOTE
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.

recommendation-more-help
601d79c3-e613-4db3-889a-ae959cd9e3e1