Personalizar las notificaciones push

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Android Braze. También tendrás que configurar las notificaciones push.

Utilizar una devolución de llamada para eventos push

Braze proporciona una subscribeToPushNotificationEvents() devolución de llamada para cuando se reciben, abren o descartan notificaciones push. Se recomienda colocar esta devolución de llamada en tu Application.onCreate() para no perderte ningún evento que ocurra mientras tu aplicación no se esté ejecutando.

• java
• kotlin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Braze.getInstance(context).subscribeToPushNotificationEvents(event -> {
  final BrazeNotificationPayload parsedData = event.getNotificationPayload();

  //
  // The type of notification itself
  //
  final boolean isPushOpenEvent = event.getEventType() == BrazePushEventType.NOTIFICATION_OPENED;
  final boolean isPushReceivedEvent = event.getEventType() == BrazePushEventType.NOTIFICATION_RECEIVED;
  // Sent when a user has dismissed a notification
  final boolean isPushDeletedEvent = event.getEventType() == BrazePushEventType.NOTIFICATION_DELETED;

  //
  // Notification data
  //
  final String pushTitle = parsedData.getTitleText();
  final Long pushArrivalTimeMs = parsedData.getNotificationReceivedTimestampMillis();
  final String deeplink = parsedData.getDeeplink();

  //
  // Custom KVP data
  //
  final String myCustomKvp1 = parsedData.getBrazeExtras().getString("my first kvp");
  final String myCustomKvp2 = parsedData.getBrazeExtras().getString("my second kvp");
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Braze.getInstance(context).subscribeToPushNotificationEvents { event ->
    val parsedData = event.notificationPayload

    //
    // The type of notification itself
    //
    val isPushOpenEvent = event.eventType == BrazePushEventType.NOTIFICATION_OPENED
    val isPushReceivedEvent = event.eventType == BrazePushEventType.NOTIFICATION_RECEIVED
    // Sent when a user has dismissed a notification
    val isPushDeletedEvent = event.eventType == BrazePushEventType.NOTIFICATION_DELETED

    //
    // Notification data
    //
    val pushTitle = parsedData.titleText
    val pushArrivalTimeMs = parsedData.notificationReceivedTimestampMillis
    val deeplink = parsedData.deeplink

    //
    // Custom KVP data
    //
    val myCustomKvp1 = parsedData.brazeExtras.getString("my first kvp")
    val myCustomKvp2 = parsedData.brazeExtras.getString("my second kvp")
}

Fuentes personalizadas

Paso 1: Crear una familia tipográfica

A continuación se muestra un ejemplo de definición de familia de fuentes personalizada utilizando la guía de familias de fuentes. Para este ejemplo, utilizamos la fuente Bungee Shade.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto">

  <!--Note: You must declare both sets of attributes
      so that your fonts load on devices running Android 8.0 (API level 26) or lower.
      See https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html -->

  <font android:fontStyle="normal"
        android:fontWeight="400"
        android:font="@font/bungeeshade"

        app:fontStyle="normal"
        app:fontWeight="400"
        app:font="@font/bungeeshade"/>
</font-family>

Después de almacenar la definición de la familia tipográfica en /res/font/bungee_font_family.xml, podemos referirnos a ella en XML como @font/bungee_font_family.

Paso 2: Haz referencia a tu familia tipográfica

Ahora que la familia de fuentes está creada, puedes anular los predeterminados de estilo Braze en tu styles.xml para incluir referencias a la familia de fuentes.

Por ejemplo, la siguiente sustitución de estilos utilizaría la familia de fuentes bungee para todos los mensajes dentro de la aplicación Braze.

1
2
3
4
5
6
7
8
9
<style name="Braze.InAppMessage">
  <item name="android:fontFamily">@font/bungee_font_family</item>
  <item name="fontFamily">@font/bungee_font_family</item>
</style>

<style name="Braze.Cards">
  <item name="android:fontFamily">@font/another_custom_font_family</item>
  <item name="fontFamily">@font/another_custom_font_family</item>
</style>

Personalizar la visualización de notificaciones

Paso 1: Crea tu fábrica de notificaciones personalizada

En algunos casos, es posible que desees personalizar las notificaciones push de formas que serían engorrosas o no estarían disponibles en el servidor. Para darte un control completo de la visualización de notificaciones, hemos añadido la posibilidad de definir tus propias IBrazeNotificationFactory objetos de notificación para que los muestre Braze.

Si se configura un IBrazeNotificationFactory personalizado, Braze llamará al método createNotification() de tu fábrica tras la recepción push antes de que se muestre la notificación al usuario. Braze pasará un Bundle que contiene datos push de Braze y otro Bundle que contiene pares clave-valor personalizados enviados a través del panel o de las API de mensajería:

Braze pasará un archivo BrazeNotificationPayload que contiene los datos de la notificación push de Braze.

• java
• kotlin

1
2
3
4
5
6
7
8
9
// Factory method implemented in your custom IBrazeNotificationFactory
@Override
public Notification createNotification(BrazeNotificationPayload brazeNotificationPayload) {
  // Example of getting notification title
  String title = brazeNotificationPayload.getTitleText();

  // Example of retrieving a custom KVP ("my_key" -> "my_value")
  String customKvp = brazeNotificationPayload.getBrazeExtras().getString("my_key");
}

1
2
3
4
5
6
7
8
// Factory method implemented in your custom IBrazeNotificationFactory
override fun createNotification(brazeNotificationPayload: BrazeNotificationPayload): Notification {
  // Example of getting notification title
  val title = brazeNotificationPayload.getTitleText()

  // Example of retrieving a custom KVP ("my_key" -> "my_value")
  val customKvp = brazeNotificationPayload.getBrazeExtras().getString("my_key")
}

Puedes devolver null desde tu método personalizado createNotification() para no mostrar la notificación en absoluto, utilizar BrazeNotificationFactory.getInstance().createNotification() para obtener nuestro objeto predeterminado notification para esos datos y modificarlo antes de mostrarlo, o generar un objeto notification completamente independiente para mostrarlo.

Paso 2: Configura tu fábrica de notificaciones personalizada

Para indicar a Braze que utilice tu fábrica de notificaciones personalizada, utiliza el método setCustomBrazeNotificationFactory para configurar tus IBrazeNotificationFactory:

• java
• kotlin

1
setCustomBrazeNotificationFactory(IBrazeNotificationFactory brazeNotificationFactory);

1
setCustomBrazeNotificationFactory(brazeNotificationFactory: IBrazeNotificationFactory)

El lugar recomendado para configurar tu IBrazeNotificationFactory personalizado es el método de ciclo de vida de la aplicación Application.onCreate() (no la actividad). Esto permitirá que la fábrica de notificaciones se configure correctamente siempre que el proceso de tu aplicación esté activo.

Para desactivar tu sistema personalizado IBrazeNotificationFactory y volver a la gestión predeterminada de Braze para push, pasa null a nuestro configurador de fábrica de notificaciones personalizadas:

• java
• kotlin

1
setCustomBrazeNotificationFactory(null);

1
setCustomBrazeNotificationFactory(null)

Renderizado del texto multiplicador

En la versión 3.1.1 del SDK de Braze, se puede enviar HTML a un dispositivo para mostrar texto multiplicador en las notificaciones push.

Este ejemplo se muestra con el siguiente HTML:

1
2
3
<p><span style="color: #99cc00;">M</span>u<span style="color: #008080;">lti</span>Colo<span style="color: #ff6600;">r</span> <span style="color: #000080;">P</span><span style="color: #00ccff;">u</span><span style="color: #ff0000;">s</span><span style="color: #808080;">h</span></p>

<p><em>test</em> <span style="text-decoration: underline; background-color: #ff6600;"><strong>message</strong></span></p>

Ten en cuenta que, Android limita qué elementos y etiquetas HTML son válidos en tus notificaciones push. Por ejemplo, marquee no está permitido.

Para representar texto multicolor en una notificación push, puedes actualizar tu braze.xml o BrazeConfig:

• braze.xml
• brazeconfig

1
<bool translatable="false" name="com_braze_push_notification_html_rendering_enabled">true</bool>

1
2
3
4
BrazeConfig brazeConfig = new BrazeConfig.Builder()
  .setPushHtmlRenderingEnabled(true)
  .build();
Braze.configure(this, brazeConfig);

1
2
3
4
val brazeConfig = BrazeConfig.Builder()
    .setPushHtmlRenderingEnabled(true)
    .build()
Braze.configure(this, brazeConfig)

Etiquetas HTML compatibles

Actualmente, Google no enumera las etiquetas HTML compatibles con Android directamente en su documentación; esta información sólo puede encontrarse en el archivo Html.java de su repositorio Git. Tenlo en cuenta cuando consultes la siguiente tabla, ya que esta información se extrajo de este archivo, y sus etiquetas HTML compatibles podrían estar sujetas a cambios.

Renderizado de imágenes en línea

Cómo funciona

Puedes mostrar una imagen más grande dentro de tu notificación push de Android utilizando el push de imagen en línea. Con este diseño, los usuarios no tendrán que expandir manualmente el push para ampliar la imagen. A diferencia de las notificaciones push normales de Android, las imágenes push en línea tienen una relación de aspecto de 3:2.

Compatibilidad

Aunque puedes enviar imágenes en línea a cualquier dispositivo, los dispositivos y SDK que no cumplan las versiones mínimas mostrarán en su lugar una imagen estándar. Para que las imágenes en línea se muestren correctamente, se necesita el SDK de Android Braze v10.0.0+ y un dispositivo que ejecute Android M+.

Enviar una imagen en línea push

Al crear un mensaje push de Android, esta característica está disponible en el desplegable Tipo de notificación.

Configuración

Hay muchas configuraciones avanzadas disponibles para las notificaciones push de Android enviadas a través del panel de Braze. En este artículo se describirán estas características y cómo utilizarlas con éxito.

ID de notificación

Un ID de notificación es un identificador único para una categoría de mensajes de tu elección que informa al servicio de mensajería para que sólo respete el mensaje más reciente de ese ID. Establecer un ID de notificación te permite enviar sólo el mensaje más reciente y relevante, en lugar de una pila de mensajes desfasados e irrelevantes.

Prioridad de entrega de la mensajería Firebase

El campo Prioridad de entrega de la mensajería de Firebase te permite controlar si un push se envía con prioridad “normal” o “alta” a la mensajería en la nube de Firebase.

Tiempo de vida (TTL)

El campo Tiempo de vida (TTL) te permite establecer un tiempo personalizado para almacenar mensajes con el servicio de mensajería push. Los valores predeterminados para el tiempo de vida son cuatro semanas para FCM y 31 días para ADM.

Texto resumido

El texto de resumen te permite establecer texto adicional en la vista ampliada de notificaciones. También sirve como pie de foto para las notificaciones con imágenes.

El texto resumido se mostrará bajo el cuerpo del mensaje en la vista ampliada.

Para las notificaciones push que incluyan imágenes, el texto del mensaje se mostrará en la vista contraída, mientras que el texto del resumen se mostrará como pie de imagen cuando se expanda la notificación.

URIs personalizadas

La característica URI personalizada te permite especificar una URL Web o un recurso Android al que navegar cuando se haga clic en la notificación. Si no se especifica una URI personalizada, al hacer clic en la notificación los usuarios acceden a tu aplicación. Puedes utilizar el URI personalizado para establecer vínculos profundos dentro de tu aplicación y dirigir a los usuarios a recursos que existen fuera de ella. Esto puede especificarse a través de la API de mensajería o de nuestro panel en Configuración avanzada en el compositor push, como se muestra en la imagen:

Prioridad de visualización de notificaciones

El nivel de prioridad de una notificación push afecta a cómo se muestra su notificación en la bandeja de notificaciones en relación con otras notificaciones. También puede afectar a la velocidad y forma de entrega, ya que los mensajes normales y de menor prioridad pueden enviarse con una latencia ligeramente superior o por lotes para preservar la duración de la batería, mientras que los mensajes de alta prioridad siempre se envían inmediatamente.

En Android O, la prioridad de notificación pasó a ser una propiedad de los canales de notificación. Tendrás que trabajar con tu desarrollador para definir la prioridad de un canal durante su configuración y luego utilizar el panel de control para seleccionar el canal adecuado al enviar tus sonidos de notificación. Para los dispositivos que ejecutan versiones de Android anteriores a O, es posible especificar un nivel de prioridad para las notificaciones de Android mediante el panel de Braze y la API de mensajería.

Para enviar mensajes a toda tu base de usuarios con una prioridad específica, te recomendamos que especifiques indirectamente la prioridad a través de la configuración del canal de notificación (para dirigirte a dispositivos O+) y envíes la prioridad individual desde el panel (para dirigirte a dispositivos <O).

Los niveles de prioridad que puedes establecer en las notificaciones push de Android o Fire OS son:

Para más información, consulta la documentación de notificaciones de Android de Google.

Sonidos

En Android O, los sonidos de notificación pasaron a ser una propiedad de los canales de notificación. Tendrás que trabajar con tu desarrollador para definir el sonido de un canal durante su configuración y luego utilizar el panel para seleccionar el canal adecuado al enviar tus notificaciones.

Para los dispositivos que ejecutan versiones de Android anteriores a O, Braze te permite configurar el sonido de un mensaje push individual a través del compositor del panel. Puedes hacerlo especificando un recurso de sonido local en el dispositivo (por ejemplo, android.resource://com.mycompany.myapp/raw/mysound). Si especificas “predeterminado” en este campo, se reproducirá el sonido de notificación predeterminado en el dispositivo. Esto puede especificarse a través de la API de mensajería o del panel en Configuración avanzada en el compositor push.

Introduce el URI completo del recurso de sonido (por ejemplo, android.resource://com.mycompany.myapp/raw/mysound) en la consulta del panel.

Para enviar un mensaje a toda tu base de usuarios con un sonido específico, te recomendamos que especifiques indirectamente el sonido a través de la configuración del canal de notificación (para dirigirte a dispositivos O+) y envíes el sonido individual desde el panel (para dirigirte a dispositivos <O).