Skip to content

In-App-Nachrichten mit angepasstem HTML

Unsere Standard-In-App-Nachrichten können zwar auf vielfältige Weise angepasst werden, aber mit Nachrichten, die mit HTML, CSS und JavaScript entworfen und erstellt werden, erhalten Sie noch mehr Kontrolle über das Erscheinungsbild Ihrer Campaigns. Mit etwas einfacher Gestaltung können Sie angepasste Funktionalität und Branding freischalten, die all Ihren Anforderungen entsprechen.

Dieser Nachrichtentyp ist im traditionellen Editor verfügbar.

Funktionsweise

HTML-In-App-Nachrichten ermöglichen eine größere Kontrolle über das Erscheinungsbild einer Nachricht, einschließlich der folgenden Möglichkeiten:

  • Angepasste Schriftarten und Stile
  • Videos
  • Mehrere Bilder
  • On-Click-Verhalten
  • Interaktive Komponenten
  • Angepasste Animationen

Angepasste HTML-Nachrichten können die Methoden der JavaScript Bridge verwenden, um Ereignisse zu protokollieren, angepasste Attribute festzulegen, die Nachricht zu schließen und vieles mehr! Schauen Sie sich unser GitHub-Repository an, das detaillierte Anleitungen zur Verwendung und Anpassung von HTML-In-App-Nachrichten für Ihre Anforderungen enthält, sowie eine Reihe von HTML5-In-App-Nachrichten-Templates, die Ihnen den Einstieg erleichtern.

Rendering-Umgebungen

Angepasste HTML-In-App-Nachrichten werden im Internet direkt im Browser gerendert, auf iOS und Android jedoch innerhalb einer plattformspezifischen WebView. Da jede Umgebung eine andere Rendering-Engine verwendet, können dasselbe HTML und CSS auf verschiedenen Plattformen leichte visuelle Unterschiede aufweisen, insbesondere bei Spaltenlayouts, Schriftarten und Abständen.

Um plattformübergreifende Unterschiede zu minimieren:

  • Verwenden Sie explizite CSS-Werte, anstatt sich auf Browser-Standardwerte zu verlassen
  • Fügen Sie ein Viewport-Meta-Tag ein (zum Beispiel <meta name="viewport" content="width=device-width, initial-scale=1">)
  • Testen Sie auf echten Geräten mit Testsendungen

Zeichenkodierung

Wenn Sie angepasste HTML-In-App-Nachrichten mit Sonderzeichen erstellen – wie kyrillischer Schrift, Zeichen mit Akzenten oder anderem Nicht-ASCII-Text – fügen Sie die UTF-8-Kodierung in Ihr HTML ein, um eine korrekte Darstellung sicherzustellen. Ohne UTF-8-Kodierung können diese Zeichen in der Webview fehlerhaft oder gar nicht angezeigt werden.

Um die UTF-8-Kodierung zu aktivieren, fügen Sie das folgende Meta-Tag in Ihren HTML-<head>-Bereich ein:

1

<meta charset="UTF-8">

Dies erzwingt die UTF-8-Kodierung, die der erwartete Zeichensatz für Webviews ist, die In-App-Nachrichten anzeigen.

JavaScript-Bridge

Custom HTML in-app messages and Banners support a JavaScript “bridge” to interface with the Braze SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. These methods exist with the global brazeBridge or appboyBridge variable.

For example, to log a custom attribute and custom event, then close the message, you could use the following JavaScript within your custom HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<button id="button">Set Favorite Color</button>
<script>
// Wait for the `brazeBridge` ready event, "ab.BridgeReady"
window.addEventListener("ab.BridgeReady", function(){
  // Event handler when the button is clicked
  document.querySelector("#button").onclick = function(){
    // Track Button 1 clicks for analytics
    // Note: This requires Android SDK v8.0.0, Web SDK v2.5.0, Swift SDK v5.4.0, and iOS SDK v3.23.0
    brazeBridge.logClick("0");
    // Set the user's custom attribute
    brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    brazeBridge.requestImmediateDataFlush();
    // Close the message
    brazeBridge.closeMessage();
  };
}, false);
</script>

JavaScript Bridge methods

The following JavaScript methods are supported within custom HTML for in-app messages and Banners:

