Pages d’entrée landing-pages

La fonction landing pages permet d’importer rapidement et facilement une conception et un contenu directement dans une page AEM. Le code HTML et les ressources connexes préparés par un développeur web pourront être importés, en intégralité ou partiellement. Cette fonctionnalité est utile pour créer des landing pages marketing qui ne sont principales que pendant une durée limitée et qui doivent être créées rapidement.

Cette page décrit les éléments suivants :

La préparation du module de conception à importer est traitée dans la section Extension et configuration de l’importateur de conception. L’intégration à Adobe Analytics est présentée dans la section Intégration de pages d’entrée à Adobe Analytics.

Que sont les landing pages ? what-are-landing-pages

Les pages d’entrée sont des sites d’une ou de plusieurs pages qui sont le "point de terminaison" d’une diffusion marketing (par exemple, avec un e-mail, des mots-clés/bannières, des médias sociaux). Une page d’entrée peut avoir plusieurs objectifs, mais tous ont une chose en commun : le visiteur doit accomplir une tâche et définir le succès d’une page d’entrée.

La fonction Pages d’entrée d’AEM permet aux marketeurs de collaborer avec les concepteurs web des agences ou des équipes créatives internes afin de créer des conceptions de page qui peuvent être facilement importées dans AEM et qui restent modifiables par les marketeurs et publiées sous la même gouvernance que les autres sites optimisés par l’.

Dans AEM, vous créez des landing pages en procédant comme suit :

Pages d’entrée du bureau desktop-landing-pages

Voici un exemple de landing page dans AEM :

Pages d’entrée mobiles mobile-landing-pages

Une landing page peut également avoir une version mobile de la page. Pour disposer d’une version mobile distincte de la page d’entrée, la conception de l’importation doit comporter deux fichiers HTML : index.htm(l) et mobile.index.htm(l).

La procédure d’importation de ces pages d’entrée est identique à celle d’une page d’entrée normale ; la conception de page d’entrée est associée à un fichier HTML supplémentaire correspondant à la page d’entrée pour mobiles. Ce fichier HTML doit, lui aussi, disposer d’une balise div de canevas avec id=cqcanvas, comme c’est le cas pour la page d’entrée pour ordinateurs de bureau. De plus, il prend en charge tous les composants modifiables décrits pour la page d’entrée pour ordinateurs de bureau.

La page d’entrée pour mobiles est créée en tant que page enfant de la page d’entrée pour ordinateurs de bureau. Pour l’ouvrir, accédez à la page d’entrée dans Sites web et ouvrez la page enfant.

Composants de page d’entrée landing-page-components

Pour rendre des parties du HTML importées modifiables dans AEM, vous pouvez mapper directement le contenu du HTML Landing pages aux composants AEM. Par défaut, l’importateur de conception comprend les composants suivants :

En outre, il est possible d’étendre cette fonctionnalité et de prendre en charge les composants personnalisés. Cette section décrit les composants en détail.

Texte text

Le composant Texte vous permet de saisir un bloc de texte à l’aide d’un éditeur WYSIWYG. Voir Composant textuel pour plus d’informations.

Voici un exemple de composant Texte sur une page d’entrée :

Titre title

Le composant Titre vous permet d’afficher un titre et de configurer la taille (h1-6). Voir Composant du titre pour plus d’informations.

Voici un exemple de composant Titre sur une page d’entrée :

Image image

Le composant d’image affiche une image que vous pouvez faire glisser à partir de l’outil de recherche de contenu ou cliquer pour la télécharger. Voir composant image pour plus d’informations.

Voici un exemple de composant Image sur une page d’entrée :

Appel à l’action (CTA) call-to-action-cta

Une conception de page d’entrée peut comporter plusieurs liens ; certains d’entre eux peuvent être conçus comme des "appels à l’action".

L’appel à l’action (CTA) est utilisé pour inciter le visiteur à agir immédiatement sur la page d’entrée, par exemple "S’abonner maintenant", "Afficher cette vidéo", "Durée limitée", etc.

