Landing-Pages erstellen
Erfahren Sie, wie Sie mit dem Drag-and-Drop-Editor eine Landing-Page erstellen und anpassen, um Ihre Zielgruppe zu vergrößern und Präferenzen direkt in Braze zu erfassen.
Voraussetzungen
Um auf den Landing-Page-Builder zuzugreifen, benötigen Sie bestimmte Berechtigungen. Falls Sie keinen Zugriff haben, wenden Sie sich an Ihre:n Braze-Admin.
Landing-Page erstellen
Eine Landing-Page ist eine live veröffentlichte Webseite mit einer teilbaren URL, die Ihre Kund:innen besuchen können.
Landing-Page-Templates sind unveröffentlichte Design-Ausgangspunkte ohne öffentliche URL, das heißt, sie können nicht mit Ihren Kund:innen geteilt werden. Um eine Seite aus einem Template zu erstellen, lesen Sie Templates verwenden.
Schritt 1: Neuen Entwurf erstellen
Gehen Sie zu Messaging > Landing-Pages und wählen Sie Create landing page aus. Sie können auch den Namen einer bestehenden Landing-Page auswählen, um diese zu duplizieren oder Änderungen vorzunehmen.
Schritt 2: Seitendetails eingeben
Fügen Sie interne und öffentlich sichtbare Details hinzu, die Ihnen helfen, Ihre Landing-Page zu organisieren, zu branden und zu teilen.
Allgemeine Details
Geben Sie einen Namen und eine Beschreibung für die Landing-Page ein. Diese Details werden verwendet, um die Seite in Ihrem internen Workspace zu suchen. Sie sind für Ihre Kund:innen nicht sichtbar.
Website-Details
Richten Sie Metatags ein, um das Erscheinungsbild Ihrer Seite im Browser-Tab anzupassen und für Suchmaschinen zu optimieren. Diese sind für Ihre Kund:innen sichtbar.
Wir empfehlen, diese Best Practices zu befolgen:
| Feld | Beschreibung | Empfehlungen |
|---|---|---|
| Website-Titel | Der Titel, der im Browser-Tab angezeigt wird. | Verwenden Sie maximal 60 Zeichen. |
| Meta-Beschreibung | Ein Textausschnitt, der in Suchergebnissen angezeigt wird. | Verwenden Sie zwischen 140 und 160 Zeichen. |
| Favicon | Das Symbol, das neben dem Website-Titel im Browser-Tab erscheint. | Verwenden Sie ein Seitenverhältnis von 1:1 und einen unterstützten Dateityp wie PNG, JPEG oder ICO. |
| Seiten-URL | Dies ist der URL-Pfad zu Ihrer Landing-Page. Dieser Wert wird auch referenziert, wenn Sie Landing-Page-Liquid-Tags verwenden, die Sie in eine Nachricht einbetten können, um automatisch zu erkennen, wenn Nutzer:innen Ihr Formular absenden. | Dieser Wert muss in Ihrem Workspace eindeutig sein. |
Schritt 3: Seite anpassen
Falls noch nicht geschehen, wählen Sie Save as draft aus. Um mit der Anpassung Ihrer Seite zu beginnen, wählen Sie Edit landing page. Der Drag-and-Drop-Editor lädt ein Standard-Template vor, das Sie für Ihren Anwendungsfall anpassen können.
Der Editor verwendet zwei Arten von Komponenten für die Landing-Page-Gestaltung: Basisblöcke und Formularblöcke. Alle Blöcke müssen in einer Zeile platziert werden. Eine vollständige Referenz zu jedem Block und seinen Eigenschaften finden Sie unter Editor-Blöcke (Landing-Pages).
Sie können diese Blöcke verwenden, um Inhalte hinzuzufügen und das Layout Ihrer Landing-Page anzupassen.
| Blocktyp | Beschreibung |
|---|---|
| Titel | Ein Textblock zum Hinzufügen einer Überschrift oder eines Titels zu Ihrem Inhalt. Nützlich zum Strukturieren von Abschnitten und zur Verbesserung der Lesbarkeit. |
| Absatz | Ein Textblock für längere Beschreibungen oder zusätzlichen Kontext. Unterstützt Rich-Text-Formatierung. |
| Button | Ein klickbares Element, das Nutzer:innen zu einer bestimmten Aktion weiterleitet, z. B. einen Link öffnen oder ein Formular absenden. |
| Radio-Button | Fügt eine Liste von Optionen hinzu, aus der Nutzer:innen genau eine auswählen müssen. Beim Absenden wird das zugehörige angepasste Attribut im Nutzerprofil gespeichert. |
| Bild | Ein Block zum Anzeigen von Bildern. Sie können ein Bild hochladen oder eine URL angeben, um eine externe Quelle zu referenzieren. |
| Link | Ein Hyperlink, den Nutzer:innen anklicken können, um zu einer bestimmten URL zu navigieren. Kann in Text eingebettet oder eigenständig verwendet werden. |
| Abstandhalter | Ein unsichtbarer Block, der vertikalen Abstand zwischen Elementen hinzufügt, um Layout und Lesbarkeit zu verbessern. |
| Benutzerdefinierter Code | Ein Block, der es Ihnen ermöglicht, benutzerdefiniertes HTML, CSS oder JavaScript für erweiterte Anpassungen einzufügen und auszuführen – zum Beispiel Tracking-Pixel, Drittanbieter-Skripte oder benutzerdefiniertes CSS wie max-width für breite Browser. Um über diesen Block mit dem Braze SDK zu interagieren, lesen Sie JavaScript-Brücke für Landing-Pages und Benutzerdefinierte Formularblöcke erstellen. |
Span-Text
Um bestimmte Stile auf Textblöcke ohne benutzerdefinierten Code anzuwenden, markieren Sie den Text, den Sie gestalten möchten, und wählen Sie dann Wrap with span for style aus.
Passen Sie die Span-Eigenschaften an, um Ihre Textgestaltung zu aktualisieren. Dazu gehören:
- Schriftfamilie, Schriftstärke, Schriftgröße
- Zeilenhöhe
- Zeichenabstand
- Textausrichtung und Farbe
- Block-Padding
Sie können diese Blöcke verwenden, um ein Formular zu erstellen, das von Nutzer:innen übermittelte Daten mit ihrem Profil in Braze verknüpft. Beachten Sie: Wenn Sie Formularblöcke verwenden, müssen Sie zusätzlich eine weitere Landing-Page für den Bestätigungsstatus erstellen.
Sie können ein langes Formular in mehrere Schritte aufteilen, jeder mit eigenen Feldern und einem integrierten Bestätigungsschritt, indem Sie ein mehrstufiges Formular verwenden, anstatt Formularblöcke direkt in einer Zeile zu platzieren.
| Blocktyp | Beschreibung |
|---|---|
| E-Mail-Erfassung | Ein Formularfeld für E-Mail-Adressen. Beim Absenden wird die E-Mail-Adresse dem Nutzerprofil in Braze hinzugefügt. |
| Telefonnummer-Erfassung | Ein Formularfeld für Telefonnummern. Beim Absenden wird die:der Nutzer:in für Ihre SMS- oder WhatsApp-Abo-Gruppe angemeldet. |
| Eingabefeld | Ein Formularfeld, das Standardattribute (wie Vor- und Nachname) oder einen angepassten Attribut-String Ihrer Wahl unterstützt. |
| Dropdown | Nutzer:innen können einen Artikel aus einer vordefinierten Liste auswählen. Sie können beliebige angepasste Attribut-Strings zur Liste hinzufügen. |
| Checkbox | Wenn eine:r Nutzer:in das Kästchen ankreuzt, wird das Attribut des Blocks auf true gesetzt. Wenn es nicht angekreuzt wird, wird das Attribut auf false gesetzt. |
| Checkbox-Gruppe | Nutzer:innen können aus mehreren dargestellten Optionen auswählen. Die Werte werden in einem definierten Array-Attribut gesetzt oder hinzugefügt. |
| Abos verwalten | Eine Checkliste mit E-Mail-, SMS- oder WhatsApp-Abo-Gruppen. Nutzer:innen wählen beim Absenden des Formulars aus, welchen Gruppen sie beitreten möchten. Jeder Block ist für einen Kanal vorgesehen. Weitere Informationen finden Sie unter Block „Abos verwalten“. |
Nachdem Sie eine Landing-Page mit einem Formular erstellt haben, stellen Sie sicher, dass Sie den Landing-Page-Liquid-Tag in Ihre Nachricht einbetten. Mit diesem Tag kann Braze automatisch bestehende Nutzerprofile identifizieren und aktualisieren, wenn diese das Formular absenden.
Seitencontainer-Stile
Sie können Stile festlegen, die für alle relevanten Komponentenblöcke auf Ihrer Landing-Page gelten, und zwar über den Tab Page container. Diese Stile gelten überall auf Ihrer Seite, außer dort, wo Sie sie mit einem bestimmten Block überschreiben.
Wir empfehlen, zunächst Stile auf Seitencontainer-Ebene einzurichten, bevor Sie Stile auf Blockebene anpassen. Sie können auch ein Hintergrundbild für die gesamte Seite hinzufügen.
Verwenden Sie Content width, um eine maximale Breite für Ihren Seiteninhalt auf großen Bildschirmen festzulegen. Wählen Sie eine Voreinstellung (Narrow (640px), Normal (1120px), Wide (1440px) oder Full width (100%)) oder wählen Sie Custom und geben Sie einen Wert ein. Für Layout- oder Stiloptionen über diese hinaus fügen Sie CSS in einem Custom Code-Block hinzu.
Responsiv für Nutzergeräte
Sie können Ihre Landing-Page responsiv für die Gerätegröße Ihrer Nutzer:innen gestalten, indem Spalten auf kleineren Bildschirmen vertikal gestapelt werden. Um dies zu aktivieren, fügen Sie eine Spalte in die Zeile ein, die responsiv werden soll, und aktivieren Sie dann Vertically stack on smaller screens im Bereich Customize columns.
Wenn diese Option aktiviert ist, können Sie die Stapelreihenfolge der Spalten auch umkehren, um die vertikale Reihenfolge von mehrspaltigem Inhalt auf kleineren Bildschirmen zu steuern. So sehen und funktionieren Seiten auf Mobilgeräten besser – ohne benutzerdefinierten Code.
Zeilen und Blöcke nach Gerät ausblenden
Sie können eine Zeile oder einen Block auf dem Desktop oder auf Tablet- und Mobilgeräten ausblenden. Wählen Sie die Zeile oder den Block auf dem Canvas aus. Wählen Sie im Eigenschaftenpanel Hide on und dann Desktop oder Tablet and smaller devices aus.
Eine ausgeblendete Zeile oder ein ausgeblendeter Block wird für diesen Gerätetyp weder in der Vorschau des Drag-and-Drop-Editors noch auf der veröffentlichten Landing-Page angezeigt.
Optionale und Pflichtfelder
Sie können festlegen, ob bestimmte Formularfelder Pflichtfelder oder optional sind. Pflichtfelder müssen ausgefüllt werden, bevor das Formular abgesendet werden kann. Optionale Felder können von Nutzer:innen leer gelassen oder nicht ausgewählt werden.
Radio-Buttons sind immer Pflichtfelder und können nicht als optional festgelegt werden. Wenn Sie ein optionales Einzelauswahl-Feld benötigen, verwenden Sie stattdessen ein Dropdown.
Um beispielsweise eine Einwilligungserfassung vor dem Absenden des Formulars zu erzwingen, können Sie Required field input aktivieren, um eine Checkbox mit dem entsprechenden Hinweistext als Pflichtfeld festzulegen.
Schritt 4: Bestätigungsseite erstellen (optional)
Wenn Ihre Landing-Page kein Formular enthält, fahren Sie mit dem nächsten Schritt fort.
Wenn Ihr Formular ein mehrstufiges Formular verwendet, überspringen Sie diesen Schritt. Mehrstufige Formulare enthalten einen integrierten, gesperrten Bestätigungsschritt, sodass Sie keine separate Bestätigungsseite benötigen.
Wenn Ihre Landing-Page ein Formular enthält, können Sie optional eine zweite Landing-Page erstellen, die als Bestätigungserlebnis dient. Diese Seite sollte Nutzer:innen danken oder einen nächsten Schritt nach dem Absenden des Formulars bereitstellen.
- Wählen Sie den Submit-Button in Ihrem Formular aus.
- Wählen Sie, ob eine Bestätigungsseite angezeigt werden soll, wenn Nutzer:innen Ihr Formular absenden.
- Verwenden Sie das Klickverhalten Open web URL, um Nutzer:innen zu einer Bestätigungsseite weiterzuleiten.
- Verwenden Sie das Klickverhalten None, damit Nutzer:innen auf der Landing-Page bleiben.
Wenn Sie keine Bestätigungsseite einbinden, wissen Nutzer:innen möglicherweise nicht, dass ihr Formular erfolgreich abgesendet wurde. Fügen Sie immer ein Bestätigungserlebnis ein, um den Ablauf abzuschließen.
Wenn Ihre Bestätigungsseite in einem neuen Tab geöffnet wird, kann eine:r Nutzer:in, die:der zur ursprünglichen Landing-Page zurückkehrt und das Formular mit aktualisierten Informationen erneut absendet, die vorherige Übermittlung überschreiben, was zu inkonsistenten Daten führen kann.
Schritt 5: Seite in der Vorschau anzeigen
Sie können Ihre Landing-Page im Tab Preview des Editors in der Vorschau anzeigen. Nachdem Sie Ihre Landing-Page als Entwurf gespeichert haben, können Sie die URL aufrufen, indem Sie zu Landing-Pages gehen und neben Ihrer Landing-Page Copy URL auswählen.
Vorschau-Link teilen
Im Editor können Sie auch Copy preview link auswählen, um die Seite mit Prüfer:innen zu teilen, die keinen Dashboard-Zugang haben.
- Wenn Ihre Landing-Page kein Liquid verwendet, ist dieser Link derselbe wie die direkte URL von Copy URL, geöffnet im Vorschaumodus.
- Wenn Ihre Landing-Page Liquid verwendet und Sie über die Landing Pages Pro-Berechtigung verfügen, rendert der Link stattdessen die Live-Seite on demand und spiegelt Ihre aktuellen Änderungen wider, anstatt einen Snapshot vom Zeitpunkt der Link-Erstellung. Der Inhalt wird pro Nutzer:in personalisiert. Die Vorschau zeigt das Braze-Favicon an und kann nicht geändert werden.
- Wenn Sie Liquid zu einer Landing-Page ohne die Pro-Stufe hinzufügen, werden die Liquid-Tags nicht ausgewertet und erscheinen als Rohtext für Besucher:innen auf der veröffentlichten Seite.
Informationen zu Vorschau-Links auf anderen Kanälen finden Sie unter Teilbare Vorschau.
Schritt 6: Veröffentlichen
Stellen Sie vor der Veröffentlichung sicher, dass:
- Sie das Limit Ihres Tarifs für veröffentlichte Landing-Pages nicht überschritten haben
- Jede formularbasierte Seite über die Aktion Open web URL mit einer Bestätigungsseite verknüpft ist oder ein mehrstufiges Formular mit integriertem Bestätigungsschritt verwendet
- Alle erforderlichen Seitenfelder (wie URL-Pfad und Titel) vollständig sind
Wenn Sie bereit sind, wählen Sie Publish Landing Page aus.
Aggressive Pop-up-Blocker und Werbeblocker auf iOS und in Safari (einschließlich der integrierten Steuerungen von Safari und Drittanbieter-Erweiterungen) können das Verhalten von Landing-Pages beeinträchtigen, wenn ein Submit-Button des Formulars gleichzeitig eine andere URL öffnet – unabhängig davon, ob diese URL im selben Tab oder in einem neuen Tab geöffnet wird.
Templates verwenden
Landing-Page-Templates sind wiederverwendbare Design-Ausgangspunkte, mit denen Sie Landing-Pages schneller erstellen können. Ein Template hat keine öffentliche URL und kann von Kund:innen nicht aufgerufen werden. Um aus einem Template eine Live-Landing-Page zu erstellen, wählen Sie das Template beim Erstellen einer neuen Landing-Page aus, passen Sie es nach Bedarf an und veröffentlichen Sie es.
Templates können sowohl im Landing-Page-Editor als auch über die Seite Landing Page Templates (Content > Landing Page) aufgerufen und verwaltet werden. Landing-Page-Templates erfordern einen Namen und eine optionale Beschreibung.
Templates verwalten
Sie können Landing-Page-Templates in der Vorschau anzeigen, archivieren oder bearbeiten. Sie können Ihre eigenen Landing-Page-Templates (unter Ihre Templates) duplizieren, jedoch keine Braze-Templates. Beim Bearbeiten einer Landing-Page können Sie Ihre Landing-Page als Template speichern, Änderungen am Template vornehmen oder den Inhalt der Landing-Page löschen.
Analytics ansehen
Um die Effektivität Ihrer Landing-Page zu analysieren, gehen Sie zu Messaging > Landing-Pages und wählen Sie eine veröffentlichte Landing-Page aus. Hier können Sie die Anzahl der Seitenaufrufe, Seitenklicks, Formularübermittlungen und die Übermittlungsraten Ihrer Landing-Page verfolgen.
Fehler bei der Formularübermittlung behandeln
Wenn Nutzer:innen versuchen, ein Formular mit fehlenden oder nicht unterstützten Eingaben abzusenden, wird eine allgemeine Fehlermeldung angezeigt und das Absenden ist nicht möglich.
Häufige Ursachen:
- Erforderliche Felder sind leer
- Sonderzeichen werden in Texteingaben verwendet
- Ein erforderliches Kontrollkästchen ist nicht aktiviert
Fehlermeldungen, die Nutzer:innen angezeigt werden, können nicht angepasst werden. Zeigen Sie eine Vorschau Ihrer Landing-Page an, um das Feldverhalten vor der Veröffentlichung zu überprüfen.