Vous consultez actuellement l'aide de la version:

Les pages d’entrée vous permettent d’importer, en un tournemain, une conception et du contenu dans une page AEM. Un développeur web peut préparer la page HTML et des éléments supplémentaires à importer en tant que page entière ou uniquement une partie d’une page. Cette fonctionnalité se révèle particulièrement utile pour créer des pages d’entrée de marketing qui sont actives pendant une période limitée et qui doivent être créées rapidement.

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

  • Apparence des pages d’entrée dans AEM, y compris les composants disponibles
  • Procédures de création d’une page d’entrée et d’importation d’un bloc de conception
  • Traitement des pages d’entrée dans AEM
  • Configuration des pages d’entrée pour mobiles

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

Remarque :

AEM n’est pas livré avec l’importateur de conception. Celui-ci est disponible sous forme de module complémentaire d’AEM via Package Share et doit être installé pour être utilisé.

Que sont les pages d’entrée ?

Les pages d’entrée sont des sites comportant une ou plusieurs pages. Elles constituent le « point de terminaison » d’un programme marketing. Par exemple, avec une adresse électronique, AdWords/bannières, des réseaux sociaux, etc. Les objectifs d’une page d’entrée peuvent être multiples, mais tous partagent un point commun, à savoir : le visiteur doit accomplir une tâche, ce dont dépend le succès de la page.

La fonctionnalité « Pages d’entrée » d’AEM permet aux responsables marketing de collaborer avec des concepteurs Web externes ou des équipes de créateurs internes afin de créer des conceptions de page pouvant être importées aisément dans AEM, tout en restant modifiables pour les responsables marketing, et publiées sous la même autorité que le reste des sites sous AEM.

Dans AEM, vous pouvez créer des pages d’entrée en procédant comme suit :

  1. Dans AEM, créez une page contenant le canevas des pages d’entrée. AEM est fourni avec un exemple nommé Page d’importateur.
  2. Préparez le code HTML et les ressources.
  3. Regroupez les ressources dans un fichier ZIP appelé « module de conception ».
  4. Importez le module de conception sur la page de l’importateur.
  5. Modifiez et publiez la page.

Pages d’entrée pour ordinateurs de bureau

Un exemple de page d’entrée dans AEM se présente comme suit :

chlimage_1

Pages d’entrée pour mobiles

Une page d’entrée peut également se présenter sous sa version mobile. 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.

chlimage_1

Remarque :

La page d’entrée pour mobiles est supprimée/désactivée si la page pour ordinateur de bureau l’est également.

Composants de la page d’entrée

Pour faire en sorte que des parties du fichier HTML importé puissent être modifiées dans AEM, vous pouvez mapper directement le contenu du fichier HTML des pages d’entrée sur des composants AEM. L’importateur de conception accepte, par défaut, les composants suivants :

  • Texte, pour n’importe quel texte
  • Titre, pour du contenu dans des balises H1-6
  • Image, pour les images qui doivent être échangeables
  • Appels à l’action :
    • Lien des clics publicitaires
    • Lien graphique
  • Formulaire de piste CTA, pour collecter des informations sur l’utilisateur
  • Système de paragraphe (Parsys), pour permettre l’ajout de tout composant ou la conversion du composant ci-dessus

Il est, en outre, possible d’étendre cette liste et de prendre en charge des composants personnalisés. Cette section décrit les composants de manière détaillée.

Texte

Le composant Texte vous permet de saisir un bloc de texte à l’aide d’un éditeur WYSIWYG. Pour plus d’informations, reportez-vous à la section Composant Texte.

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

chlimage_1

Titre

Le composant Titre vous permet d’afficher un titre et d’en configurer la taille (h1-6). Pour plus d’informations, reportez-vous à la section Composant Titre.

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

chlimage_1

Image

Le composant Image affiche une image que vous pouvez faire glisser à partir de l’outil de recherche de contenu ou télécharger en cliquant dessus. Pour plus d’informations, reportez-vous à la section Composant Image.

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

chlimage_1

Appel à l’action (CTA)

Une conception de page d’entrée peut comporter différents liens, dont certains peuvent être considérés comme des « appels à l’action ».

