Eine In-App-Nachricht mit Drag-and-Drop erstellen

Der Drag-and-Drop-Editor ist die empfohlene Methode, um die meisten In-App-Nachrichten zu erstellen. Erstellen Sie modale und Vollbild-Nachrichten mit denselben Grundlayouts wie im traditionellen Editor – plus zusätzliche Anpassungsmöglichkeiten durch Zeilen, Content Blocks, Templates und mehrseitige Abläufe. Informationen zu den Bausteinen des Editors finden Sie unter Editor-Blöcke.

Wenn Sie Ihre vorhandenen angepassten HTML-Templates oder von Drittanbietern erstellte Templates verwenden möchten, müssen diese im Drag-and-Drop-Editor neu erstellt werden.

Sie sind sich nicht sicher, ob Ihre In-App-Nachricht über eine Campaign oder einen Canvas gesendet werden soll? Campaigns eignen sich besser für einzelne, gezielte Nachrichten, während Canvases besser für mehrstufige User Journeys geeignet sind. Nachdem Sie ausgewählt haben, wo Sie Ihre Nachricht erstellen möchten, folgen Sie diesen Schritten, um eine Drag-and-Drop-In-App-Nachricht zu erstellen.

Voraussetzungen

SDK-Anforderungen

Weitere Voraussetzungen

• Für das Web SDK muss die Initialisierungsoption allowUserSuppliedJavascript auf true gesetzt sein. Mit der Option enableHtmlInAppMessages funktionieren diese Nachrichten ebenfalls. Sie ist jedoch veraltet und sollte auf allowUserSuppliedJavascript umgestellt werden.
• Wenn Sie Google Tag Manager verwenden, müssen Sie in der GTM-Konfiguration „Allow HTML In-App Messages“ aktivieren.

Schritt 1: Eine In-App-Nachricht erstellen

Erstellen Sie eine neue In-App-Nachricht oder einen neuen Canvas-Schritt und wählen Sie dann Drag-and-Drop-Editor als Bearbeitungsoberfläche aus.

Schritt 2: Wählen Sie Ihr Template aus

Nachdem Sie den Drag-and-Drop-Editor als Bearbeitungsumgebung ausgewählt haben, können Sie Folgendes tun:

• Mit einem leeren Modal-Template beginnen
• Ein Drag-and-Drop-Template für In-App-Nachrichten von Braze verwenden
• Ein gespeichertes Drag-and-Drop-Template für In-App-Nachrichten auswählen

Wählen Sie Nachricht erstellen aus, um mit der Gestaltung Ihrer In-App-Nachricht im Drag-and-Drop-Editor zu beginnen.

Sie können auch über den Bereich Templates im Dashboard auf alle Templates zugreifen.

3. Schritt: Zusätzliche Seiten hinzufügen (optional)

Durch das Hinzufügen von Seiten zu Ihrer In-App-Nachricht können Sie Nutzer:innen durch einen sequenziellen Ablauf führen, z. B. einen Onboarding-Ablauf oder eine Willkommens-Journey. Sie können Seiten im Abschnitt Pages des Tabs Build verwalten.

• seiten hinzufügen
• seiten löschen oder umbenennen

In-App-Nachrichten beginnen standardmäßig mit einer Seite. So fügen Sie eine neue Seite hinzu:

1. Wählen Sie + Add page.
2. Wählen Sie aus der Liste der benutzerdefinierten oder von Braze bereitgestellten Templates.
3. Geben Sie der Seite einen aussagekräftigen Namen. Dies hilft Ihnen beim Verbinden der Seiten.

Tipp

Sie können bis zu 10 Seiten pro In-App-Nachricht hinzufügen.

So duplizieren Sie eine vorhandene Seite:

1. Bewegen Sie den Mauszeiger über die Seite in der Liste und wählen Sie More options.
2. Wählen Sie Duplicate.
3. Geben Sie der Seite einen aussagekräftigen Namen. Dies hilft Ihnen beim Verbinden der Seiten.

So löschen oder benennen Sie eine Seite um:

1. Bewegen Sie den Mauszeiger über die Seite in der Liste und wählen Sie More options.
2. Wählen Sie Rename oder Delete.

Schritt 3a: Seiten miteinander verbinden

Mehrseitige In-App-Nachrichten sind sequenziell, d. h. Nutzer:innen interagieren mit der Nachricht, indem sie tippen oder klicken, um zur nächsten Seite im Ablauf zu gelangen.

So verbinden Sie Seiten miteinander:

