Skip to content

Ejemplos avanzados de notificaciones push

La siguiente guía incluye algunos ejemplos avanzados de notificaciones push para el SDK de Braze.

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.

Diseño de notificación personalizado

Las notificaciones de Braze se envían como mensajes de datos, lo que significa que tu aplicación siempre tendrá la oportunidad de responder y realizar un comportamiento acorde, incluso en segundo plano (a diferencia de los mensajes de notificación, que pueden ser gestionados automáticamente por el sistema cuando tu aplicación está en segundo plano). Como tal, tu aplicación tendrá la oportunidad de personalizar la experiencia, por ejemplo, mostrando elementos de interfaz de usuario personalizados dentro de la notificación entregada en la bandeja de notificaciones. Aunque implementar el push de esta forma puede resultar desconocido para algunos, una de nuestras características más conocidas en Braze, Push Stories, ¡son un excelente ejemplo del uso de componentes de vista personalizados para crear una experiencia atractiva!

Puedes utilizar la interfaz IBrazeNotificationFactory para personalizar cómo se muestran las notificaciones push de Braze. Al extender BrazeNotificationFactory, Braze llamará al método createNotification() de tu fábrica antes de que la notificación se muestre al usuario. A continuación, pasará una carga útil que contiene pares clave-valor personalizados enviados a través del panel de Braze o la REST API.

En esta sección, te asociarás con Superb Owl, el presentador de un nuevo programa de juegos en el que equipos de rescate de animales salvajes compiten para ver quién salva más búhos. Quieren aprovechar las notificaciones actualizadas en vivo en su aplicación Android, para poder mostrar el estado de un partido en curso y realizar actualizaciones dinámicas de la notificación en tiempo real.

La actualización en vivo que Superb Owl quiere mostrar, con un partido en curso entre "Wild Bird Fund" y "Owl Rescue". Estamos en el último cuarto y el marcador es 2-4, con OWL a la cabeza.

Paso 1: Añadir un diseño personalizado

Puedes añadir uno o varios diseños personalizados de notificación RemoteView a tu proyecto. Son útiles para manejar cómo se muestran las notificaciones cuando se contraen o expanden. Tu estructura de directorios debe ser similar a la siguiente:

1
2
3
4
5
6

.
├── app/
└── res/
    └── layout/
        ├── liveupdate_collapsed.xml
        └── liveupdate_expanded.xml

En cada archivo XML, crea un diseño personalizado. Superb Owl creó los siguientes diseños para sus RemoteView colapsados y expandidos:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>
Mostrar el código de ejemplo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_gravity="center"

        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/team1logo"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:src="@drawable/team_default1"/>

        <TextView
            android:id="@+id/team1name"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1.6"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/score"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="2-4"
            android:textColor="#555555"
            android:textAlignment="center"
            android:textSize="32sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/timeInfo"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/team2logo"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:src="@drawable/team_default2"/>

        <TextView
            android:id="@+id/team2name"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

Paso 2: Crear una fábrica de notificaciones personalizada

En tu aplicación, crea un nuevo archivo llamado MyCustomNotificationFactory.kt que extienda BrazeNotificationFactory para gestionar cómo se muestran los diseños personalizados de RemoteView.

En el siguiente ejemplo, Superb Owl creó una fábrica de notificaciones personalizada para mostrar un diseño RemoteView para los partidos en curso. En el siguiente paso, crearán un nuevo método llamado getTeamInfo para mapear los datos de un equipo a la actividad.

Mostrar el código de ejemplo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

import android.app.Notification
import android.widget.RemoteViews
import androidx.core.app.NotificationCompat
import com.braze.models.push.BrazeNotificationPayload
import com.braze.push.BrazeNotificationFactory
import com.braze.push.BrazeNotificationUtils.getOrCreateNotificationChannelId
import com.braze.support.BrazeLogger.brazelog