Methodenname Beschreibung
brazeBridge.closeMessage() Schließt die aktuelle Nachricht. Das Verhalten unterscheidet sich je nach Kanal:

In-App-Nachrichten: Schließt nur die UI. Es wird kein Dismissal protokolliert und keine serverseitige Unterdrückung ausgelöst.

Banner: Entspricht dem Aufruf von logBannerDismissal. Dabei wird ein Banner-Dismissal protokolliert, das Banner aus der UI entfernt und für die:den Nutzer:in unterdrückt. Außerdem werden alle aktiven subscribeToBannersUpdates-Abonnent:innen erneut ausgelöst. Rufen Sie diese Methode nicht auf, wenn die Nachricht bereits dabei ist, sich zu schließen, oder aufgrund der Verarbeitung eines Deep-Links automatisch geschlossen wird.
window.addEventListener("ab.BridgeReady", function(){...}, false) Callback-Methode, wenn das Laden von brazeBridge abgeschlossen ist. Der gesamte JavaScript-Code sollte innerhalb dieser Callback-Funktion ausgeführt werden.
brazeBridge.requestImmediateDataFlush() Sendet die Daten in der Warteschlange an die Braze-Server. JS Docs
brazeBridge.logClick(button_id_string) Protokolliert einen Button-Klick für eine bestimmte Button-ID. Wenn button_id_string leer gelassen wird, wird stattdessen ein Body-Klick protokolliert. Der button_id_string kann als button_id in In-App-Nachrichten-Klick-Events über Currents weitergegeben werden.

Diese Methode wurde in Android SDK v8.0.0, Web SDK v2.5.0 und iOS SDK v3.23.0 eingeführt.

Für button_id_string sind nur alphanumerische Zeichen, Leerzeichen, Bindestriche und Unterstriche zulässig. Das Hinzufügen eines Zeichens mit einem Akzent (z. B. ö, â, ê) unterbricht das Tracking von Button-Klicks, was dazu führt, dass der Button-String nicht im Analytics-Bereich der Campaign erscheint und Klicks nicht berücksichtigt werden.
brazeBridge.logCustomEvent(eventName,eventProperties) Protokolliert ein angepasstes Event. JS Docs
brazeBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties) Protokolliert einen Kauf. JS Docs
brazeBridge.getUser().addAlias(alias, label) Fügt eine:r Nutzer:in einen Alias hinzu. Eingeführt in Web SDK v2.7.0, Android v8.1.0 und iOS SDK v3.26.0. JS Docs
brazeBridge.getUser().addToCustomAttributeArray(key, value) Fügt einem angepassten Attribut-Array einen Wert hinzu. JS Docs
brazeBridge.getUser().addToSubscriptionGroup(subscriptionGroupId) Fügt eine:n Nutzer:in zu einer E-Mail- oder SMS-Abo-Gruppe hinzu. JS Docs.

Diese Methode wurde in Android SDK v15.0.0, Web SDK v3.4.0 und iOS SDK v4.3.3 eingeführt.
brazeBridge.getUser().removeFromSubscriptionGroup(subscriptionGroupId) Entfernt eine:n Nutzer:in aus einer E-Mail- oder SMS-Abo-Gruppe. JS Docs.

