Skip to content

Personnaliser les pages d’accueil

Utilisez la personnalisation Liquid dans les pages d’accueil 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 d’accueil statiques.

Insérer du 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 des instructions sur l’implémentation de Liquid, consultez notre documentation Liquid dédiée.

Éditeur de page d'accueil avec personnalisation Liquid ajoutée.

Prévisualisation et test

Lors de la prévisualisation d’une page d’accueil dans l’éditeur, vous pouvez afficher la page en tant qu’utilisateur aléatoire, utilisateur existant ou utilisateur personnalisé.

Cependant, lors de la prévisualisation de la page d’accueil depuis le tableau de données ou la page Détails de la page d’accueil, 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 d’accueil personnalisées, notez les limites de taille suivantes :

  • Enregistrement d’une page d’accueil : 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 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 d’accueil

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 connaisse des temps de chargement lents, assurez-vous d’utiliser une personnalisation Liquid qui :

  • Ne boucle pas continuellement et 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 d’accueil 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 réseau de diffusion de contenu 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 d’accueil pour les visiteurs identifiés et anonymes.

  • Utilisateurs identifiés : créez un lien vers la page d’accueil depuis un message Braze et incluez l’étiquette Liquid de page d’accueil. 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.

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 dans votre page d’accueil. Cette approche effectue la requête côté client (dans le navigateur de l’utilisateur), de sorte que la page se charge rapidement sans délais de rendu côté serveur.

Cas d’utilisation

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 d’implémentation

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 les pages d’accueil :

  • É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éfectueuse. Implémentez des messages d’erreur et des solutions de repli appropriés.
  • Performances : la page se charge immédiatement, mais les données apparaissent après la fin de la requête externe. Gardez vos réponses API rapides pour une expérience utilisateur optimale.
  • Sécurité : assurez-vous que votre endpoint API valide l’identifiant et ne renvoie que les données que l’utilisateur est autorisé à consulter. Implémentez une limitation de 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 :

  • Un Liquid complexe ou défectueux, pouvant entraîner des temps de rendu longs
  • Des problèmes de réseau côté utilisateur
  • Le dépassement des limites maximales de taille de la page d’accueil
New Stuff!