class MyCustomNotificationFactory : BrazeNotificationFactory() {
    override fun createNotification(payload: BrazeNotificationPayload): Notification? {
        if (payload.extras.containsKey("live_update")) {
            val kvp = payload.extras
            val notificationChannelId = getOrCreateNotificationChannelId(payload)
            val context = payload.context

            if (context == null) {
                brazelog { "BrazeNotificationPayload has null context. Not creating notification" }
                return null
            }

            val team1 = kvp["team1"]
            val team2 = kvp["team2"]
            val score1 = kvp["score1"]
            val score2 = kvp["score2"]
            val time = kvp["time"]
            val quarter = kvp["quarter"]

            // Superb Owl will define the 'getTeamInfo' method in the next step.
            val (team1name, team1icon) = getTeamInfo(team1)
            val (team2name, team2icon) = getTeamInfo(team2)

            // Get the layouts to use in the custom notification.
            val notificationLayoutCollapsed = RemoteViews(BuildConfig.APPLICATION_ID, R.layout.liveupdate_collapsed)
            val notificationLayoutExpanded = RemoteViews(BuildConfig.APPLICATION_ID, R.layout.liveupdate_expanded)

            // Very simple notification for the small layout
            notificationLayoutCollapsed.setTextViewText(
                R.id.notification_title,
                "$team1 $score1 - $score2 $team2\n$time $quarter"
            )

            notificationLayoutExpanded.setTextViewText(R.id.score, "$score1 - $score2")
            notificationLayoutExpanded.setTextViewText(R.id.team1name, team1name)
            notificationLayoutExpanded.setTextViewText(R.id.team2name, team2name)
            notificationLayoutExpanded.setTextViewText(R.id.timeInfo, "$time - $quarter")
            notificationLayoutExpanded.setImageViewResource(R.id.team1logo, team1icon)
            notificationLayoutExpanded.setImageViewResource(R.id.team2logo, team2icon)

            val customNotification = NotificationCompat.Builder(context, notificationChannelId)
                .setSmallIcon(R.drawable.notification_small_icon)
                .setStyle(NotificationCompat.DecoratedCustomViewStyle())
                .setCustomContentView(notificationLayout)
                .setCustomBigContentView(notificationLayoutExpanded)
                .build()
            return customNotification
        } else {
            // Use the BrazeNotificationFactory for all other notifications
            return super.createNotification(payload)
        }
    }
}

Paso 3: Mapear datos personalizados

En MyCustomNotificationFactory.kt, crea un nuevo método para manejar los datos cuando se muestren las actualizaciones en vivo.

Superb Owl creó el siguiente método para mapear el nombre y el logotipo de cada equipo a las actualizaciones en vivo expandidas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class CustomNotificationFactory : BrazeNotificationFactory() {
    override fun createNotification(payload: BrazeNotificationPayload): Notification? {
        // Your existing code
        return super.createNotification(payload)
    }

    // Your new method
    private fun getTeamInfo(team: String?): Pair<String, Int> {
        return when (team) {
            "WBF" -> Pair("Wild Bird Fund", R.drawable.team_wbf)
            "OWL" -> Pair("Owl Rehab", R.drawable.team_owl)
            else  -> Pair("Unknown", R.drawable.notification_small_icon)
        }
    }
}

Paso 4: Configurar la fábrica de notificaciones personalizada

En tu clase de aplicación, utiliza customBrazeNotificationFactory para configurar tu fábrica de notificaciones personalizada.

1
2
3
4
5
6
7
8
9
10

import com.braze.Braze

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        // Tell Braze to use your custom factory for notifications
        Braze.customBrazeNotificationFactory = MyCustomNotificationFactory()
    }
}

Paso 5: Enviar la actividad

Puedes utilizar el punto de conexión /messages/send de la REST API para enviar una notificación push al dispositivo Android de un usuario.

Ejemplo de comando curl

Superb Owl envió su solicitud utilizando el siguiente comando curl:

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

curl -X POST "https://BRAZE_REST_ENDPOINT/messages/send" \
  -H "Authorization: Bearer {REST_API_KEY}" \
  -H "Content-Type: application/json" \
  --data '{
    "external_user_ids": ["USER_ID"],
    "messages": {
      "android_push": {
        "title": "WBF vs OWL",
        "alert": "2 to 4 1:33 Q4",
        "extra": {
          "live_update": "true",
          "team1": "WBF",
          "team2": "OWL",
          "score1": "2",
          "score2": "4",
          "time": "1:33",
          "quarter": "Q4"
        },
        "notification_id": "ASSIGNED_NOTIFICATION_ID"
      }
    }
  }'

Parámetros de la solicitud

Clave Descripción
REST_API_KEY Una clave de API REST de Braze con permisos messages.send.

Se puede crear en el panel de Braze desde Settings > API Keys.
BRAZE_REST_ENDPOINT La URL de tu punto de conexión REST. Tu punto de conexión dependerá de la URL de Braze de tu instancia.
USER_ID El ID del usuario al que envías la notificación.
messages.android_push.title El título del mensaje. De forma predeterminada, no se utiliza para las notificaciones en vivo de la fábrica de notificaciones personalizada, pero puede utilizarse como alternativa.
messages.android_push.alert El cuerpo del mensaje. De forma predeterminada, no se utiliza para las notificaciones en vivo de la fábrica de notificaciones personalizada, pero puede utilizarse como alternativa.
messages.extra Pares clave-valor que la fábrica de notificaciones personalizada utiliza para las notificaciones en vivo. Puedes asignar cualquier cadena a este valor—sin embargo, en el ejemplo anterior, se utiliza live_updates para determinar si se trata de una notificación push predeterminada o en vivo.
ASSIGNED_NOTIFICATION_ID El ID de notificación que quieres asignar a la notificación en vivo del usuario elegido. El ID debe ser único para este juego, y debe utilizarse para actualizar su notificación existente posteriormente.

Paso 6: Actualizar la actividad

Para actualizar la notificación RemoteView existente con nuevos datos, modifica los pares clave-valor correspondientes asignados a messages.extra, luego utiliza el mismo notification_id y vuelve a llamar al punto de conexión /messages/send.

Notificaciones push personalizadas

Las notificaciones push pueden mostrar información específica del usuario dentro de una jerarquía de vistas personalizada. En el siguiente ejemplo, se utiliza un desencadenador de API para enviar una notificación push personalizada a un usuario para que pueda comprobar su progreso actual tras completar una tarea específica en la aplicación.

Ejemplo de push personalizado en el dashboard

Para configurar un push personalizado en el dashboard, registra la categoría específica que quieres que se muestre y, a continuación, establece los atributos de usuario relevantes que te gustaría mostrar utilizando Liquid.

Ejemplo de configuración de push personalizado en el dashboard

Requisitos previos

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

Extensiones de la aplicación de contenido de notificación

Dos mensajes push mostrados uno al lado del otro. El mensaje de la izquierda muestra el aspecto de un push con la interfaz predeterminada. El mensaje de la derecha muestra un push de una tarjeta perforada de café realizado mediante la implementación de una interfaz de usuario push personalizada.

Las extensiones de la aplicación de contenido de notificación te ofrecen una gran opción para personalizar las notificaciones push. Las extensiones de aplicación de contenido de notificación muestran una interfaz personalizada para las notificaciones de tu aplicación cuando se expande una notificación push.

Las notificaciones push se pueden ampliar de tres formas distintas:

  • Una pulsación larga en el banner push
  • Deslizar hacia abajo el banner push
  • Deslizar el banner hacia la izquierda y seleccionar “Ver”

Estas vistas personalizadas ofrecen formas inteligentes de interactuar con los clientes mostrando distintos tipos de contenido, como notificaciones interactivas, notificaciones rellenadas con datos de usuario e incluso mensajes push que pueden capturar información como números de teléfono y correo electrónico. Una de nuestras características más conocidas en Braze, Push Stories, es un excelente ejemplo de cómo puede ser una extensión de aplicación de contenido de notificación push.

Requisitos

  • Notificaciones push integradas con éxito en tu aplicación
  • Los siguientes archivos generados por Xcode en función de tu lenguaje de codificación:

Swift

  • NotificationViewController.swift
  • MainInterface.storyboard

Objective-C

  • NotificationViewController.h
  • NotificationViewController.m
  • MainInterface.storyboard

Notificación push interactiva

Las notificaciones push pueden responder a acciones del usuario dentro de una extensión de aplicación de contenido. Para los usuarios con iOS 12 o posterior, esto significa que puedes convertir tus notificaciones push en mensajes totalmente interactivos. Esto proporciona una opción interesante para introducir interactividad en tus promociones y aplicaciones. Por ejemplo, tu notificación push puede incluir un juego para que jueguen los usuarios, una ruleta para ganar descuentos o un botón “me gusta” para guardar un anuncio o una canción.

