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 en ligne, publiée, avec une URL partageable que vos clients peuvent visiter.
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 > 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 l’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 des 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 conseillons 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 encore 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 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é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 téléverser 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 être 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, par exemple des pixels de suivi, des scripts tiers ou du CSS personnalisé tel qu’un max-width pour les navigateurs larges. Pour interagir avec le SDK Braze depuis ce bloc, consultez Pont JavaScript pour 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, notamment :
- Famille, poids et taille de police
- 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 associe 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 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 quelles chaînes d’attributs personnalisés à 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 proposé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 qu’ils souhaitent rejoindre lorsqu’ils soumettent le formulaire. Chaque bloc concerne un seul 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 Conteneur de page. Ces styles s’appliquent partout sur votre page, sauf là où vous les remplacez par un bloc spécifique.
Nous recommandons de configurer les styles au niveau du conteneur de page avant de personnaliser les styles au niveau du bloc. Vous pouvez également ajouter une image d’arrière-plan pour l’ensemble de la page.
Utilisez Largeur du contenu pour définir une largeur maximale pour le contenu de votre page sur les grands écrans. Choisissez un préréglage (Étroit (640px), Normal (1120px), Large (1440px) ou Pleine largeur (100%)) ou sélectionnez Personnalisé et saisissez une valeur. Pour une mise en page ou un style au-delà de ces options, ajoutez du CSS dans un bloc Code personnalisé.
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 Empiler verticalement sur les petits écrans 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 petits écrans. Cela améliore l’apparence et le ressenti des pages 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 sélectionnez 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 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 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 rendre une case à cocher obligatoire avec le texte d’avertissement approprié.
Étape 4 : Créer une page de confirmation (optionnel)
Si votre page de destination n’inclut 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 optionnellement 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 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 une 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 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 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 allant dans 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 le même que 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’abonnement Landing Pages Pro, le lien effectue le rendu de la page en ligne à 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. L’aperçu affiche le favicon Braze et ne peut pas être modifié.
- Si vous ajoutez du Liquid à une page de destination sans l’abonnement 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 plan
- Chaque page basée sur un formulaire est liée à une page de confirmation utilisant l’action Ouvrir une URL web, 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 complets
Lorsque vous êtes prêt, sélectionnez Publier la page de destination.
Les bloqueurs de pop-ups 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 de formulaire ouvre également une autre URL, que cette URL s’ouvre dans le même onglet ou dans un nouvel onglet.
Utiliser des modèles
Les modèles de pages de destination sont des points de départ 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 depuis l’éditeur de pages de destination et depuis la page Landing Page Templates (Contenu > Page de destination). 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 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. Ici, vous pouvez suivre le nombre de vues de page, de clics sur la page, de soumissions de formulaire 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.