L’appel à l’action est employé pour inciter le visiteur à agir immédiatement sur la page d’entrée, comme « Inscrivez-vous dès maintenant », « Visionnez cette vidéo », « Offre à durée limitée » et ainsi de suite. 

  • Lien des clics publicitaires - Permet d’ajouter un lien texte cliquable qui dirige l’utilisateur vers une URL cible.
  • Lien graphique - Permet d’ajouter une image cliquable qui dirige l’utilisateur vers une URL cible.

Les deux composants CTA présentent des options similaires. Le lien des clics publicitaires s’accompagne d’options de texte enrichi supplémentaires. Les composants sont décrits de manière détaillée dans les paragraphes suivants. 

Lien des clics publicitaires

Vous pouvez utiliser ce composant CTA pour ajouter le lien texte sur la page d’entrée. L’utilisateur peut cliquer sur ce lien pour accéder à l’URL cible spécifiée dans les propriétés du composant. Elle fait partie du groupe « Appel à l’action ».

chlimage_1

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.

URL cible

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

Options de rendu

Description des options de rendu. Vous avez le choix entre les options suivantes :

  • Charger la page dans une nouvelle fenêtre de navigateur
  • Charger la page dans la fenêtre active
  • Charger la page dans le cadre parent
  • Annuler tous les cadres et charger la page dans un navigateur

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 :

chlimage_1

Lien graphique

Vous pouvez utiliser ce composant CTA pour ajouter toute 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 accède à l’URL cible spécifiée dans les propriétés du composant. Elle fait partie du groupe Appel à l’action.

chlimage_1

Image

Faites glisser ou ajoutez une image sur laquelle les utilisateurs cliquent pour accéder à l’URL cible.

Titre

Dans l’onglet Avancé, saisissez un titre pour l’image.

Texte de remplacement

Dans l’onglet Avancé, saisissez un texte de remplacement au cas où les images sont désactivées.

Description

Dans l’onglet Avancé, saisissez une description de l’image.

Taille

Dans l’onglet Avancé, saisissez la largeur et la hauteur de l’image.

URL cible

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

Options de rendu

Description des options de rendu. Vous avez le choix entre les options suivantes :

  • Charger la page dans une nouvelle fenêtre de navigateur
  • Charger la page dans la fenêtre active
  • Charger la page dans le cadre parent
  • Annuler tous les cadres et charger la page dans un navigateur

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 :

chlimage_1

Formulaire de piste CTA (Appel à l’action)

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

Voici un exemple de formulaire de piste CTA :

chlimage_1

Les formulaires de piste CTA sont constitués de plusieurs composants différents :

  • Formulaire de piste
    Le composant Formulaire de piste définit le début et la fin d’un nouveau formulaire dans une page. D’autres composants peuvent être placés entre ces éléments, tels que « ID de message électronique », « Prénom », etc. 
  • Champs de formulaires et éléments
    Les champs de formulaires et les éléments peuvent inclure des zones textuelles, des cases d’option, des images, etc. L’utilisateur effectue souvent une action dans un champ de formulaire, comme saisir du texte. Voir les éléments de formulaires individuels pour plus d’informations.
  • Composants Profil
    Les composants Profil sont associés aux profils des visiteurs utilisés pour la collaboration sociale et pour tout autre domaine où la personnalisation des visiteurs est requise. 

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

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

chlimage_1

Paramètres communs à de nombreux composants de formulaire

Bien que chaque composant de formulaire de piste ait une finalité différente, nombre d’entre eux comportent des options et des paramètres semblables.

Les onglets suivants sont disponibles dans la boîte de dialogue lors de la configuration d’un composant de formulaire :

  • Titre et texte
    Cet onglet vous invite à renseigner des informations de base, telles que le titre du composant et tout texte d’accompagnement. Le cas échéant, il vous permet également de définir d’autres informations essentielles ; par exemple, s’il s’agit d’un champ à sélection multiple ou encore les différents éléments pouvant être sélectionnés.
  • Valeurs initiales
    Permet d’indiquer une valeur par défaut.
  • Contraintes
    Permet d’indiquer si un champ est obligatoire et les contraintes qui lui sont appliquées (doit être numérique, par exemple).
  • Style
    Indique la taille et le style des champs.

Remarque :

Les champs affichés varient en fonction du composant.

