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 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, las historias push, ¡son un excelente ejemplo del uso de componentes de vista personalizados para crear una experiencia atractiva!

Puedes utilizar la interfaz IBrazeNotificationFactory interfaz para personalizar cómo se muestran las notificaciones push de Braze. Al ampliar 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 Braze o la API REST.

En esta sección, te asociarás con Búho Soberbio, 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 el Búho Soberbio quiere mostrar, muestra 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 diseños colapsados y expandidos de RemoteView:

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>
Show the sample code
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.

Show the sample code
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 ha creado el siguiente método para mapear el nombre y el logotipo de cada equipo con Actualizaciones en vivo ampliadas:

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: Configura la fábrica de notificaciones personalizada

En tu clase de aplicación, utiliza customBrazeNotificationFactorypara 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: Envía la actividad

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

Ejemplo de comando curl

El Búho Soberbio envió su petición 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

Paso 6: Actualiza la actividad

Para actualizar la notificación existente de RemoteView con nuevos datos, modifica los correspondientes pares clave-valor asignados a messages.extra, luego utiliza el mismo notification_id y vuelve a llamar al punto final /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 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 panel push personalizado

Para configurar un push personalizado en el panel, 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 panel push personalizado

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 notificaciones 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, las Historias push, ¡son 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 una aplicación de contenidos. 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 partido 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 panel de control

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

  1. En la página Campañas, haz clic en Crear campaña para iniciar una nueva campaña de notificaciones push.
  2. En la pestaña Redactar, alterna los botones de notificación.
  3. Introduce una categoría iOS personalizada en el campo Categoría de notificación iOS.
  4. En la página .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 dado aquí debe coincidir con lo establecido en el panel de Braze en Categoría de notificación de iOS.
  5. Configura la tecla 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 ampliada del mensaje push. El segundo iPhone muestra la versión ampliada del mensaje push mostrando una imagen del "progreso" que lograron 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 su progreso en distintas plataformas, mostrar los 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 ampliar la notificación, el usuario puede ver su progreso a través de su ruta de aprendizaje. La información que se proporciona 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 panel de control

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

  1. En la página Campañas, haz clic en Crear campaña para iniciar una nueva campaña de notificaciones push.
  2. En la pestaña Redactar, alterna los botones de notificación.
  3. Introduce una categoría iOS personalizada en el campo Categoría de notificación iOS.
  4. En la pestaña Configuración, crea pares clave-valor utilizando el estándar Liquid. Configura los atributos de usuario adecuados que quieres que muestre el mensaje. Estas vistas pueden personalizarse en función de atributos específicos de usuario de un perfil de usuario concreto.
  5. En la página .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 dado aquí debe coincidir con lo establecido en el panel de Braze en Categoría de notificación de iOS.

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 notificaciones ha recibido una notificación. Este método se encuentra en NotificationViewController. Los pares clave-valor proporcionados en el panel 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"];
  }
}

Captura de información de notificaciones push

Las notificaciones push pueden capturar información del usuario dentro de una extensión de una aplicación de contenido, ampliando los límites de lo que es posible con un push. Solicitar la opinión del usuario a través de notificaciones push te permite no sólo solicitar información básica como el nombre o el correo electrónico, sino también pedir a los usuarios que envíen sus 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 del 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 pide 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 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 panel de control

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

  1. En la página Campañas, haz clic en Crear campaña para iniciar una nueva campaña de notificaciones push.
  2. En la pestaña Redactar, alterna los botones de notificación.
  3. Introduce una categoría iOS personalizada en el campo Categoría de notificación iOS.
  4. En la pestaña Configuración, crea pares clave-valor utilizando el estándar Liquid. Configura los atributos de usuario adecuados que quieres que muestre el mensaje.
  5. En la página .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 dado aquí debe coincidir con lo establecido en el panel de Braze en Categoría de notificación de iOS.

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 push enriquecida.

Un mensaje push con tres conjuntos de pares clave-valor. 1. "Braze_id" configurar como llamada Liquid para recuperar el ID de Braze. 2. "cert_title" configurado como "Certificado de especialista en marketing de Braze". 3. "Cert_description" configurado como "Los especialistas en marketing certificados de Braze conducen...".

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 a actionIndentifier, y si es así, sabe que el usuario ha hecho clic en el botón de acción.

Manejar las respuestas del botón de acción para notificación 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);
  }
}

Desestimar las notificaciones push

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

  1. completion(.dismiss) - Desestima la notificación
  2. completion(.doNotDismiss) - La notificación permanece abierta
  3. completion(.dismissAndForward) - Se expulsa el push y el usuario es redirigido a la aplicación
Github   Editar esta página en GitHub
New Stuff!