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.
Conditions préalables
Pour accéder au générateur de pages d’accueil, vous avez besoin de certaines autorisations. Si vous n’avez pas accès, demandez de l’aide à votre administrateur Braze.
Créer une page d’accueil
É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 d’accueil 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 d’accueil.
Détails généraux
Saisissez un nom et une description pour la page d’accueil. 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. Elles 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 d’accueil. Cette valeur est également référencée lors de l’utilisation des étiquettes Liquid de page d’accueil 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 en tant que brouillon. 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’utilisation.
L’éditeur utilise deux types de composants pour la composition des pages d’accueil : les blocs de base et les blocs de formulaire. Tous les blocs doivent être placés dans une ligne.
Vous pouvez utiliser ces blocs pour ajouter du contenu et personnaliser la disposition de votre page d’accueil.
| 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 disposition 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. |
Span text
Pour appliquer un style spécifique à des blocs de texte sans code personnalisé, mettez en évidence le texte que vous souhaitez styliser, puis sélectionnez l’option Envelopper avec l’interligne pour le style.
Adjust the span properties to update your text styling, which includes :
- Famille de polices, poids, taille
- Hauteur de ligne
- Espacement des lettres
- Alignement et couleur du texte
- Rembourrage des blocs
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 d’accueil 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. |
| Menu déroulant | 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 d’accueil avec un formulaire, assurez-vous d’intégrer son étiquette Liquid de page d’accueil 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 d’accueil depuis l’onglet Page container. Ces styles seront utilisés 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 d’accueil 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 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 d’accueil n’inclut pas de formulaire, passez à l’étape suivante.
Si votre page d’accueil inclut un formulaire, créez une deuxième page d’accueil 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 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 à la page d’accueil 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.
Si vous configurez un bouton avec Submit form when button is clicked activé et utilisez On-click Behavior pour ouvrir une URL web dans un nouvel onglet, le bloqueur de pop-ups intégré de Safari sur iOS peut empêcher la navigation de fonctionner. Cela se produit parce que la soumission du formulaire suivie de l’ouverture d’un nouvel onglet est traitée comme un pop-up.
Pour éviter ce problème, configurez les boutons avec soumission de formulaire pour ouvrir l’URL résultante dans le même onglet (pas un nouvel onglet). Les boutons sans soumission de formulaire peuvent ouvrir des URL dans de nouveaux onglets sans problème.
Étape 5 : Prévisualiser la page
Vous pouvez prévisualiser votre page d’accueil dans l’onglet Preview de l’éditeur. Après avoir enregistré votre page d’accueil en tant que brouillon, vous pouvez visiter l’URL en accédant à Landing Pages et en sélectionnant Copy URL à côté de votre page d’accueil. 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 d’accueil publiées de votre forfait
- Chaque page basée sur un formulaire est liée à une page de confirmation en utilisant l’action Open web URL
- Tous les champs de page obligatoires (comme le chemin URL et le titre) sont complets
Lorsque vous êtes prêt, sélectionnez Publish Landing Page.
Utiliser des modèles
Utilisez les modèles de pages d’accueil pour créer des modèles pour vos prochaines campagnes. Ces modèles sont accessibles et gérables à la fois dans l’éditeur de pages d’accueil et dans la section Templates du tableau de bord (Templates > Landing Page Templates). Les modèles de pages d’accueil nécessitent un nom et acceptent facultativement une description.
Gérer les modèles
Vous pouvez prévisualiser, archiver, modifier ou dupliquer les modèles de pages d’accueil. Lors de la modification d’une page d’accueil, vous pouvez également enregistrer votre page d’accueil en tant que modèle, apporter des modifications au modèle ou supprimer le contenu de la page d’accueil.
Consulter les analyses
Pour analyser l’efficacité de votre page d’accueil, accédez à Messaging > Landing Pages, puis sélectionnez une page d’accueil 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 d’accueil.
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.