Toutes les options ne sont pas disponibles pour l’ensemble des composants du formulaire de piste. Pour plus d’informations sur ces paramètres communs, reportez-vous à la section Formulaires.

Composants de formulaire de piste

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

À propos

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

chlimage_1

Champ d’adresse

Permet aux utilisateurs de saisir des 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. Cela indique l’emplacement de stockage des données dans le référentiel.

chlimage_1

Date de naissance

Les utilisateurs peuvent saisir leur date de naissance.

chlimage_1

ID de message électronique

Permet aux utilisateurs de saisir une adresse électronique (identification).

chlimage_1

Prénom

Champ permettant aux utilisateurs de saisir leur prénom.

chlimage_1

Sexe

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

chlimage_1

Nom

Les utilisateurs peuvent saisir leur nom de famille.

chlimage_1

Formulaire de piste

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

chlimage_1

Le composant Formulaire de piste définit le début et la fin d’un formulaire à l’aide des éléments Début du formulaire et Fin de formulaire. Ces deux paragraphes sont toujours utilisés conjointement 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é :

chlimage_1

Page de remerciement

Page à référencer pour remercier les visiteurs pour leur message. Si ce champ est vide, le formulaire s’affiche de nouveau après l’envoi.

Démarrer le processus

Détermine le processus déclenché une fois le formulaire de piste envoyé.

chlimage_1

Options de publication

Les options de publication disponibles sont les suivantes :

  • Créer une piste
  • Service de messagerie électronique : créer un abonné et l’ajouter à la liste. Sélectionnez cette option si vous utilisez un fournisseur de services de messagerie tel que ExactTarget.
  • Service de messagerie électronique : envoyer un message de répondeur automatique. Sélectionnez cette option si vous utilisez un fournisseur de services de messagerie, comme ExactTarget.
  • Service de messagerie électronique : désabonner l’utilisateur de la liste. Sélectionnez cette option si vous utilisez un fournisseur de services de messagerie, comme ExactTarget.
  • Désabonner l’utilisateur

Identifiant du formulaire

L’identifiant du formulaire de piste 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 qui est utilisé pour charger les valeurs prédéfinies dans les champs du formulaire de piste.

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 nécessaire pour ce formulaire (la validation du serveur a toujours lieu). Cela peut être obtenu conjointement 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 piste (et non des champs individuels).

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

  • Un script pour la validation du client :
        /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
  • Un script pour la validation du serveur :
        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

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 une piste, vous pouvez configurer la liste à laquelle la piste est ajoutée.

chlimage_1
  • Afficher le bouton Envoyer
    Indique si le bouton Envoyer doit être visible ou non.
  • Envoyer le nom
    Identifiant à spécifier si vous utilisez plusieurs boutons Envoyer dans un formulaire.
  • Envoyer le titre
    Nom qui apparaît sur le bouton, Envoyer, par exemple.
  • Afficher le bouton Réinitialiser
    Cochez la case pour que le bouton Réinitialiser soit visible.
  • Réinitialiser le titre
    Nom qui apparaît sur le bouton Réinitialiser.
  • Description
    Informations qui s’affichent sous le bouton.

Création d’une page d’entrée

Trois étapes sont nécessaires lorsque vous créez une page d’entrée :

  1. Créez une page d’importateur.
  2. Préparez le code HTML pour l’importation.
  3. Importez le module de conception.

Création d’une page d’importateur

Avant de pouvoir importer votre conception de page d’entrée, vous devez créer une page d’importateur ; sous une campagne, par exemple. Le modèle Page d’importateur vous permet d’importer l’intégralité de votre page d’entrée HTML. La page contient une zone de déplacement dans laquelle vous pouvez importer votre module de conception de page d’entrée par glisser-déplacer.

Remarque :

Par défaut, une page d’importateur peut être créée uniquement dans des campagnes. Cependant, vous pouvez également écraser votre modèle afin de créer une page d’entrée sous /content/mysite.

Pour créer une page d’entrée, procédez comme suit :

  1. Accédez à Sites > Campagnes et sélectionnez votre campagne.

  2. Cliquez sur Créer > Page.

  3. Sélectionnez le modèle Page d’importateur et cliquez sur Suivant. Ajoutez un titre et, éventuellement, un nom et des balises, puis cliquez sur Créer.

    chlimage_1

    Votre nouvelle page d’importateur s’affiche.