1. Wählen Sie Ihre Startseite aus.
2. Wählen Sie ein Button- oder Bildelement im Canvas aus.
3. Setzen Sie On-Click behavior auf Go to page.
4. Wählen Sie die Seite aus, zu der Sie von der Startseite aus verlinken möchten.
5. Fahren Sie fort, bis alle Seiten verknüpft sind.

Wenn eine Seite nicht mit einer anderen Seite verknüpft ist, kann die Nachricht nicht gestartet werden.

Hinweis

Nutzer:innen können jederzeit den Schließen-X-Button auswählen, um die Nachricht zu verlassen. Dieser Button kann nicht entfernt werden.

Schritt 4: Ihre In-App-Nachricht erstellen und gestalten

Hier darf Ihre Nachricht über den Laufsteg stolzieren – im unverwechselbaren Stil Ihrer Marke. Mit einer Kombination aus Editor-Blöcken und Stileinstellungen können Sie Ihre In-App-Nachricht anpassen und gestalten.

• Eine Liste der verfügbaren Editor-Blöcke und ihrer Eigenschaften finden Sie unter Editor-Blöcke.
• Hilfe beim Anpassen des Erscheinungsbilds Ihrer Nachricht finden Sie unter Stileinstellungen.
• Best Practices zum Erstellen von Nachrichten mit Rechts-nach-links-Schreibrichtung finden Sie unter Nachrichten mit Rechts-nach-links-Schreibrichtung erstellen.

Schritt 5: Ihre In-App-Nachricht testen

Im Abschnitt Vorschau & Test können Sie Ihre In-App-Nachrichten auf verschiedenen Geräten in der Vorschau anzeigen und eine Testnachricht an Ihr Gerät senden. Hier stellen Sie sicher, dass die Details Ihrer Drag-and-Drop-In-App-Nachrichten-Kampagne auf allen Ihren Plattformen übereinstimmen.

Testen Sie Ihre In-App-Nachrichten immer, bevor Sie Ihre Kampagnen versenden. So sehen Sie, wie Ihre fertige Nachricht aus Sicht Ihrer Nutzer:innen aussehen wird.

Nachricht als Nutzer:in in der Vorschau anzeigen

Warnung

Damit Sie einen Test an Content-Testgruppen oder einzelne Nutzer:innen senden können, muss Push auf Ihren Testgeräten vor dem Versand aktiviert sein.

Im Tab Vorschau & Test können Sie Nachrichten so in der Vorschau anzeigen, als wären Sie ein:e Nutzer:in. Sie können eine bestimmte Person, eine zufällige Person oder eine angepasste Person auswählen:

• Zufällige:r Nutzer:in: Braze wählt zufällig eine:n Nutzer:in aus der Datenbank aus und zeigt die In-App-Nachricht auf Grundlage der Attribute oder Event-Informationen dieser Person in der Vorschau an.
• Nutzer:in auswählen: Sie können eine bestimmte Person anhand ihrer E-Mail-Adresse oder external_id auswählen. Die Vorschau der In-App-Nachricht basiert auf den Attributen und Event-Informationen dieser Person.
• Angepasste:r Nutzer:in: Sie können eine:n Nutzer:in anpassen. Braze bietet Eingabefelder für alle verfügbaren Attribute und Events. Geben Sie alle Informationen ein, die Sie in der Vorschau sehen möchten.

Test-Checkliste

Berücksichtigen Sie beim Testen Ihrer In-App-Nachricht die folgenden Fragen:

• Haben Sie die Nachricht auf verschiedenen Geräten getestet?
• Werden die Bilder und Medien angezeigt und verhalten sie sich wie erwartet?
• Funktioniert Liquid wie erwartet? Haben Sie einen Standardattributwert für den Fall berücksichtigt, dass Liquid keine Informationen zurückgibt?
• Ist Ihr Text klar, prägnant und korrekt?
• Leiten Ihre Buttons die Nutzer:innen an das richtige Ziel weiter?

Häufig gestellte Fragen

Warum werden Body-Klicks nicht auf meiner Analytics-Seite angezeigt?

Body-Klicks werden für In-App-Nachrichten, die mit dem Drag-and-Drop-Editor erstellt wurden, nicht automatisch erfasst. Weitere Details finden Sie in den SDK-Changelogs für iOS und Android.

Kann ich anhand von Button-Klicks segmentieren?

