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’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 ligne, dotée d’une URL partageable que vos clients peuvent consulter.
Les modèles de pages 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
Allez dans 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 votre image de marque 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. Celles-ci sont visibles par vos clients.
Nous vous suggérons 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. |
| Meta 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 quand les utilisateurs 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écharge 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 de la page 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 les descriptions plus longues ou le contexte supplémentaire. Prend en charge la mise en forme de texte riche. |
| 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 doivent 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 hyperlien sur lequel les utilisateurs peuvent cliquer pour naviguer vers 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. Pour interagir avec le SDK Braze depuis ce bloc, consultez Pont JavaScript pour les pages de destination et Créer des blocs de formulaire personnalisés. |
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, qui comprend :
- Famille de police, graisse, taille
- Hauteur de ligne
- Espacement des lettres
- Alignement et couleur du texte
- Espacement interne du bloc
Vous pouvez utiliser ces blocs pour créer un formulaire qui lie les données soumises par l’utilisateur à son 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.
Vous pouvez diviser un long formulaire en plusieurs étapes, chacune avec ses propres champs et une étape de confirmation intégrée, en utilisant un formulaire multi-étapes au lieu de placer les blocs de formulaire directement dans une ligne.
| 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. S’il la laisse dé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. |
| Gérer les abonnements | Une liste de contrôle des groupes d’abonnement e-mail, SMS ou WhatsApp. Les utilisateurs sélectionnent les groupes auxquels ils souhaitent adhérer lorsqu’ils soumettent le formulaire. Chaque bloc correspond à un canal. Pour plus d’informations, consultez Bloc Gérer les abonnements. |
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 utilisateurs 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.
Adaptatif aux appareils des utilisateurs
Vous pouvez rendre votre page de destination adaptative à la taille de l’appareil de l’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 le ressenti de vos pages sur mobile sans code personnalisé.
Masquer des lignes et des blocs par appareil
Vous pouvez masquer une ligne ou un bloc sur ordinateur de bureau ou sur tablette et appareils mobiles. Sélectionnez la ligne ou le bloc sur le canvas. Dans le panneau des propriétés, sélectionnez Hide on, puis choisissez Desktop ou Tablet and smaller devices.
Une ligne ou un bloc masqué n’apparaît pas pour ce type d’appareil dans l’aperçu de l’éditeur par glisser-déposer ni sur la page de destination en ligne.
Champs optionnels et obligatoires
Vous pouvez choisir si certains champs de formulaire sont obligatoires ou optionnels. Les champs obligatoires doivent être remplis avant que le formulaire puisse être soumis. Les champs optionnels peuvent être laissés vides ou non sélectionnés par l’utilisateur.
Les boutons radio sont toujours obligatoires et ne peuvent pas être définis comme optionnels. Si vous avez besoin d’un champ à choix unique optionnel, envisagez d’utiliser une liste déroulante à la place.
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 (optionnel)
Si votre page de destination ne contient pas de formulaire, passez à l’étape suivante.
Si votre formulaire utilise un formulaire multi-étapes, ignorez cette étape. Les formulaires multi-étapes incluent une étape de confirmation intégrée et verrouillée, vous n’avez donc pas besoin d’une page de confirmation séparée.
Si votre page de destination inclut un formulaire, vous pouvez éventuellement créer une deuxième 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.
- Sélectionnez le bouton Submit sur votre formulaire
- Choisissez si vous souhaitez inclure une page de confirmation lorsque les utilisateurs soumettent votre formulaire
- Utilisez le comportement au clic Open web URL pour envoyer les utilisateurs vers une page de confirmation
- Utilisez le comportement au clic None pour que les utilisateurs restent sur la page de destination
Si vous n’incluez pas de page de confirmation, les utilisateurs pourraient 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 visiter l’URL en allant dans Landing Pages et en sélectionnant Copy URL à côté de votre page de destination.
Partager un lien de prévisualisation
Dans l’éditeur, vous pouvez également sélectionner Copy preview link pour partager la page avec des relecteurs qui n’ont pas accès au tableau de bord.
- Si votre page de destination n’utilise pas Liquid, ce lien est le même que l’URL directe de Copy URL, ouvert en mode prévisualisation.
- Si votre page de destination utilise Liquid et que vous disposez de l’abonnement Landing Pages Pro, le lien affiche à la place la page en direct à la demande et reflète vos modifications actuelles plutôt qu’un instantané du moment où vous avez généré le lien. Le contenu est personnalisé par utilisateur. La prévisualisation affiche le favicon de Braze et ne peut pas être modifiée.
Pour les liens de prévisualisation sur d’autres canaux, consultez prévisualisation partageable.
Étape 6 : Publier
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 renvoie vers une page de confirmation en utilisant l’action Open web URL, ou utilise un formulaire multi-étapes avec son étape de confirmation intégrée
- 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.
Utiliser les 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.
Gérer les modèles
Vous pouvez prévisualiser, archiver ou modifier les modèles de pages de destination. Vous pouvez dupliquer vos propres modèles de pages 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, allez dans Messaging > Landing Pages, puis sélectionnez une page de destination que vous avez publiée. Ici, vous pouvez suivre le nombre de vues de page, de clics sur la page, de soumissions de page et les taux de soumission pour votre page de destination.
Gérer les 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 de destination pour confirmer le comportement des champs avant de publier.