Zum Inhalt springen

Landing-Pages personalisieren

Verwenden Sie Liquid-Personalisierung in Landing-Pages, um den Inhalt dynamisch mit Nutzerprofildaten anzupassen. So können Sie beispielsweise Überschriften basierend auf verschiedenen Nutzerattributen personalisieren, ohne mehrere statische Landing-Pages verwalten zu müssen.

Liquid einfügen

Im Drag-and-Drop-Editor können Sie Liquid-Personalisierung sowohl im Editor als auch in den Seiten- oder Blockeinstellungen im rechten Panel einfügen. Anweisungen zur Implementierung von Liquid finden Sie in unserer speziellen Liquid-Dokumentation.

Landing-Page-Editor mit hinzugefügter Liquid-Personalisierung.

Vorschau und Tests

Wenn Sie eine Landing-Page im Editor in der Vorschau anzeigen, können Sie die Seite als zufällige:r Nutzer:in, als vorhandene:r Nutzer:in oder als benutzerdefinierte:r Nutzer:in betrachten.

Wenn Sie die Landing-Page jedoch über die Datentabelle oder die Seite Landing-Page-Details in der Vorschau anzeigen, können Sie sie nur als zufällige:r Nutzer:in betrachten.

Überlegungen zur Personalisierung

Um eine optimale Performance mit personalisierten Landing-Pages zu gewährleisten, beachten Sie die folgenden Größenbeschränkungen:

  • Speichern einer Landing-Page: Wenn die Größe 500 KB überschreitet, erhalten Sie möglicherweise eine Warnmeldung, die darauf hinweist, dass die Seite unsere Größenbeschränkungen überschritten hat, was eine Veröffentlichung verhindern kann.
  • Rendern mit Liquid-Personalisierung: Die Gesamtgröße darf 1 MB nicht überschreiten. Andernfalls kann die Seite von Braze automatisch zurückgezogen werden.

Zurückziehen von Landing-Pages vermeiden

Wenn Ihre Seite diese Größenbeschränkungen überschreitet, erhalten Sie eine E-Mail mit dem Hinweis, dass sie zurückgezogen werden kann, wenn die Beschränkung weiterhin überschritten wird. Wenn der Schwellenwert erreicht wird, wird die Seite automatisch zurückgezogen, und Sie erhalten eine Benachrichtigung.

Um zu verhindern, dass Ihre Seite die Größenbeschränkungen überschreitet oder lange Ladezeiten auftreten, stellen Sie sicher, dass die Liquid-Personalisierung:

  • Nicht kontinuierlich große Datensätze durchläuft oder referenziert.
  • Nicht auf umfangreiche mathematische oder bedingte Logik innerhalb des Liquid-Blocks angewiesen ist.

Vermeiden Sie es außerdem, große Skripte, Stylesheets und base64-kodierte Assets direkt in den Code Ihrer Landing-Page einzubetten. Diese Inline-Assets zählen zur Seitengrößenbeschränkung und können das Rendern verlangsamen. Laden Sie stattdessen Schriftarten, Bilder, Stylesheets und Skripte in die Medienbibliothek hoch. Assets, die aus der Medienbibliothek bereitgestellt werden, werden über das CDN von Braze gehostet und durchlaufen daher keine Liquid-Verarbeitung und zählen nicht zur Seitengrößenbeschränkung.

Liquid für identifizierte und anonyme Nutzer:innen verwenden

Liquid kann das Landing-Page-Erlebnis sowohl für identifizierte als auch für anonyme Besucher:innen anpassen.

  • Identifizierte Nutzer:innen: Verlinken Sie die Landing-Page aus einer Braze-Nachricht heraus und fügen Sie den Landing-Page-Liquid-Tag ein. Dies verknüpft die Nutzer:innen mit ihrem Braze-Profil und personalisiert das Seitenerlebnis.
  • Anonyme Besucher:innen: Verwenden Sie Liquid für kontextuelle, nicht profilbasierte Inhalte, wie eine Zufallszahl oder eine tageszeitabhängige Begrüßung.

Formularfelder vorausfüllen