Diese Methode wurde in Android SDK v15.0.0, Web SDK v3.4.0 und iOS SDK v4.3.3 eingeführt.
brazeBridge.getUser().setFirstName(firstName) Legt den Vornamen einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setLastName(lastName) Legt den Nachnamen einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setEmail(email) Legt die E-Mail-Adresse einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setGender(gender) Legt das Geschlecht einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setDateOfBirth(year, month, day) Legt das Geburtsdatum einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setCountry(country) Legt das Land einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setHomeCity(city) Legt den Ort einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType) Legt den Abo-Status für E-Mail-Benachrichtigungen fest. JS Docs
brazeBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType) Legt den Abo-Status für Push-Benachrichtigungen fest. JS Docs
brazeBridge.getUser().setPhoneNumber(phoneNumber) Legt die Telefonnummer einer:s Nutzer:in fest. JS Docs
brazeBridge.getUser().setCustomUserAttribute(key, value, merge) Legt ein angepasstes Nutzerattribut fest. JS Docs
brazeBridge.getUser().removeFromCustomAttributeArray(key, value) Entfernt ein angepasstes Nutzerattribut. JS Docs
brazeBridge.getUser().incrementCustomUserAttribute(key, incrementValue) Erhöht ein angepasstes Nutzerattribut. JS Docs
brazeBridge.getUser().setLanguage(language) Legt die Sprache einer:s Nutzer:in fest. Eingeführt in Android SDK v5.0.0 und Web SDK v2.6.0. JS Docs
brazeBridge.getUser().setCustomLocationAttribute(key, latitude, longitude) Legt ein angepasstes Standortattribut fest. Eingeführt in Android SDK v5.0.0. JS Docs
brazeBridge.web.registerAppboyPushMessages(successCallback, deniedCallback) Registriert für Web-Push (nur Web). Diese Methode ist ein No-op, wenn sie in einer Nicht-Web-Umgebung aufgerufen wird. JS Docs
brazeBridge.requestPushPermission(successCallback, deniedCallback) Registriert für Push über Web, iOS und Android. Hinweis: Die Callbacks der Methode werden nur im Web unterstützt. Diese Methode wurde mit Web SDK v4.0.0, Android SDK v21.0.0 und Swift SDK v5.4.0 eingeführt. JS Docs
brazeBridge.changeUser(id, sdkAuthSignature?) Identifiziert die:den Nutzer:in mit einer eindeutigen ID. JS Docs

Diese Methode wurde in Web SDK v4.3.0 eingeführt.

Button click tracking

Use the brazeBridge.logClick(button_id) method to track clicks in your custom HTML.

For in-app messages, you can programmatically track “Button 1”, “Button 2”, and “Body Clicks” using brazeBridge.logClick('0'), brazeBridge.logClick('1'), or brazeBridge.logClick(), respectively.

Clicks Method Supported
Body click brazeBridge.logClick() In-app messages and Banners
Button 1 brazeBridge.logClick('0') In-app messages only
Button 2 brazeBridge.logClick('1') In-app messages only
Custom button tracking brazeBridge.logClick('your custom name here') In-app messages and Banners

For in-app messages, you can track multiple button click events per impression. For example, to close a message and log a Button 2 click:

1

<a href="#" onclick="brazeBridge.logClick('1');brazeBridge.closeMessage()">✖</a>

You can also track new custom button names—up to 100 unique names per campaign. For example, brazeBridge.logClick('blue button') or brazeBridge.logClick('viewed carousel page 3').

Limitations (in-app messages only)

  • You can have up to 100 unique button IDs per campaign.
  • Button IDs can have up to 255 characters each.
  • Button IDs can only include letters, numbers, spaces, dashes, and underscores.

Zusätzlich zu angepasstem JavaScript können Braze SDKs auch Analysedaten mit diesen praktischen URL-Shortcuts senden. Beachten Sie, dass diese Abfrageparameter und URL-Schemata alle zwischen Groß- und Kleinschreibung unterscheiden.

Button-Klick-Tracking (veraltet)

Um Button-Klicks für die In-App-Nachricht-Analytics zu protokollieren, können Sie abButtonId als Abfrageparameter zu jedem Deeplink, jeder Weiterleitungs-URL oder jedem Ankerelement <a> hinzufügen. Verwenden Sie ?abButtonId=0, um einen Klick auf „Button 1“ zu protokollieren, und ?abButtonId=1, um einen Klick auf „Button 2“ zu protokollieren.

Wie bei anderen URL-Parametern sollte der erste Parameter mit einem Fragezeichen ? beginnen, während nachfolgende Parameter durch ein kaufmännisches Und & getrennt werden sollten.

Beispiel-URLs

  • https://example.com/?abButtonId=0 – Klick auf Button 1
  • https://example.com/?abButtonId=1 – Klick auf Button 2
  • https://example.com/?utm_source=braze&abButtonId=0 – Klick auf Button 1 mit anderen vorhandenen URL-Parametern
  • myApp://deep-link?page=home&abButtonId=1 – Mobiler Deeplink mit Klick auf Button 2
  • <a href="https://example.com/?abButtonId=1"> – Ankerelement <a> mit Klick auf Button 2

Um Links außerhalb Ihrer App in einem neuen Fenster zu öffnen, setzen Sie ?abExternalOpen=true. Die Nachricht wird geschlossen, bevor der Link geöffnet wird.

Beim Deeplinking öffnet Braze Ihre URL unabhängig vom Wert von abExternalOpen.

