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. Falls Sie keinen Zugriff haben, wenden Sie sich an Ihre Braze-Admins.

Eine Landing-Page erstellen

1. Schritt: Einen neuen Entwurf erstellen

Gehen Sie zu Messaging > Landing Pages und wählen Sie Create landing page. Sie können auch den Namen einer bestehenden Landing-Page auswählen, um diese zu duplizieren oder Änderungen vorzunehmen.

2. Schritt: 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 Suchmaschinenergebnisse zu optimieren. Diese sind für Ihre Kund:innen sichtbar.

Wir empfehlen die folgenden Best Practices:

3. Schritt: Die Seite anpassen

Falls noch nicht geschehen, wählen Sie Als Entwurf speichern. Um mit der Anpassung Ihrer Seite zu beginnen, wählen Sie Edit landing page. 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 Gestaltung von Landing-Pages: Basisblöcke und Formularblöcke. Alle Blöcke müssen in einer Zeile platziert werden. Eine vollständige Referenz aller Blöcke und Eigenschaften finden Sie unter Editor-Blöcke (Landing-Pages).

• basisblöcke
• formularblöcke

Mit diesen Blöcken können Sie Inhalte hinzufügen und das Layout Ihrer Landing-Page anpassen.

Blocktyp	Beschreibung
Titel	Ein Textblock zum Hinzufügen einer Überschrift oder eines Titels zu Ihrem Inhalt. Nützlich für die Strukturierung von Abschnitten und die 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. zum Öffnen eines Links oder zum Absenden eines Formulars.
Optionsfeld	Fügt eine Liste von Optionen hinzu, aus denen Nutzer:innen eine auswählen können. Bei der Übermittlung wird das zugehörige angepasste Attribut im Nutzerprofil protokolliert.
Bild	Ein Block zur Anzeige von Bildern. Sie können ein Bild hochladen oder eine URL angeben, um eine externe Quelle zu referenzieren.
Link	Ein Hyperlink, auf den Nutzer:innen klicken können, um zu einer bestimmten URL zu navigieren. Kann in Text eingebettet oder eigenständig verwendet werden.
Abstandshalter	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 für erweiterte Anpassungen einfügen und ausführen können.

Span-Text

Wenn Sie Textblöcken ohne angepassten Code ein bestimmtes Styling zuweisen möchten, markieren Sie den Text, den Sie stylen möchten, und wählen Sie dann Umbruch mit Spanne für Stil.

Passen Sie die Eigenschaften der Spanne an, um Ihr Textstyling zu aktualisieren, einschließlich:

• Schriftfamilie, Gewicht, Größe
• Zeilenhöhe
• Buchstabenabstand
• Textausrichtung und Farbe
• Block padding

Mit diesen Blöcken können Sie ein Formular erstellen, das von Nutzer:innen übermittelte Daten mit deren Profil in Braze verknüpft. Beachten Sie: Wenn Sie Formularblöcke verwenden, müssen Sie auch eine zusätzliche Landing-Page für den Bestätigungsstatus erstellen.

Blocktyp	Beschreibung
E-Mail-Erfassung	Ein Formularfeld für E-Mail-Adressen. Bei der Übermittlung wird die E-Mail-Adresse dem Nutzerprofil in Braze hinzugefügt.
Telefon-Erfassung	Ein Formularfeld für Telefonnummern. Bei der Übermittlung werden die Nutzer:innen 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 Eintrag aus einer vordefinierten Liste auswählen. Sie können beliebige angepasste Attribut-Strings zur Liste hinzufügen.
Kontrollkästchen	Wenn Nutzer:innen das Kästchen aktivieren, wird das Attribut des Blocks auf true gesetzt. Wenn es nicht aktiviert wird, wird das Attribut auf false gesetzt.
Kontrollkästchen-Gruppe	Nutzer:innen können aus mehreren Optionen auswählen. Werte werden entweder gesetzt oder einem definierten Array-Attribut hinzugefügt.

Wichtig

Nachdem Sie eine Landing-Page mit einem Formular erstellt haben, betten Sie unbedingt den zugehörigen Landing-Page-Liquid-Tag in Ihre Nachricht ein. Mit diesem Tag kann Braze bestehende Nutzerprofile automatisch identifizieren und aktualisieren, wenn diese das Formular absenden.

Seitencontainer-Stile

Sie können Stile festlegen, die auf alle relevanten Komponentenblöcke Ihrer Landing-Page angewendet werden, und zwar über den Tab Page container. Diese Stile werden überall auf Ihrer Seite verwendet, es sei denn, Sie überschreiben sie mit einem bestimmten Block.

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 Anordnung von mehrspaltigem Inhalt auf kleineren Bildschirmen zu steuern. So sehen und fühlen sich Seiten auf Mobilgeräten besser an – ohne angepassten Code.

Optionale und erforderliche Felder

Sie können festlegen, ob ein Formularfeld erforderlich oder optional ist. 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.

Um beispielsweise die Einwilligungserfassung vor dem Absenden des Formulars zu erzwingen, können Sie Required field input aktivieren, um ein Kontrollkästchen mit dem entsprechenden Hinweistext als erforderlich festzulegen.

4. Schritt: Eine Bestätigungsseite erstellen (optional)

Wenn Ihre Landing-Page kein Formular enthält, fahren Sie mit dem nächsten Schritt fort.

Wenn Ihre Landing-Page ein Formular enthält, erstellen Sie eine zweite Landing-Page als Bestätigungserlebnis. Diese Seite sollte den Nutzer:innen danken oder einen nächsten Schritt nach dem Absenden des Formulars anbieten.

So verknüpfen Sie die Bestätigungsseite:

• Wählen Sie den Submit-Button in Ihrem Formular aus
• Verwenden Sie die Aktion Open web URL, um auf Ihre Bestätigungsseite zu verlinken

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 die Journey abzuschließen.

Hinweis

Wenn Ihre Bestätigungsseite in einem neuen Tab geöffnet wird, kann es vorkommen, dass Nutzer:innen, die zur ursprünglichen Landing-Page zurückkehren und das Formular mit aktualisierten Informationen erneut absenden, die vorherige Übermittlung überschreiben, was zu inkonsistenten Daten führen kann.

5. Schritt: Vorschau der Seite

Sie können eine Vorschau Ihrer Landing-Page im Tab Preview des Editors 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. Sie können die URL auch mit Kolleg:innen teilen.

Stellen Sie vor der Veröffentlichung 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
• Alle erforderlichen Seitenfelder (wie URL-Pfad und Titel) vollständig sind

Wenn Sie bereit sind, wählen Sie Publish Landing Page.

Hinweis

Aggressive Pop-up-Blocker und Werbeblocker auf iOS und in Safari (einschließlich der integrierten Steuerelemente von Safari und Erweiterungen von Drittanbietern) können das Verhalten von Landing-Pages negativ beeinflussen, wenn ein Submit-Button eines 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

Verwenden Sie Landing-Page-Templates, um Templates für Ihre nächsten Campaigns zu erstellen. Diese 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 optional eine 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 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 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 für Ihre 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.