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 devez disposer 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 visiter.
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 > Pages de destination, puis sélectionnez Créer une page de destination. 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. Ces éléments sont 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. |
| 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 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 Enregistrer comme brouillon. Pour commencer à personnaliser votre page, sélectionnez Modifier la page de destination. 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 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 les descriptions plus longues ou le contexte supplémentaire. Prend en charge la mise en forme de texte enrichi. |
| Bouton | Un élément cliquable qui dirige les utilisateurs vers une action spécifique, 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 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 une meilleure mise en page et lisibilité. |
| Code personnalisé | Un bloc qui vous permet d’insérer et d’exécuter du HTML, du CSS ou du 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 Envelopper avec un span pour le style.
Ajustez les propriétés du span pour mettre à jour le style de votre texte, ce qui inclut :
- Famille de police, graisse, taille
- Hauteur de ligne
- Espacement des lettres
- Alignement et couleur du texte
- Marge interne 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.
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 des 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 l’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 reste 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 groupes d’abonnement e-mail, SMS ou WhatsApp. Les utilisateurs sélectionnent les groupes qu’ils souhaitent rejoindre 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, veillez à 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 à l’ensemble des blocs de composants pertinents de votre page de destination depuis l’onglet Conteneur de page. 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 Empiler verticalement sur les écrans plus petits dans la section Personnaliser les colonnes.
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 permet aux pages d’avoir un meilleur rendu et une meilleure ergonomie sur mobile sans code personnalisé.
Masquer des lignes et des blocs par appareil
Vous pouvez masquer une ligne ou un bloc sur ordinateur 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 Masquer sur, puis choisissez Ordinateur ou Tablette et appareils plus petits.
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 publiée.
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 un 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 Champ de saisie obligatoire 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 comprend 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 comprend un formulaire, vous pouvez éventuellement créer une seconde page de destination qui servira 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 Soumettre sur votre formulaire
- Choisissez si vous souhaitez inclure une page de confirmation lorsque les utilisateurs soumettent votre formulaire
- Utilisez le comportement au clic Ouvrir l’URL web pour envoyer les utilisateurs vers une page de confirmation
- Utilisez le comportement au clic Aucun pour que les utilisateurs restent sur la page de destination
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 retourne 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 Aperçu de l’éditeur. Après avoir enregistré votre page de destination comme brouillon, vous pouvez visiter l’URL en accédant à Pages de destination et en sélectionnant Copier l’URL à côté de votre page de destination.
Partager un lien d’aperçu
Dans l’éditeur, vous pouvez également sélectionner Copier le lien d’aperçu pour partager la page avec des réviseurs qui n’ont pas accès au tableau de bord.
- Si votre page de destination n’utilise pas Liquid, ce lien est identique à l’URL directe de Copier l’URL, ouverte en mode aperçu.
- Si votre page de destination utilise Liquid et que vous disposez de l’offre 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é datant de la génération du lien. Le contenu est personnalisé par utilisateur. L’aperçu affiche le favicon Braze et ne peut pas être modifié.
- Si vous ajoutez du Liquid à une page de destination sans l’offre Pro, les étiquettes Liquid ne sont pas évaluées et apparaissent sous forme de texte brut pour les visiteurs sur la page publiée.
Pour les liens d’aperçu sur d’autres canaux, consultez Aperçu 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 à l’aide de l’action Ouvrir l’URL web, ou utilise un formulaire multi-étapes avec son étape de confirmation intégrée
- Tous les champs obligatoires de la page (comme le chemin URL et le titre) sont remplis
Lorsque vous êtes prêt, sélectionnez Publier la page de destination.
Les bloqueurs de fenêtres pop-up agressifs et les bloqueurs de publicités 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 Soumettre du formulaire ouvre également une autre URL, que celle-ci s’ouvre dans le même onglet ou dans un nouvel onglet.
Utiliser les modèles
Les modèles de page 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 ligne à 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 page de destination nécessitent un nom et une description facultative.
Gérer les 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. Lorsque vous modifiez 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. Ici, vous pouvez suivre le nombre de vues de page, de clics sur la page, de soumissions de page et les taux de soumission de 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.