Damit Braze Ihren HTTP- oder HTTPS-Link als Deeplink behandelt, setzen Sie ?abDeepLink=true.

Wenn dieser Abfrage-String-Parameter fehlt oder auf false gesetzt ist, versucht Braze, den Weblink in einem internen Webbrowser innerhalb der Host-App zu öffnen.

In-App-Nachricht schließen

Um eine In-App-Nachricht zu schließen, können Sie die JavaScript-Methode brazeBridge.closeMessage() verwenden.

Zum Beispiel schließt <a onclick="brazeBridge.closeMessage()" href="#">Schließen</a> die In-App-Nachricht.

HTML-Upload mit Vorschau

Beim Erstellen von angepassten HTML-In-App-Nachrichten können Sie Ihre interaktiven Inhalte direkt in Braze in der Vorschau anzeigen.

Das Nachrichtenvorschau-Panel des Editors zeigt eine realistische Vorschau, die das in Ihrer Nachricht enthaltene JavaScript rendert. Sie können Ihre angepassten Nachrichten im Vorschau-Panel in der Vorschau anzeigen und mit ihnen interagieren, indem Sie durch Seiten blättern, Formulare oder Umfragen absenden, JavaScript-Animationen ansehen und mehr!

Interaktion mit der HTML-Vorschau durch Wischen zwischen Seiten.

Campaign erstellen

Asset-Dateien

Beim Erstellen von In-App-Nachrichten mit angepasstem Code und HTML-Upload können Sie Campaign-Assets in die Medienbibliothek hochladen, um sie in Ihrer Nachricht zu referenzieren.

Die folgenden Dateitypen werden für den Upload unterstützt:

Dateityp Dateierweiterung
Schriftdateien .ttf, .woff, .otf, .woff2
SVG-Bilder .svg
JavaScript-Dateien .js
CSS-Dateien .css

Braze empfiehlt das Hochladen von Assets in die Medienbibliothek aus zwei Gründen:

  1. Assets, die über die Medienbibliothek zu einer Campaign hinzugefügt werden, ermöglichen die Anzeige Ihrer Nachrichten, auch wenn Nutzer:innen offline sind oder eine schlechte Internetverbindung haben.
  2. In Braze hochgeladene Assets können über mehrere Campaigns hinweg wiederverwendet werden.
Asset-Dateien hinzufügen

Sie können neue oder vorhandene Assets zu Ihrer Campaign hinzufügen.

Um neue Assets zu Ihrer Campaign hinzuzufügen, verwenden Sie den Drag-and-Drop-Bereich zum Hochladen einer Datei. Assets, die in diesem Bereich hinzugefügt werden, werden auch automatisch zur Medienbibliothek hinzugefügt. Um Assets hinzuzufügen, die Sie bereits in die Medienbibliothek hochgeladen haben, wählen Sie Aus Medienbibliothek hinzufügen.

Nachdem Ihre Assets hinzugefügt wurden, erscheinen sie im Bereich Assets für diese Campaign.

Wenn der Dateiname eines Assets mit dem eines lokalen HTML-Assets übereinstimmt, wird es automatisch ersetzt (zum Beispiel wird cat.png hochgeladen und <img src="cat.png" /> existiert).

Andernfalls fahren Sie mit der Maus über ein Asset in der Liste und wählen Sie Kopieren, um die URL der Datei in Ihre Zwischenablage zu kopieren. Fügen Sie dann die kopierte Asset-URL in Ihr HTML ein, wie Sie es normalerweise beim Referenzieren eines Remote-Assets tun würden.

HTML-Editor

Änderungen, die Sie im HTML vornehmen, werden automatisch im Vorschau-Panel gerendert, während Sie tippen. Alle brazeBridge-JavaScript-Methoden, die Sie in Ihrem HTML verwenden, aktualisieren keine Nutzerprofile, während Sie im Dashboard eine Vorschau anzeigen.

Button-Tracking

Sie können die Performance innerhalb Ihrer In-App-Nachricht mit angepasstem Code mithilfe der JavaScript-Methode brazeBridge.logClick(button_id) verfolgen. Damit können Sie „Button 1“, „Button 2“ und „Body-Klicks“ programmatisch mit brazeBridge.logClick('0'), brazeBridge.logClick('1') bzw. brazeBridge.logClick() tracken.

