Skip to content

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. Anleitungen 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 bestehende: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 bei 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 die Veröffentlichung verhindern kann.
  • Rendern mit Liquid-Personalisierung: Die Gesamtgröße darf 1 MB nicht überschreiten. Andernfalls wird die Seite möglicherweise automatisch von Braze depubliziert.

Depublizierung von Landing-Pages vermeiden

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

Um zu verhindern, dass Ihre Seite die Größenbeschränkungen überschreitet oder langsame 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 außerdem das direkte Einbetten großer Skripte, Stylesheets und Base64-kodierter Assets in Ihren Landing-Page-Code. 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 über die Medienbibliothek bereitgestellt werden, werden auf dem Braze-CDN gehostet, sodass sie nicht für das Liquid-Rendering verarbeitet werden und nicht zur Seitengrößenbeschränkung zählen.

Liquid für identifizierte und anonyme Nutzer:innen verwenden

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

  • Identifizierte Nutzer:innen: Verlinken Sie die Landing-Page aus einer Braze-Nachricht und fügen Sie den Landing-Page-Liquid-Tag hinzu. Dadurch wird die Nutzer:in mit ihrem Braze-Profil verknüpft und das Seitenerlebnis personalisiert.
  • Anonyme Nutzer:innen: Verwenden Sie Liquid für kontextuelle, nicht profilbasierte Inhalte, wie z. B. 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 reduziert die Hürden beim Ausfüllen und verbessert die Abschlussraten für bekannte Nutzer: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 zum Vorausfüllen aus Nutzerprofildaten.

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

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

Externe Daten mit Custom 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 sind Echtzeit-Bestandsdaten, 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.

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>

Überlegungen

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 fehlschlägt 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 die beste Nutzererfahrung.
  • 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, dass die Seite derzeit nicht geladen werden kann. Gründe dafür, dass eine Seite nicht mehr veröffentlicht ist, 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
New Stuff!