Ja, Sie können anhand von Button-Klicks für bis zu zwei Buttons in Ihrer Nachricht segmentieren. Setzen Sie dazu den Bezeichner für Reporting Ihrer Buttons auf „0“ und „1“. Diese Werte entsprechen den Segmentierungsfiltern „Auf In-App-Nachricht-Button 1 geklickt“ bzw. „Auf In-App-Nachricht-Button 2 geklickt“.

Kann ich meine In-App-Nachricht mit angepasstem HTML oder JavaScript anpassen oder bestehende HTML-Nachrichten in den Editor übertragen?

Bestehende HTML-Nachrichten können Sie nicht direkt in den Editor übertragen. Sie können jedoch rohes HTML, CSS und JavaScript in einen Block vom Typ Angepasster Code einfügen. Mit Blöcken vom Typ Angepasster Code können Sie Videos von Drittanbietern und fortgeschrittenes Liquid einbetten, etwa Connected-Content oder bedingte Anweisungen. Informationen zu JavaScript-Methoden von brazeBridge und Beispiele für Klick-Tracking finden Sie unter Angepasste HTML-In-App-Nachrichten.

Warum sieht die Composer-Ansicht des Drag-and-Drop-Editors möglicherweise anders aus als die finale Nachricht?

Der Drag-and-Drop-Editor rendert Ihre Nachricht in einem Composer und wendet reine Vorschau-Stile und Standardwerte an, damit Sie das Layout erstellen und überprüfen können. Diese Darstellungen helfen Ihnen, Struktur und Platzhalterinhalte während der Bearbeitung zu sehen. Sie sind jedoch nicht in der Nachricht enthalten, die Ihre Nutzer:innen erhalten.

Typische Beispiele für Verhalten, das nur im Editor auftritt:

• Der Editor umschließt Blöcke vom Typ Angepasster Code mit einem bz-html-code-block-Container mit einer standardmäßigen min-height von 40px, damit leere oder kurze Blöcke während der Bearbeitung sichtbar bleiben
• Bilder, die leer sind oder Liquid enthalten, zeigen im Editor einen Platzhalter an
• Checkbox-Gruppen und Radio-Buttons wählen die erste Option vorab aus, damit Sie den aktiven Zustand in der Vorschau sehen können

Wenn etwas nur im Editor anders aussieht, handelt es sich in der Regel um Vorschauverhalten. Prüfen Sie bei der Fehlerbehebung der zugestellten Nachricht die Stile und das Markup in Ihren Nachrichtenblöcken – nicht den reinen Editor-Rahmen oder die Vorschau-Standardwerte.

Wie kann ich eine Slideup-In-App-Nachricht erstellen?

Derzeit ist der Editor auf modale Nachrichten und Vollbildnachrichten beschränkt. Sie können im Bereich Nachrichtencontainer des Panels Nachrichtenstile zwischen den Anzeigetypen wechseln.

Kann ich meine In-App-Nachricht als Template speichern, nachdem ich sie in meiner Campaign oder meinem Canvas erstellt habe?

Ja. Jede In-App-Nachricht, die Sie in einer zukünftigen Campaign oder einem zukünftigen Canvas-Schritt wiederverwenden möchten, können Sie über den Button Als Template speichern als angepasstes Template speichern. Dieser Button ist verfügbar, nachdem Sie den Editor verlassen haben. Bevor Sie die Nachricht als Template speichern können, müssen Sie die Campaign zunächst starten ODER als Entwurf speichern.

Sie können In-App-Nachricht-Templates auch erstellen und speichern, indem Sie zu Inhalt > In-App-Nachricht navigieren.

Warum wird meine Liquid-Syntax in meiner paginierten In-App-Nachricht als Klartext angezeigt?

Wenn beim Testen einer paginierten In-App-Nachricht Liquid-Syntax als Klartext statt als personalisierter Inhalt angezeigt wird, liegt möglicherweise auf einer der Seiten ein Liquid-Syntaxfehler vor. Ein Syntaxfehler auf einer Seite wirkt sich auf das Rendern von Liquid auf allen Seiten der Nachricht aus – die Seiten sind nicht unabhängig voneinander.

So beheben Sie den Fehler:

1. Überprüfen Sie jede Seite Ihrer Nachricht auf Liquid-Syntaxfehler. Eine fehlerhafte Vorschau auf einer Seite bedeutet nicht, dass der Fehler auf dieser Seite liegt – da die Seiten nicht unabhängig sind, kann sich der Syntaxfehler an beliebiger Stelle in der Nachricht befinden.
2. Überprüfen Sie, ob alle Liquid-Tags ordnungsgemäß geschlossen und korrekt formatiert sind.