El siguiente ejemplo muestra una notificación push en la que los usuarios pueden jugar a un juego de correspondencias dentro de la notificación expandida.

Un diagrama de cómo podrían ser las fases de una notificación push interactiva. Una secuencia muestra a un usuario pulsando en una notificación push que muestra un juego de correspondencias interactivo.

Configuración del dashboard

Para crear una notificación push interactiva, debes establecer una vista personalizada en tu dashboard.

  1. En la página Campaigns, haz clic en Create Campaign para iniciar una nueva campaña de notificaciones push.
  2. En la pestaña Compose, activa Notification Buttons.
  3. Introduce una categoría iOS personalizada en el campo iOS Notification Category.
  4. En el .plist de tu objetivo de extensión de contenido de notificación, establece el atributo UNNotificationExtensionCategory en tu categoría personalizada de iOS. El valor proporcionado aquí debe coincidir con lo establecido en el panel de Braze en iOS Notification Category.
  5. Establece la clave UNNotificationExtensionInteractionEnabled en true para habilitar las interacciones del usuario en una notificación push.

Las opciones del botón de notificación que se encuentran en la configuración del creador de mensajes push.

Notificaciones push personalizadas

Dos iPhones mostrados uno al lado del otro. El primer iPhone muestra la vista no expandida del mensaje push. El segundo iPhone muestra la versión expandida del mensaje push mostrando una imagen del "progreso" que llevan en un curso, el nombre de la siguiente sesión y cuándo debe completarse.

Las notificaciones push pueden mostrar información específica del usuario dentro de una extensión de contenido. Esto te permite crear contenido push centrado en el usuario, como añadir la opción de compartir tu progreso en distintas plataformas, mostrar logros desbloqueados o mostrar listas de control de incorporación. Este ejemplo muestra una notificación push mostrada a un usuario después de que haya completado una tarea específica en el curso de Braze Learning. Al expandir la notificación, el usuario puede ver su progreso a través de su ruta de aprendizaje. La información proporcionada aquí es específica del usuario y puede dispararse cuando se completa una sesión o se realiza una acción específica del usuario aprovechando un desencadenante de la API.

Configuración del dashboard

Para crear una notificación push personalizada, debes establecer una vista personalizada en tu dashboard.

  1. En la página Campaigns, haz clic en Create Campaign para iniciar una nueva campaña de notificaciones push.
  2. En la pestaña Compose, activa Notification Buttons.
  3. Introduce una categoría iOS personalizada en el campo iOS Notification Category.
  4. En la pestaña Settings, crea pares clave-valor utilizando Liquid estándar. Configura los atributos de usuario adecuados que quieres que muestre el mensaje. Estas vistas pueden personalizarse en función de atributos específicos de un perfil de usuario concreto.
  5. En el .plist de tu objetivo de extensión de contenido de notificación, establece el atributo UNNotificationExtensionCategory en tu categoría personalizada de iOS. El valor proporcionado aquí debe coincidir con lo establecido en el panel de Braze en iOS Notification Category.

Cuatro conjuntos de pares clave-valor, en los que "next_session_name" y "next_session_complete_date" se configuran como una propiedad desencadenante de la API mediante Liquid, y "completed_session count" y "total_session_count" se configuran como un atributo personalizado del usuario mediante Liquid.

Manejo de pares clave-valor

Se llama al método didReceive cuando la extensión de la aplicación de contenido de notificación ha recibido una notificación. Este método se encuentra en NotificationViewController. Los pares clave-valor proporcionados en el dashboard se representan en el código mediante el uso de un diccionario userInfo.

Análisis sintáctico de los pares clave-valor de las notificaciones push

1
2
3
4
5
6
7
8
9

func didReceive(_ notification: UNNotification) {
  let userInfo = notification.request.content.userInfo

  guard let value = userInfo["YOUR-KEY-VALUE-PAIR"] as? String,
        let otherValue = userInfo["YOUR-OTHER-KEY-VALUE-PAIR"] as? String,
  else { fatalError("Key-Value Pairs are incorrect.")}

  ...
}

