Créer des pages d’accueil
Découvrez comment créer et personnaliser une page d’accueil à l’aide de l’éditeur par glisser-déposer, afin de développer votre audience et de collecter les préférences directement dans Braze.
Prérequis
Pour accéder au générateur de pages de destination, vous avez besoin de certaines autorisations. Si vous n’y avez pas accès, demandez de l’aide à votre administrateur Braze.
Créer une page de destination
Une page de destination est une page web publiée et accessible en direct, dotée d’une URL partageable que vos clients peuvent consulter.
Les modèles de page de destination sont des points de départ de conception non publiés, sans URL publique, ce qui signifie qu’ils ne peuvent pas être partagés avec vos clients. Pour créer une page à partir d’un modèle, consultez Utiliser des modèles.
Étape 1 : Créer un nouveau brouillon
Accédez à Messaging > Landing Pages, puis sélectionnez Create landing page. Vous pouvez également sélectionner le nom d’une page de destination existante pour la dupliquer ou y apporter des modifications.
Étape 2 : Saisir les détails de la page
Ajoutez des détails internes et publics qui vous aident à organiser, personnaliser et partager votre page de destination.
Détails généraux
Saisissez un nom et une description pour la page de destination. Ces détails sont utilisés pour rechercher la page dans votre espace de travail interne. Ils ne seront pas visibles par vos clients.
Détails du site
Configurez les balises méta pour personnaliser l’apparence de votre page dans l’onglet du navigateur et optimiser les résultats des moteurs de recherche. Ceux-ci seront visibles par vos clients.
Nous vous recommandons de suivre ces bonnes pratiques :
| Champ | Description | Recommandations |
|---|---|---|
| Titre du site | Le titre qui s’affiche dans l’onglet du navigateur. | Utilisez jusqu’à 60 caractères. |
| Méta description | Un extrait de texte qui s’affiche dans les résultats de recherche. | Utilisez entre 140 et 160 caractères. |
| Favicon | L’icône qui apparaît à côté du titre du site dans l’onglet du navigateur. | Utilisez un rapport hauteur/largeur de 1:1 et un type de fichier pris en charge : PNG, JPEG ou ICO. |
| URL de la page | Il s’agit du chemin URL vers votre page de destination. Cette valeur est également référencée lors de l’utilisation des étiquettes Liquid de page de destination que vous pouvez intégrer dans un message pour identifier automatiquement les utilisateurs lorsqu’ils soumettent votre formulaire. | Cette valeur doit être unique dans votre espace de travail. |
Étape 3 : Personnaliser la page
Si ce n’est pas déjà fait, sélectionnez Save as draft. Pour commencer à personnaliser votre page, sélectionnez Edit landing page. L’éditeur par glisser-déposer préchargera un modèle par défaut que vous pouvez personnaliser selon votre cas d’usage.
L’éditeur utilise deux types de composants pour la composition des pages de destination : les blocs de base et les blocs de formulaire. Tous les blocs doivent être placés dans une ligne. Pour une référence dédiée de chaque bloc et de ses propriétés, consultez Blocs éditeur (pages de destination).
Vous pouvez utiliser ces blocs pour ajouter du contenu et personnaliser la mise en page de votre page de destination.
| Type de bloc | Description |
|---|---|
| Titre | Un bloc de texte pour ajouter un en-tête ou un titre à votre contenu. Utile pour structurer les sections et améliorer la lisibilité. |
| Paragraphe | Un bloc de texte pour des descriptions plus longues ou du contexte supplémentaire. Prend en charge le formatage de texte enrichi. |
| Bouton | Un élément cliquable qui dirige les utilisateurs vers une action spécifiée, comme ouvrir un lien ou soumettre un formulaire. |
| Bouton radio | Ajoute une liste d’options parmi lesquelles les utilisateurs peuvent en sélectionner une. Lors de la soumission, le profil utilisateur enregistre l’attribut personnalisé associé. |
| Image | Un bloc pour afficher des images. Vous pouvez télécharger une image ou fournir une URL pour référencer une source externe. |
| Lien | Un lien hypertexte sur lequel les utilisateurs peuvent cliquer pour accéder à une URL spécifiée. Peut être intégré dans du texte ou autonome. |
| Espacement | Un bloc invisible qui ajoute un espacement vertical entre les éléments pour améliorer la mise en page et la lisibilité. |
| Code personnalisé | Un bloc qui vous permet d’insérer et d’exécuter du HTML, CSS ou JavaScript personnalisé pour une personnalisation avancée. |
Texte span
Pour appliquer un style spécifique aux blocs de texte sans code personnalisé, surlignez le texte que vous souhaitez styliser, puis sélectionnez Wrap with span for style.
Ajustez les propriétés du span pour mettre à jour le style de votre texte, notamment :
- Famille de police, graisse, taille
- Hauteur de ligne
- Espacement des lettres
- Alignement et couleur du texte
- Marge intérieure du bloc
Vous pouvez utiliser ces blocs pour créer un formulaire qui relie les données soumises par les utilisateurs à leur profil dans Braze. Gardez à l’esprit que si vous utilisez des blocs de formulaire, vous devrez également créer une page de destination supplémentaire pour l’état de confirmation.
| Type de bloc | Description |
|---|---|
| Capture d’e-mail | Un champ de formulaire pour les adresses e-mail. Lors de la soumission, l’adresse e-mail est ajoutée au profil de cet utilisateur dans Braze. |
| Capture de téléphone | Un champ de formulaire pour les numéros de téléphone. Lors de la soumission, l’utilisateur est abonné à votre groupe d’abonnement SMS ou WhatsApp. |
| Champ de saisie | Un champ de formulaire qui prend en charge les attributs standard (tels que le prénom et le nom) ou une chaîne d’attribut personnalisé de votre choix. |
| Liste déroulante | Les utilisateurs peuvent sélectionner un élément dans une liste prédéfinie. Vous pouvez ajouter n’importe quelle chaîne d’attribut personnalisé à la liste. |
| Case à cocher | Si un utilisateur coche la case, l’attribut du bloc est défini sur true. Si elle n’est pas cochée, son attribut est défini sur false. |
| Groupe de cases à cocher | Les utilisateurs peuvent sélectionner parmi plusieurs choix présentés. Les valeurs sont soit définies, soit ajoutées à un attribut personnalisé de type tableau défini. |
Après avoir créé une page de destination avec un formulaire, assurez-vous d’intégrer son étiquette Liquid de page de destination dans votre message. Grâce à cette étiquette, Braze peut automatiquement identifier et mettre à jour les profils utilisateur existants lorsqu’ils soumettent le formulaire.
Styles du conteneur de page
Vous pouvez définir des styles à appliquer à tous les blocs de composants pertinents de votre page de destination depuis l’onglet Page container. Ces styles s’appliquent partout sur votre page, sauf là où vous les remplacez par un bloc spécifique.
Nous vous recommandons de configurer les styles au niveau du conteneur de page avant de personnaliser les styles au niveau des blocs. Vous pouvez également ajouter une image d’arrière-plan pour l’ensemble de la page.
Adaptation aux appareils des utilisateurs
Vous pouvez rendre votre page de destination adaptative à la taille de l’appareil d’un utilisateur en empilant verticalement les colonnes sur les écrans plus petits. Pour activer cette fonctionnalité, ajoutez une colonne dans la ligne que vous souhaitez rendre adaptative, puis activez Vertically stack on smaller screens dans la section Customize columns.
Lorsque cette option est activée, vous pouvez également inverser l’empilement des colonnes pour contrôler l’ordre vertical du contenu multi-colonnes sur les écrans plus petits. Cela améliore l’apparence et l’expérience des pages sur mobile sans code personnalisé.
Champs facultatifs et obligatoires
Vous pouvez choisir si un champ de formulaire est obligatoire ou facultatif. Les champs obligatoires doivent être remplis avant que le formulaire puisse être soumis. Les champs facultatifs peuvent être laissés vides ou non sélectionnés par un utilisateur.
Par exemple, pour imposer la capture du consentement avant la soumission du formulaire, vous pouvez activer Required field input pour définir une case à cocher comme obligatoire avec le texte de clause de non-responsabilité approprié.
Étape 4 : Créer une page de confirmation (facultatif)
Si votre page de destination n’inclut pas de formulaire, passez à l’étape suivante.
Si votre page de destination inclut un formulaire, créez une seconde page de destination pour servir d’expérience de confirmation. Cette page devrait remercier les utilisateurs ou fournir une prochaine étape après la soumission du formulaire.
Pour lier la page de confirmation :
- Sélectionnez le bouton Submit sur votre formulaire
- Utilisez l’action Open web URL pour créer un lien vers votre page de confirmation
Si vous n’incluez pas de page de confirmation, les utilisateurs risquent de ne pas savoir que leur formulaire a été soumis avec succès. Incluez toujours une expérience de confirmation pour compléter le parcours.
Si votre page de confirmation s’ouvre dans un nouvel onglet, un utilisateur qui revient sur la page de destination d’origine et soumet à nouveau avec des informations mises à jour peut écraser la soumission précédente, ce qui entraîne des données incohérentes.
Étape 5 : Prévisualiser la page
Vous pouvez prévisualiser votre page de destination dans l’onglet Preview de l’éditeur. Après avoir enregistré votre page de destination en tant que brouillon, vous pouvez consulter l’URL en accédant à Landing Pages et en sélectionnant Copy URL à côté de votre page de destination. Vous pouvez également partager l’URL avec des collaborateurs.
Avant de publier, assurez-vous que :
- Vous n’avez pas dépassé la limite de pages de destination publiées de votre forfait
- Chaque page basée sur un formulaire est liée à une page de confirmation via l’action Open web URL
- Tous les champs de page obligatoires (comme le chemin URL et le titre) sont remplis
Lorsque vous êtes prêt, sélectionnez Publish Landing Page.
Les bloqueurs de pop-ups et de publicités agressifs sur iOS et dans Safari (y compris les contrôles intégrés de Safari et les extensions tierces) peuvent avoir un impact négatif sur le comportement des pages de destination lorsqu’un bouton Submit de formulaire ouvre également une autre URL, que cette URL s’ouvre dans le même onglet ou dans un nouvel onglet.
Utilisation des modèles
Les modèles de pages de destination sont des points de départ de conception réutilisables qui vous aident à créer des pages de destination plus rapidement. Un modèle n’a pas d’URL publique et ne peut pas être visité par les clients. Pour créer une page de destination en direct à partir d’un modèle, sélectionnez le modèle lors de la création d’une nouvelle page de destination, personnalisez-le selon vos besoins, puis publiez-le.
Les modèles sont accessibles et gérables à la fois dans l’éditeur de pages de destination et depuis la page Landing Page Templates (Content > Landing Page). Les modèles de pages de destination nécessitent un nom et une description facultative.
Gestion des modèles
Vous pouvez prévisualiser, archiver ou modifier des modèles de page de destination. Vous pouvez dupliquer vos propres modèles de page de destination (situés dans Vos modèles), mais pas les modèles Braze. Lors de la modification d’une page de destination, vous pouvez enregistrer votre page de destination en tant que modèle, apporter des modifications au modèle ou supprimer le contenu de la page de destination.
Consulter les analyses
Pour analyser l’efficacité de votre page de destination, accédez à Messaging > Landing Pages, puis sélectionnez une page de destination que vous avez publiée. Vous pouvez y suivre le nombre de vues de page, de clics sur la page, de soumissions de page, ainsi que les taux de soumission de votre page de destination.
Gestion des erreurs de soumission de formulaire
Si un utilisateur tente de soumettre un formulaire avec des données manquantes ou non prises en charge, il verra un message d’erreur générique et ne pourra pas soumettre.
Causes courantes :
- Les champs obligatoires sont laissés vides
- Des caractères spéciaux sont utilisés dans les champs de texte
- Une case à cocher obligatoire n’est pas sélectionnée
Les messages d’erreur affichés aux utilisateurs ne peuvent pas être personnalisés. Prévisualisez votre page d’accueil pour confirmer le comportement des champs avant de publier.