Les deux composants CTA disposent d’options similaires. Le lien Clic publicitaire contient d’autres options de texte enrichi. Les composants sont décrits en détail dans les paragraphes suivants.

Lien des clics publicitaires click-through-link

Ce composant CTA peut être utilisé pour ajouter un lien texte sur la page d’entrée. Vous pouvez cliquer sur ce lien pour amener l’utilisateur à l’URL cible spécifiée dans les propriétés du composant. Il fait partie du groupe "Appel à l’action".

Libellé Il s’agit du texte visible par les utilisateurs. Vous pouvez modifier la mise en forme à l’aide de l’éditeur de texte enrichi.

Cible URL Saisissez l’URI à laquelle les utilisateurs accéderont s’ils cliquent sur le texte.

Options de rendu Décrit les options de rendu. Vous pouvez effectuer une sélection parmi les options suivantes :

CSS Dans l’onglet Style, saisissez le chemin d’accès à votre feuille de styles CSS.

ID Dans l’onglet Style, saisissez l’ID du composant afin de l’identifier de manière unique.

Voici un exemple de lien de clics publicitaires :

Lien graphique graphical-link

Vous pouvez utiliser ce composant CTA pour ajouter une image graphique avec un lien sur la page d’entrée. Il peut s’agir d’un simple bouton ou d’une image en arrière-plan. Lorsque l’utilisateur clique sur l’image, il est amené à l’URL cible spécifiée dans les propriétés du composant. Cela fait partie de la Appel à l’action groupe.

Libellé Il s’agit du texte présenté à l’utilisateur dans le diagramme. Vous pouvez modifier la mise en forme à l’aide de l’éditeur de texte enrichi.

Cible URL Saisissez l’URI à laquelle les utilisateurs accéderont s’ils cliquent sur l’image.

Options de rendu Décrit les options de rendu. Vous pouvez effectuer une sélection parmi les options suivantes :

CSS Dans l’onglet Style, saisissez le chemin d’accès à votre feuille de styles CSS.

ID Dans l’onglet Style, saisissez l’ID du composant afin de l’identifier de manière unique.

Voici un exemple de lien graphique :

Formulaire de piste CTA (Appel à l’action) call-to-action-cta-lead-form

Le formulaire de piste est utilisé pour collecter des informations sur le profil d’un visiteur/prospect. Ces informations pourront être stockées et exploitées ultérieurement pour mener une campagne marketing efficace. Ces informations comprennent généralement le titre, le nom, l’adresse électronique, la date de naissance, l’adresse, l’intérêt, etc. Cela fait partie de la Formulaire de piste CTA groupe.

Voici un exemple de formulaire de piste CTA :

Les formulaires de piste CTA sont construits à partir de plusieurs composants différents :

Vous découvrez un exemple de formulaire ci-dessus. Il comprend le composant Formulaire de prospect (début et fin), avec les champs Prénom et ID d’e-mail utilisés comme données d’entrée et un champ Envoyer.

Les composants suivants sont disponibles à partir du Sidekick pour le formulaire de prospect CTA :

Paramètres communs à de nombreux composants de formulaire de piste settings-common-to-many-lead-form-components

Bien que chacun des composants du formulaire de piste ait un objectif différent, la plupart d’entre eux sont composés d’options et de paramètres similaires.

Lors de la configuration de l’un des composants de formulaire, les onglets suivants sont disponibles dans la boîte de dialogue :

Composants de formulaire de piste lead-form-components

La section suivante décrit les composants disponibles pour les formulaires de piste Appel à l’action .

À propos Permet aux utilisateurs d’ajouter des informations de type « À propos ».

Champ d’adresse Permet aux utilisateurs de saisir les informations d’adresse. Lorsque vous configurez ce composant, vous devez saisir le Nom de l’élément dans la boîte de dialogue. Le Nom de l’élément est le nom de l’élément de formulaire. Indique l’emplacement de stockage des données dans le référentiel.

Date de naissance Les utilisateurs peuvent saisir leur date de naissance.

ID d’e-mail Permet aux utilisateurs de saisir une adresse électronique (identification).

Prénom Champ permettant aux utilisateurs de saisir leur prénom.

Genre Les utilisateurs peuvent sélectionner leur genre dans une liste déroulante.

Nom Les utilisateurs peuvent saisir leurs informations de nom.

Formulaire de prospect Ajoutez ce composant afin d’ajouter un formulaire de prospect à votre page d’entrée. Un formulaire de prospect comprend automatiquement un champ Début du formulaire de prospect et un champ Fin de formulaire de prospect. Entre les deux, vous ajoutez les composants « Formulaire de prospect » décrits dans cette section.

Le composant Formulaire de prospect définit le début et la fin d’un formulaire à l’aide des éléments Début du formulaire et Fin de formulaire. Ils sont toujours associés pour s’assurer que le formulaire est correctement défini.

Après avoir ajouté le formulaire de piste, vous pouvez configurer le début ou la fin du formulaire en cliquant sur Modifier dans la barre correspondante.

Début du formulaire de piste

Deux onglets sont disponibles pour la configuration, Formulaire et Avancé  :

Page de remerciement Page à référencer pour remercier les visiteurs qui ont saisi des données. Si ce champ est laissé vide, le formulaire est réaffiché après la soumission.

Démarrer le workflow Détermine quel workflow est déclenché une fois le formulaire de prospect envoyé.

Options de publication Les options de publication suivantes sont disponibles :

L’identifiant de formulaire L’identifiant de formulaire d’un prospect l’identifie de façon unique. Utilisez cet identifiant si plusieurs formulaires figurent sur une seule page ; assurez-vous qu’ils présentent des identifiants différents.

Chemin de chargement Chemin d’accès aux propriétés de nœud, utilisé pour charger les valeurs prédéfinies dans les champs du formulaire de prospect.

Il s’agit d’un champ facultatif qui permet de spécifier le chemin à un nœud dans le référentiel. Lorsque ce nœud comporte des propriétés qui correspondent aux noms des champs, les champs adéquats du formulaire sont préchargés avec la valeur de ces propriétés. S’il n’existe aucune correspondance, le champ contient la valeur par défaut.

Validation du client Indique si la validation du client est obligatoire pour ce formulaire (la validation de serveur a toujours lieu). Ceci peut être réalisé en conjonction avec le composant Captcha de formulaires.

Type de ressource de validation Définit le type de ressource de validation si vous souhaitez valider la totalité du formulaire de prospect (au lieu de chaque champ).

Si vous validez le formulaire dans son intégralité, vous devez également inclure l’un des éléments suivants :

Configuration de l’action La Configuration de l’action change en fonction des sélections effectuées dans Options de publication. Lorsque vous sélectionnez, par exemple, Créer un prospect, vous pouvez configurer la liste à laquelle le prospect est ajouté.

Création d’une page d’entrée creating-a-landing-page

Lorsque vous créez une landing page, vous devez effectuer trois étapes :

Création d’une page d’importateur creating-an-importer-page

Avant de pouvoir importer votre conception de page d’entrée, vous devez créer une page d’importateur, par exemple sous une campagne. Le modèle Page d’importateur vous permet d’importer votre landing page HTML complète. La page contient une zone de dépôt dans laquelle le bloc de conception de page d’entrée peut être importé par glisser-déposer.

Pour créer une landing page :

Préparation du HTML pour l’importation preparing-the-html-for-import

Avant d’importer le module de conception, le HTML doit être préparé. Voir Extension et configuration de l’importation de conception pour plus d’informations.

Importation du module de conception importing-the-design-package

Une fois la page d’importateur créée, vous pouvez y importer un module de conception. Vous trouverez des informations détaillées sur la création du module de conception et sa structure recommandée dans la section Extension et configuration de l’importation de conception.

En supposant que le module de conception soit prêt, les étapes suivantes décrivent comment importer le module de conception sur une page d’importateur.

Utilisation des landing pages working-with-landing-pages

La conception et les ressources d’une page d’entrée sont généralement créées par un concepteur, éventuellement au sein d’une agence, dans des outils qu’ils utilisent comme Adobe Photoshop ou Adobe Dreamweaver. Une fois la conception terminée, le concepteur envoie, au service marketing, un fichier compressé contenant tous les éléments. Le contact en marketing est alors chargé de déposer le fichier zip dans AEM et de publier le contenu.

En outre, le concepteur peut avoir à apporter des modifications à la landing page après son importation en modifiant ou en supprimant du contenu et en configurant les composants d’appel à l’action. Enfin, le marketeur souhaite afficher un aperçu de la landing page, puis activer la campagne pour s'assurer que la landing page est publiée.

Cette section décrit la procédure à suivre :

Lorsque vous importez le bloc de conception, la barre d’outils suivante est disponible dans la partie supérieure de la landing page :

Téléchargement du bloc de conception importé downloading-the-imported-design-package

Le téléchargement du fichier zip permet d'enregistrer le fichier zip importé avec une landing page spécifique. Notez que les modifications apportées à une page ne sont pas ajoutées au fichier compressé.

Pour télécharger le module de conception importé, cliquez sur Télécharger le fichier Zip dans la barre d’outils de la page d’entrée.

Affichage des informations d’importation viewing-import-information

Vous pouvez à tout moment afficher des informations sur la dernière importation en cliquant sur le point d’exclamation bleu en haut de la page d’entrée dans l’interface utilisateur classique.

Si le module de conception importé présente certains problèmes, par exemple s’il fait référence à des images/scripts qui n’existent pas dans le module, et ainsi de suite, l’importateur de conception affiche ces problèmes sous la forme d’une liste. Pour afficher la liste des problèmes, dans l’interface utilisateur classique, cliquez sur le lien Problèmes dans la barre d’outils de la page d’entrée. Sur l’image suivante, la fenêtre Problèmes d’importation s’affiche lorsque vous cliquez sur Problèmes.

Réinitialisation d’une page d’entrée resetting-a-landing-page

Si vous souhaitez réimporter votre package de conception de la page d’entrée après y avoir apporté des modifications, vous pouvez « effacer » la page d’entrée en cliquant sur Effacer dans la partie supérieure de la page d’entrée dans l’interface utilisateur classique ou en cliquant sur Effacer dans le menu Paramètres de l’interface utilisateur optimisée pour les écrans tactiles. La page d’entrée importée est alors supprimée et une page d’importateur vierge est créée.

Lors de l’effacement de la page d’entrée, vous pouvez supprimer les modifications du contenu. Si vous cliquez sur Non, les modifications du contenu sont conservées. En d’autres termes, la structure sous-jacente de jcr:content/importer est conservée, et seuls le composant de page d’importateur et les ressources situées dans etc/design sont supprimés. En revanche, si vous cliquez sur Oui, jcr:content/importer est également supprimé.

Modification et ajout de composants sur une page d’entrée modifying-and-adding-components-on-a-landing-page

Pour modifier des composants sur la page d’entrée, double-cliquez dessus pour les ouvrir et les modifier comme vous le feriez pour tout autre composant.

Pour ajouter des composants sur la page d’entrée, faites-les glisser et déposez-les sur la page d’entrée (depuis le sidekick dans l’interface utilisateur classique ou depuis le volet Composants de l’interface utilisateur optimisée pour les écrans tactiles), puis modifiez-les selon les besoins.

Supprimer une landing page deleting-a-landing-page

La suppression d'une landing page est comme la suppression d'une page d'AEM normale.

La seule exception est que lorsque vous supprimez une landing page pour ordinateur de bureau, elle supprime également la landing page mobile correspondante (si elle est présente), mais pas l’inverse.

Publier une landing page publishing-a-landing-page

Vous pouvez publier la page d’entrée et toutes ses dépendances comme vous publieriez une page normale.