Klicks Methode
Button 1 brazeBridge.logClick('0')
Button 2 brazeBridge.logClick('1')
Body-Klick brazeBridge.logClick()
Angepasstes Button-Tracking brazeBridge.logClick('your custom name here')

Verwenden Sie brazeBridge.logClick(button_id) für HTML-Nachrichten mit Vorschau, wenn Sie mehr als zwei getrackte Buttons benötigen. Button 1 und Button 2 werden '0' und '1' zugeordnet; zusätzliche Buttons verwenden angepasste IDs (bis zu 100 eindeutige IDs pro Campaign). Informationen zu Zeichenbeschränkungen für Button-IDs finden Sie unter Button-Tracking.

Wenn ein Button in Ihrer angepassten HTML-In-App-Nachricht beim Klicken nicht lädt, überprüfen Sie, ob der Link eine gültige URL oder ein unterstütztes Deeplink-Schema verwendet. Fehlerhafte URLs oder nicht unterstützte angepasste Schemata können verhindern, dass die Klickaktion abgeschlossen wird.

Body-Klicks beim Schließen der Nachricht

Der Aufruf von brazeBridge.closeMessage() schließt die Nachricht, protokolliert aber allein keine Analytics. Um einen Body-Klick zu protokollieren, wenn Nutzer:innen die Nachricht schließen, rufen Sie brazeBridge.logClick() vor brazeBridge.closeMessage() auf, damit das Klick-Logging plattformübergreifend konsistent bleibt.

Angepasstes HTML wird auf Android nicht gerendert (Windows-ZIP-Dateien)

Wenn Ihre angepasste HTML-In-App-Nachricht in der Vorschau gerendert wird, aber auf Android-Geräten nicht angezeigt wird, überprüfen Sie, wie Ihre HTML- und Asset-Dateien gepackt wurden. Einige Windows-ZIP-Dienstprogramme fügen Verzeichniseinträge (Ordnerpfade) innerhalb des Archivs hinzu, anstatt Dateien auf der Stammebene zu platzieren.

Android kann möglicherweise keine Assets laden, die mit relativen Pfaden referenziert werden, wenn die ZIP-Datei verschachtelte Verzeichniseinträge enthält. Um dies zu beheben:

  1. Extrahieren Sie Ihre HTML-, CSS-, JavaScript- und Bilddateien in einen einzelnen Ordner.
  2. Wählen Sie beim Erstellen des ZIP-Archivs alle Dateien aus (nicht den übergeordneten Ordner).
  3. Bestätigen Sie, dass die Pfade in Ihrem HTML auf Dateien im ZIP-Stammverzeichnis verweisen (zum Beispiel style.css, nicht assets/style.css), oder passen Sie die Pfade an die flache Struktur an.
  4. Laden Sie die ZIP-Datei erneut hoch und senden Sie eine Testnachricht an ein Android-Gerät.

Alternativ können Sie Assets über die Medienbibliothek hochladen, anstatt sie in einer ZIP-Datei zu bündeln.

Nicht abwärtskompatible Änderungen

  1. Der Deeplink braze://close, der zuvor in mobilen Apps unterstützt wurde, wurde zugunsten der JavaScript-Methode brazeBridge.closeMessage() entfernt. Dies ermöglicht plattformübergreifende HTML-Nachrichten, da das Internet keine Deeplinks unterstützt.

  2. Automatisches Klick-Tracking, das ?abButtonId=0 für Button-IDs verwendete, und „Body-Klick“-Tracking auf Schließen-Buttons wurden entfernt. Die folgenden Codebeispiele zeigen, wie Sie Ihr HTML ändern, um unsere neuen Klick-Tracking-JavaScript-Methoden zu verwenden:

    Vorher Nachher
    <a href="braze://close">Close Button</a> <a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
    <a href="braze://close?abButtonId=0">Close Button</a> <a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
    <a href="app://deeplink?abButtonId=0">Track button 1</a> <a href="app://deeplink" onclick="brazeBridge.logClick('0')">Track button 1</a>
    <script>
    location.href = "braze://close?abButtonId=1"
    </script>    		 <script>
    window.addEventListener("ab.BridgeReady", function(){
      brazeBridge.logClick("1");
      brazeBridge.closeMessage();
    });
    </script>
New Stuff!