Wenn ein Landing-Page-Formularfeld einem Nutzerprofil-Attribut zugeordnet ist, können Sie dieses Feld für wiederkehrende Nutzer:innen vorausfüllen. Dies hilft, die Reibung beim Ausfüllen von Formularen zu reduzieren, und verbessert die Abschlussraten für bekannte Besucher:innen.

So verwenden Sie vorausgefüllte Formularfelder:

  1. Wählen Sie Ihr Formularfeld im Drag-and-drop-Editor aus.
  2. Ordnen Sie im Einstellungs-Panel auf der rechten Seite das Feld dem entsprechenden Profil-Attribut zu.
  3. Wählen Sie Aus Nutzerprofil vorausfüllen aus.

Einstellungen für Landing-Page-Formularfelder mit der Option, Daten aus dem Nutzerprofil vorzubelegen.

Das Vorausfüllen funktioniert nur für identifizierte Nutzer:innen. Für anonyme Besucher:innen behalten Formularfelder ihren Standardzustand bei:

  • Eingabefelder: Zeigen ihren Platzhalter an.
  • Checkboxen, Radio-Buttons und ähnliche Steuerelemente: Bleiben unausgewählt, bis Nutzer:innen mit ihnen interagieren.

Externe Daten mit benutzerdefiniertem Code abrufen

Sie können einen Custom-Code-Block verwenden, um Daten von externen Endpunkten abzurufen und auf Ihrer Landing-Page anzuzeigen. Dieser Ansatz führt die Anfrage clientseitig (im Browser der Nutzer:innen) aus, sodass die Seite schnell geladen wird, ohne serverseitige Rendering-Verzögerungen.

Anwendungsfall

Dieses Muster ist nützlich, wenn Sie nutzerspezifische Daten anzeigen müssen, die nicht in Braze gespeichert sind. Beispiele hierfür sind Echtzeit-Lagerbestände, personalisierte Empfehlungen oder andere Daten, die Ihre Organisation in separaten Systemen verwaltet.

Beispielimplementierung

Dieses Beispiel zeigt, wie Sie Nutzerdaten von einer externen API abrufen. Ersetzen Sie den API-Endpunkt durch Ihren eigenen sicheren Endpunkt und verwenden Sie einen sicheren Bezeichner.




<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>

Hinweise

Beim Abrufen externer Daten auf Landing-Pages:

  • Ladezustände: Nutzer:innen sehen Platzhaltertext, bis der Endpunkt antwortet. Erwägen Sie, einen Ladeindikator oder ein Skeleton-Screen hinzuzufügen.
  • Fehlerbehandlung: Wenn der Endpunkt ausfällt oder langsam antwortet, kann die Seite fehlerhaft erscheinen. Implementieren Sie geeignete Fehlermeldungen und Fallbacks.
  • Performance: Die Seite wird sofort geladen, aber die Daten erscheinen erst, nachdem die externe Anfrage abgeschlossen ist. Halten Sie Ihre API-Antworten schnell für das beste Nutzererlebnis.
  • Sicherheit: Stellen Sie sicher, dass Ihr API-Endpunkt den Bezeichner validiert und nur Daten zurückgibt, die die Nutzer:innen sehen dürfen. Implementieren Sie Rate-Limiting, um Missbrauch zu verhindern. Hinweise zur Wahl sicherer Bezeichner finden Sie unter Best Practices für die Benennung von Nutzer-IDs.

Fallback-Seiten

Wenn Ihre Nutzer:innen versuchen, auf eine Seite zuzugreifen, die nicht mehr veröffentlicht ist, wird eine Nachricht angezeigt, die darauf hinweist, dass die Seite derzeit nicht geladen werden kann. Gründe für die Aufhebung der Veröffentlichung einer Seite können sein:

  • Komplexes oder fehlerhaftes Liquid, das zu langen Renderzeiten führen kann
  • Netzwerkprobleme der Nutzer:innen
  • Überschreitung der maximalen Größenbeschränkungen für Landing-Pages

Dokumentation für die Braze-Kundenengagement-Plattform.

Ressourcen
Rechtliches
Unternehmen
© 2026 Braze, Inc. Alle Rechte vorbehalten.
Braze-Status wird geprüft
New Stuff!