Préparation du fichier HTML en vue de l’importation

Avant d’importer le bloc de conception, il convient de préparer le fichier HTML. Pour plus d’informations, reportez-vous à la section Extension et configuration de l’importateur de conception.

Importation du bloc de conception

Après avoir créé une page d’importateur, vous pouvez y importer un module de conception. Vous obtiendrez des détails sur la création du module de conception et la structure recommandée dans Extension et configuration de l’importateur de conception.

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

Pour importer le module de conception :

  1. Ouvrez la page d’importateur que vous avez créée précédemment

    chlimage_1
  2. Faites glisser le module de conception vers la zone de déplacement. Votre page d’entrée s’affiche au lieu de la page d’importateur. Votre page a été importée correctement.

    chlimage_1

Remarque :

Si vous rencontrez des difficultés à importer le bloc de conception, reportez-vous à la section Résolution des problèmes.

Utilisation de pages d’entrée

La conception et les éléments sont généralement créés par un concepteur, travaillant éventuellement dans une agence extérieure, dans des outils avec lesquels ils sont familiers, tels qu’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 du service marketing est alors chargé de faire glisser le fichier compressé dans AEM et de publier le contenu.

Il se peut, en outre, que le concepteur doive apporter des modifications à la page d’entrée importée en modifiant ou en supprimant du contenu, ou en configurant des composants CTA (appel à l’action). Enfin, le responsable marketing souhaite prévisualiser la page d’entrée, puis activer la campagne afin de s’assurer que la page est publiée.

Cette section explique comment effectuer les opérations suivantes :

Dans l’interface, Effacer la conception et Télécharger le fichier compressé importé sont disponibles à partir du menu Paramètres :

chlimage_1

Téléchargement du bloc de conception importé

Le téléchargement du fichier compressé vous permet d’enregistrer celui qui a été importé avec une page d’entrée spécifique. Notez que les modifications effectuées sur une page ne sont pas ajoutées au fichier compressé.

Pour télécharger le module de conception importé :

  • Dans l’interface utilisateur classique, cliquez sur Télécharger le fichier compressé dans la barre d’outils de la page d’entrée.
  • Dans l’interface utilisateur optimisée pour les écrans tactiles, sélectionnez Télécharger le fichier compressé importé dans le menu Paramètres.

Affichage d’informations d’importation

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

chlimage_1

Si le module de conception importé contient des erreurs (s’il fait référence, par exemple, à des images/scripts qui n’existent pas dans le module), 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 correspondant 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.

chlimage_1

Réinitialisation d’une page d’entrée

Si vous souhaitez réimporter votre module 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é.

Remarque :

Si vous décidez de supprimer les modifications du contenu, toutes les modifications que vous avez effectuées sur la page d’entrée importée, ainsi que toutes les propriétés de page, seront perdues lorsque vous cliquerez sur Effacer.  

Modification et ajout de composants sur une page d’entrée

Pour modifier des composants sur une page d’entrée, double-cliquez sur ceux-ci afin de les ouvrir et de les modifier, comme vous le feriez avec tout autre composant.

Pour ajouter des composants sur la page d’entrée, faites-les glisser et déposez-les dessus à partir du sidekick de l’interface utilisateur classique ou du volet Composants de l’interface utilisateur optimisée pour les écrans tactiles. Ensuite, modifiez-les de manière appropriée.

Remarque :

Si un composant de la page d’entrée ne peut pas être modifié, vous devez réimporter le fichier compressé après avoir modifié le fichier HTML. Cela signifie que les parties non modifiables n’ont pas été converties en composants AEM au cours de l’importation.

Suppression d’une page d’entrée

La suppression d’une page d’entrée s’apparente à la suppression d’une page AEM normale. 

Il convient toutefois de signaler une exception : lorsque vous supprimez une page d’entrée d’ordinateur de bureau, la page correspondante pour mobiles l’est également (le cas échéant), mais pas l’inverse.

Publication d’une page d’entrée

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

Remarque :

Lorsque vous publiez la page d’entrée d’ordinateur de bureau, la version correspondante pour mobiles l’est également (le cas échéant), mais pas l’inverse. 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne