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 Block-Einstellungen 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 Testen

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.

Hinweise 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.
  • Rendering mit Liquid-Personalisierung: Die Gesamtgröße darf 1 MB nicht überschreiten. Andernfalls kann die Seite automatisch von Braze zurückgezogen werden.

Zurückziehen von Landing-Pages vermeiden

Wenn Ihre Seite diese Größenbeschränkungen überschreitet, erhalten Sie eine E-Mail, dass sie möglicherweise zurückgezogen wird, wenn sie die Grenze weiterhin überschreitet. Wenn der Schwellenwert erreicht ist, wird die Seite automatisch zurückgezogen, 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 durch große Datensätze iteriert oder diese 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 Rendering verlangsamen. Laden Sie stattdessen Schriftarten, Bilder, Stylesheets und Skripte in die Medienbibliothek hoch. Assets, die über die Medienbibliothek bereitgestellt werden, werden auf dem CDN von Braze 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 Besucher: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 Person mit ihrem Braze-Profil verknüpft und das Seitenerlebnis personalisiert.
  • Anonyme Besucher: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 Nutzerprofilattribut zugeordnet ist, können Sie dieses Feld für wiederkehrende Nutzer:innen vorausfüllen. Dies reduziert die Hürden beim Ausfüllen von Formularen 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 rechten Einstellungs-Panel das Feld dem entsprechenden Profilattribut zu.
  3. Wählen Sie Pre-fill from user profile 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 Besucher:innen behalten Formularfelder ihren Standardzustand bei:

  • Eingabefelder: Zeigen ihren Platzhaltertext an.
  • Kontrollkästchen, Optionsfelder und ähnliche Steuerelemente: Bleiben nicht ausgewä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 Realtime-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>

Hinweise

Beim Abrufen externer Daten in 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 das beste Nutzererlebnis.
  • Sicherheit: Stellen Sie sicher, dass Ihr API-Endpunkt den Bezeichner validiert und nur Daten zurückgibt, die die Person sehen darf. 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 zurückgezogen wurde, sehen sie eine Meldung, dass die Seite derzeit nicht geladen werden kann. Gründe für das Zurückziehen einer Seite sind unter anderem:

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