Skip to content

Personnaliser les pages de destination

Utilisez la personnalisation Liquid dans les pages de destination pour adapter dynamiquement le contenu avec les données du profil utilisateur. Par exemple, vous pouvez personnaliser les titres en fonction de différents attributs utilisateur sans avoir à gérer plusieurs pages de destination statiques.

Insertion de Liquid

Dans l’éditeur par glisser-déposer, vous pouvez insérer de la personnalisation Liquid à la fois dans l’éditeur et dans les paramètres de la page ou du bloc dans le panneau de droite. Pour obtenir des instructions sur l’implémentation de Liquid, consultez notre documentation Liquid dédiée.

Éditeur de page de destination avec personnalisation Liquid ajoutée.

Aperçu et test

Lorsque vous prévisualisez une page de destination dans l’éditeur, vous pouvez afficher la page en tant qu’utilisateur aléatoire, utilisateur existant ou utilisateur personnalisé.

Cependant, lorsque vous prévisualisez la page de destination depuis le tableau de données ou la page Détails de la page de destination, vous ne pourrez la visualiser qu’en tant qu’utilisateur aléatoire.

Considérations relatives à la personnalisation

Pour maintenir des performances optimales avec les pages de destination personnalisées, notez les limites de taille suivantes :

  • Enregistrement d’une page de destination : Si la taille dépasse 500 Ko, vous pouvez recevoir un message d’avertissement indiquant que la page a dépassé nos limites de taille, ce qui peut empêcher sa publication.
  • Rendu avec la personnalisation Liquid : La taille totale ne doit pas dépasser 1 Mo. Sinon, la page peut être automatiquement dépubliée par Braze.

Éviter la dépublication des pages de destination

Si votre page dépasse ces limites de taille, vous recevrez un e-mail indiquant qu’elle pourrait être dépubliée si elle continue à dépasser la limite. Lorsque le seuil est atteint, la page sera automatiquement dépubliée et vous recevrez une notification.

Pour éviter que votre page ne dépasse les limites de taille ou ne subisse des temps de chargement lents, veillez à utiliser une personnalisation Liquid qui :

  • Ne boucle pas continuellement ou ne référence pas de grands ensembles de données.
  • Ne repose pas sur une logique mathématique ou conditionnelle étendue au sein du bloc Liquid.

De plus, évitez d’intégrer directement dans le code de votre page de destination des scripts volumineux, des feuilles de style et des ressources encodées en base64. Ces ressources en ligne comptent dans la limite de taille de la page et peuvent ralentir le rendu. Téléchargez plutôt les polices, images, feuilles de style et scripts dans la bibliothèque multimédia. Les ressources servies depuis la bibliothèque multimédia sont hébergées sur le CDN de Braze, elles ne sont donc pas traitées pour le rendu Liquid et ne comptent pas dans la limite de taille de la page.

Utiliser Liquid pour les utilisateurs identifiés et anonymes

Liquid peut personnaliser l’expérience de la page de destination pour les visiteurs identifiés comme pour les visiteurs anonymes.

  • Utilisateurs identifiés : Créez un lien vers la page de destination depuis un message Braze et incluez l’étiquette Liquid de page de destination. Cela associe l’utilisateur à son profil Braze et personnalise l’expérience de la page.
  • Visiteurs anonymes : Utilisez Liquid pour du contenu contextuel non basé sur le profil, comme un nombre aléatoire ou un message d’accueil selon l’heure de la journée.

Préremplir les champs de formulaire

Si un champ de formulaire de page de destination correspond à un attribut de profil utilisateur, vous pouvez préremplir ce champ pour les utilisateurs qui reviennent. Cela contribue à réduire les frictions liées au formulaire et améliore les taux de complétion pour les visiteurs connus.

Pour utiliser le préremplissage des champs de formulaire :

  1. Sélectionnez votre champ de formulaire dans l’éditeur par glisser-déposer.
  2. Dans le panneau de paramètres à droite, associez le champ à l’attribut de profil approprié.
  3. Sélectionnez Préremplir à partir du profil utilisateur.

Paramètres du champ de formulaire de page de destination montrant l'option de préremplissage à partir des données du profil utilisateur.

Le préremplissage ne fonctionne que pour les utilisateurs identifiés. Pour les visiteurs anonymes, les champs de formulaire conservent leur état par défaut :

  • Champs de saisie : Affichent leur texte de marque substitutive.
  • Cases à cocher, boutons radio et contrôles similaires : Restent non sélectionnés jusqu’à ce que l’utilisateur interagisse avec eux.

Récupérer des données externes avec du code personnalisé

Vous pouvez utiliser un bloc Custom Code pour récupérer des données depuis des endpoints externes et les afficher sur votre page de destination. Cette approche effectue la requête côté client (dans le navigateur de l’utilisateur), ce qui permet à la page de se charger rapidement sans délais de rendu côté serveur.

Cas d’usage

Ce modèle est utile lorsque vous devez afficher des données spécifiques à l’utilisateur qui ne sont pas stockées dans Braze. Par exemple : inventaire en temps réel, recommandations personnalisées ou autres données que votre organisation gère dans des systèmes distincts.

Exemple de déploiement

Cet exemple montre comment récupérer des données utilisateur depuis une API externe. Remplacez l’endpoint de l’API par votre propre endpoint sécurisé et utilisez un identifiant sécurisé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script>
window.onload = () => {
  // Use Liquid to template the user's external ID
  const userId = "{{${user_id}}}";

  const loadUserData = async () => {
    try {
      // Replace with your own secure API endpoint
      const response = await fetch(`https://your-api.example.com/user/${userId}`);

      if (!response.ok) {
        throw new Error('Failed to load data');
      }

      const data = await response.json();

      // Update the page with the fetched data
      document.querySelector("#user-data").textContent = JSON.stringify(data, null, 2);
      document.querySelector("#user-name").textContent = data.name || "User";
    } catch (error) {
      // Handle errors gracefully
      document.querySelector("#user-data").textContent = "Unable to load data at this time.";
    }
  };

  loadUserData();
};
</script>

<!-- Display area for fetched data -->
<p>Welcome, <span id="user-name">Loading...</span></p>
<pre id="user-data">Loading your information...</pre>

Considérations

Lorsque vous récupérez des données externes dans des pages de destination :

  • États de chargement : Les utilisateurs verront un texte de remplacement jusqu’à ce que l’endpoint réponde. Envisagez d’ajouter un indicateur de chargement ou un écran squelette.
  • Gestion des erreurs : Si l’endpoint échoue ou met du temps à répondre, la page peut sembler défaillante. Implémentez des messages d’erreur et des solutions de repli appropriés.
  • Performance : La page se charge immédiatement, mais les données apparaissent une fois la requête externe terminée. Gardez vos réponses API rapides pour offrir la meilleure expérience utilisateur.
  • Sécurité : Assurez-vous que votre endpoint API valide l’identifiant et ne renvoie que les données que l’utilisateur est autorisé à consulter. Mettez en place une limitation du débit pour prévenir les abus. Pour des conseils sur le choix d’identifiants sécurisés, consultez les bonnes pratiques de nommage des ID utilisateur.

Pages de secours

Si vos utilisateurs tentent d’accéder à une page qui a été dépubliée, ils verront un message indiquant que la page ne peut pas être chargée actuellement. Les raisons pour lesquelles une page a été dépubliée incluent :

  • Du Liquid complexe ou défectueux, pouvant entraîner des temps de rendu prolongés
  • Des problèmes de réseau côté utilisateur
  • Le dépassement des limites de taille maximale des pages de destination
New Stuff!