1
2
3
4
5
6
7
8
9
10
11

- (void)didReceiveNotification:(nonnull UNNotification *)notification {
  NSDictionary *userInfo = notification.request.content.userInfo;

  if (userInfo[@"YOUR-KEY-VALUE-PAIR"] && userInfo[@"YOUR-OTHER-KEY-VALUE-PAIR"]) {

  ...

  } else {
    [NSException raise:NSGenericException format:@"Key-Value Pairs are incorrect"];
  }
}

Notificación push de captura de información

Las notificaciones push pueden capturar información del usuario dentro de una extensión de aplicación de contenido, ampliando los límites de lo que es posible con un push. Solicitar la entrada del usuario a través de notificaciones push te permite no solo solicitar información básica como el nombre o el correo electrónico, sino también pedir a los usuarios que envíen comentarios o completen un perfil de usuario inacabado.

En el siguiente flujo, la vista personalizada es capaz de responder a los cambios de estado. Esos componentes de cambio de estado están representados en cada imagen.

  1. El usuario recibe una notificación push.
  2. Se abre el push. Una vez expandido, el push solicita información al usuario. En este ejemplo, se solicita la dirección de correo electrónico del usuario, pero podrías solicitar cualquier tipo de información.
  3. Se proporciona la información y, si está en el formato esperado, se muestra el botón de registro.
  4. Se muestra la vista de confirmación y se descarta la notificación push.

Configuración del dashboard

Para crear una notificación push de captura de información, debes establecer una vista personalizada en tu dashboard.

  1. En la página Campaigns, haz clic en Create Campaign para iniciar una nueva campaña de notificaciones push.
  2. En la pestaña Compose, activa Notification Buttons.
  3. Introduce una categoría iOS personalizada en el campo iOS Notification Category.
  4. En la pestaña Settings, crea pares clave-valor utilizando Liquid estándar. Configura los atributos de usuario adecuados que quieres que muestre el mensaje.
  5. En el .plist de tu objetivo de extensión de contenido de notificación, establece el atributo UNNotificationExtensionCategory en tu categoría personalizada de iOS. El valor proporcionado aquí debe coincidir con lo establecido en el panel de Braze en iOS Notification Category.

Como se ve en el ejemplo, también puedes incluir una imagen en tu notificación push. Para ello, debes integrar notificaciones enriquecidas, establecer el estilo de notificación de tu campaña en notificación enriquecida e incluir una imagen de notificación push enriquecida.

Un mensaje push con tres conjuntos de pares clave-valor. 1. "Braze_id" configurado como llamada Liquid para recuperar el ID de Braze. 2. "cert_title" configurado como "Braze Marketer Certification". 3. "Cert_description" configurado como "Certified Braze marketers drive...".

Manejar las acciones de los botones

Cada botón de acción tiene un identificador único. El código comprueba si tu identificador de respuesta es igual al actionIdentifier, y si es así, sabe que el usuario hizo clic en el botón de acción.

Manejar las respuestas del botón de acción de notificaciones push

1
2
3
4
5
6
7

func didReceive(_ response: UNNotificationResponse, completionHandler completion: @escaping (UNNotificationContentExtensionResponseOption) -> Void) {
  if response.actionIdentifier == "YOUR-REGISTER-IDENTIFIER" {
    // do something
  } else {
    // do something else
  }
}

1
2
3
4
5
6
7

- (void)didReceiveNotificationResponse:(UNNotificationResponse *)response completionHandler:(void (^)(UNNotificationContentExtensionResponseOption))completion {
  if ([response.actionIdentifier isEqualToString:@"YOUR-REGISTER-IDENTIFIER"]) {
    completion(UNNotificationContentExtensionResponseOptionDismiss);
  } else {
    completion(UNNotificationContentExtensionResponseOptionDoNotDismiss);
  }
}

Descartar notificaciones push

Las notificaciones push pueden descartarse automáticamente al pulsar un botón de acción. Hay tres opciones predefinidas de descarte push que recomendamos:

  1. completion(.dismiss) - Descarta la notificación
  2. completion(.doNotDismiss) - La notificación permanece abierta
  3. completion(.dismissAndForward) - Se descarta el push y el usuario es redirigido a la aplicación
New Stuff!