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 zugreifen zu können, benötigen Sie bestimmte Berechtigungen. Wenn Sie keinen Zugriff haben, wenden Sie sich an Ihren Braze-Administrator.
Landing-Page erstellen
Eine Landing-Page ist eine veröffentlichte, live geschaltete Webseite mit einer teilbaren URL, die Ihre Kund:innen besuchen können.
Landing-Page-Templates sind unveröffentlichte Design-Ausgangspunkte ohne öffentliche URL, die nicht mit Ihren Kund:innen geteilt werden können. Um eine Seite aus einem Template zu erstellen, siehe Templates verwenden.
Schritt 1: Neuen Entwurf erstellen
Gehen Sie zu Messaging > Landing-Pages und wählen Sie Landing-Page erstellen. 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 öffentliche 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 anzupassen, wie Ihre Seite im Browser-Tab angezeigt wird, und optimieren Sie sie für Suchmaschinenergebnisse. 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 bis zu 60 Zeichen. |
| Meta-Beschreibung | Ein Textausschnitt, der in Suchergebnissen angezeigt wird. | Verwenden Sie zwischen 140–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 Als Entwurf speichern. Um mit der Anpassung Ihrer Seite zu beginnen, wählen Sie Landing-Page bearbeiten. Der Drag-and-Drop-Editor wird mit einem Standard-Template vorgeladen, das Sie an Ihren Anwendungsfall anpassen können.
Der Editor verwendet zwei Arten von Komponenten für die Landing-Page-Komposition: Basis-Blöcke und Formular-Blöcke. Alle Blöcke müssen in einer Zeile platziert werden. Eine detaillierte 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 Verbessern 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. zum Öffnen eines Links oder zum Absenden eines Formulars. |
| Radio-Button | Fügt eine Liste von Optionen hinzu, aus denen Nutzer:innen 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 auf eine externe Quelle zu verweisen. |
| 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. |
| Angepasster Code | Ein Block, mit dem Sie angepasstes HTML, CSS oder JavaScript einfügen und ausführen können, um erweiterte Anpassungen vorzunehmen. Um über diesen Block mit dem Braze SDK zu interagieren, siehe JavaScript-Bridge für Landing-Pages und Angepasste Formular-Blöcke erstellen. |
Span-Text
Um bestimmte Stile auf Textblöcke ohne angepassten Code anzuwenden, markieren Sie den Text, den Sie gestalten möchten, und wählen Sie dann Wrap with span for style.
Passen Sie die Span-Eigenschaften an, um Ihre Textgestaltung zu aktualisieren, darunter:
- Schriftfamilie, -stärke, -größ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 deren Profil in Braze verknüpft. Beachten Sie, dass Sie bei Verwendung von Formular-Blöcken auch eine zusätzliche Landing-Page für den Bestätigungszustand erstellen müssen.
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 Formular-Blöcke direkt in eine Zeile zu platzieren.
| Blocktyp | Beschreibung |
|---|---|
| E-Mail-Erfassung | Ein Formularfeld für E-Mail-Adressen. Beim Absenden wird die E-Mail-Adresse dem Profil der Nutzer:innen in Braze hinzugefügt. |
| Telefon-Erfassung | Ein Formularfeld für Telefonnummern. Beim Absenden werden die Nutzer:innen in Ihrer 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 Nutzer:innen das Kontrollkästchen aktivieren, wird das Attribut des Blocks auf true gesetzt. Bleibt es deaktiviert, wird das Attribut auf false gesetzt. |
| Checkbox-Gruppe | Nutzer:innen können aus mehreren angebotenen Optionen auswählen. Werte werden entweder gesetzt oder einem definierten Array-Attribut hinzugefügt. |
| Abos verwalten | Eine Checkliste mit E-Mail-, SMS- oder WhatsApp-Abo-Gruppen. Nutzer:innen wählen beim Absenden des Formulars, welchen Gruppen sie beitreten möchten. Jeder Block gilt für einen Kanal. Weitere Informationen finden Sie unter Block „Abos verwalten“. |
Nachdem Sie eine Landing-Page mit einem Formular erstellt haben, betten Sie den zugehörigen Landing-Page-Liquid-Tag in Ihre Nachricht ein. Mit diesem Tag kann Braze bestehende Nutzerprofile beim Absenden des Formulars automatisch identifizieren und aktualisieren.
Seitencontainer-Stile
Sie können im Tab Page container Stile festlegen, die auf alle relevanten Komponentenblöcke Ihrer Landing-Page angewendet werden. 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.
Responsiv für Nutzergeräte
Sie können Ihre Landing-Page responsiv für die Bildschirmgröße der Nutzergeräte gestalten, indem Sie Spalten auf kleineren Bildschirmen vertikal stapeln. Um dies zu aktivieren, fügen Sie eine Spalte in die Zeile ein, die Sie responsiv gestalten möchten, und aktivieren Sie dann Vertically stack on smaller screens im Abschnitt Customize columns.
Wenn diese Option aktiviert ist, können Sie auch die Stapelreihenfolge der Spalten umkehren, um die vertikale Reihenfolge von mehrspaltigen Inhalten auf kleineren Bildschirmen zu steuern. So sehen und funktionieren Seiten auf mobilen Geräten besser, ohne angepassten 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 im Canvas. Wählen Sie im Eigenschaften-Panel Hide on und dann Desktop oder Tablet and smaller devices.
Eine ausgeblendete Zeile oder ein ausgeblendeter Block erscheint für diesen Gerätetyp weder in der Drag-and-Drop-Editor-Vorschau noch auf der Live-Landing-Page.
Optionale und erforderliche Felder
Sie können festlegen, ob bestimmte Formularfelder erforderlich oder optional sind. Erforderliche Felder 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 erforderlich und können nicht auf optional gesetzt werden. Wenn Sie ein optionales Einzelauswahlfeld benötigen, verwenden Sie stattdessen ein Dropdown.
Um beispielsweise die Einwilligungserfassung vor dem Absenden des Formulars zu erzwingen, können Sie Required field input aktivieren, um eine Checkbox als erforderlich mit dem entsprechenden Hinweistext zu kennzeichnen.
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 als Bestätigungserlebnis erstellen. Diese Seite sollte Nutzer:innen danken oder einen nächsten Schritt nach dem Absenden des Formulars anbieten.
- Wählen Sie den Submit-Button in Ihrem Formular
- 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 hinzu, um den Prozess abzuschließen.
Wenn Ihre Bestätigungsseite in einem neuen Tab geöffnet wird, kann es passieren, dass Nutzer:innen zur ursprünglichen Landing-Page zurückkehren und das Formular mit aktualisierten Informationen erneut absenden. Dies kann die vorherige Übermittlung überschreiben und zu inkonsistenten Daten führen.
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.
Vorschaulink 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 die Landing Pages Pro-Berechtigung haben, rendert der Link stattdessen die Live-Seite bei Bedarf und spiegelt Ihre aktuellen Änderungen wider, anstatt einen Snapshot vom Zeitpunkt der Linkerstellung. Inhalte werden pro Nutzer:in personalisiert. Die Vorschau zeigt das Braze-Favicon und kann nicht geändert werden.
Informationen zu Vorschaulinks auf anderen Kanälen finden Sie unter Teilbare Vorschau.
Schritt 6: Veröffentlichen
Stellen Sie vor dem Veröffentlichen sicher, dass:
- Sie das Limit für veröffentlichte Landing-Pages Ihres Plans 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.
Aggressive Pop-up-Blocker und Werbeblocker auf iOS und in Safari (einschließlich Safaris integrierter Steuerungen und Erweiterungen von Drittanbietern) können das Verhalten von Landing-Pages negativ beeinflussen, wenn ein Submit-Button gleichzeitig eine andere URL öffnet – unabhängig davon, ob die URL im selben Tab oder in einem neuen Tab geöffnet wird.
Templates verwenden
Landing-Page-Templates sind wiederverwendbare Design-Ausgangspunkte, die Ihnen helfen, Landing-Pages schneller zu erstellen. Ein Template hat keine öffentliche URL und kann von Kund:innen nicht aufgerufen werden. Um eine aktive Landing-Page aus einem Template 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 auf der 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 ansehen, archivieren oder bearbeiten. Sie können Ihre eigenen Landing-Page-Templates (unter Your 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 anzeigen
Um die Wirksamkeit 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.