Skip to content

Exemplos avançados de notificações por push

O guia a seguir aborda alguns exemplos avançados de notificações por push para o SDK do Braze.

Pré-requisitos

Antes de usar este recurso, você precisará integrar o SDK Android Braze. Você também precisará configurar notificações por push.

Layout de notificação personalizado

As notificações do Braze são enviadas como mensagens de dados, o que significa que seu aplicativo sempre terá a chance de responder e executar o comportamento de acordo, mesmo em segundo plano (em contraste com as mensagens de notificação, que podem ser tratadas automaticamente pelo sistema quando seu app está em segundo plano). Dessa forma, seu aplicativo terá a chance de personalizar a experiência, por exemplo, exibindo elementos personalizados da interface do usuário na notificação entregue na bandeja de notificações. Embora a implementação do push dessa maneira possa não ser familiar para alguns, um de nossos recursos bem conhecidos no Braze, o Push Stories, é um excelente exemplo do uso de componentes de exibição personalizados para criar uma experiência envolvente!

Você pode usar a interface IBrazeNotificationFactory para personalizar como as notificações por push do Braze são exibidas. Ao estender o site BrazeNotificationFactory, o Braze chamará o método createNotification() de sua fábrica antes que a notificação seja exibida ao usuário. Em seguida, ele passará uma carga útil contendo pares de chave-valor personalizados enviados pelo dashboard do Braze ou pela API REST.

Nesta seção, você fará parceria com a Superb Owl, a apresentadora de um novo game show em que equipes de resgate de animais selvagens competem para ver quem consegue salvar mais corujas. Eles querem aproveitar as notificações de atualização ao vivo em seu app para Android, para que possam exibir o status de uma partida em andamento e fazer atualizações dinâmicas na notificação em tempo real.

A atualização ao vivo que a Superb Owl quer mostrar exibe uma partida em andamento entre "Wild Bird Fund" e "Owl Rescue". No momento, estamos no quarto período e o placar está em 2 a 4, com a OWL na liderança.

Etapa 1: Adicionar um layout personalizado

Você pode adicionar um ou mais layouts RemoteView de notificação personalizados ao seu projeto. São úteis para lidar com a forma como as notificações são exibidas quando recolhidas ou expandidas. Sua estrutura de diretórios deve ser semelhante à seguinte:

1
2
3
4
5
6

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

Em cada arquivo XML, crie um layout personalizado. A Superb Owl criou os seguintes layouts para seus layouts RemoteView recolhidos e 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>
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>

Etapa 2: Criar uma fábrica de notificações personalizada

Em seu aplicativo, crie um novo arquivo chamado MyCustomNotificationFactory.kt que estende BrazeNotificationFactory para manipular como os layouts personalizados do RemoteView são exibidos.

No exemplo a seguir, o Superb Owl criou uma fábrica de notificações personalizada para exibir um layout RemoteView para partidas em andamento. Na próxima etapa, eles criarão um novo método chamado getTeamInfo para mapear os dados de uma equipe para a atividade.

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)
        }
    }
}

Etapa 3: Mapear dados personalizados

Em MyCustomNotificationFactory.kt, crie um novo método para tratar os dados quando as atualizações ao vivo forem exibidas.

A Superb Owl criou o seguinte método para mapear o nome e o logotipo de cada equipe para as atualizações ao 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)
        }
    }
}

Etapa 4: Definir a fábrica de notificações personalizadas

Em sua classe de aplicativo, use customBrazeNotificationFactorypara definir sua fábrica de notificações 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()
    }
}

Etapa 5: Enviar a atividade

Você pode usar o endpoint /messages/send REST API para enviar uma notificação por push para o dispositivo Android de um usuário.

Exemplo de comando curl

A Superb Owl enviou sua solicitação usando o seguinte 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 solicitação

Etapa 6: Atualizar a atividade

Para atualizar a notificação existente do RemoteView com novos dados, modifique os pares de valores-chave relevantes atribuídos a messages.extra e, em seguida, use o mesmo notification_id e chame novamente o endpoint /messages/send.

Notificações por push personalizadas

As notificações por push podem exibir informações específicas do usuário dentro de uma hierarquia de visualização personalizada. No exemplo a seguir, um disparador de API é usado para enviar notificações por push personalizadas a um usuário para que ele possa verificar seu progresso atual depois de concluir uma tarefa específica no app.

Exemplo de dashboard push personalizado

Para configurar um push personalizado no dashboard, registre a categoria específica que deseja exibir e, em seguida, defina quaisquer atribuições de usuário relevantes que gostaria de exibir usando o Liquid.

Exemplo de dashboard push personalizado

Pré-requisitos

Antes de poder usar esse recurso, você precisará integrar o Swift Braze SDK. Você também precisará configurar notificações por push.

Extensões de app de conteúdo de notificação

Duas mensagens push mostradas lado a lado. A mensagem à esquerda mostra a aparência de um push com a UI padrão. A mensagem à direita mostra um push de cartão perfurado de café feito com a implementação de uma UI de push personalizada.

As extensões de app de conteúdo de notificação oferecem uma ótima opção para a personalização de notificações por push. As extensões de aplicativo de conteúdo de notificação exibem uma interface personalizada para as notificações do seu app quando uma notificação por push é expandida.

As notificações por push podem ser expandidas de três maneiras diferentes:

  • Pressione longamente o banner de push
  • Deslizar para baixo no banner push
  • Deslize o banner para a esquerda e selecione “Exibir”

Essas visualizações personalizadas oferecem maneiras inteligentes de engajamento com os clientes, exibindo tipos distintos de conteúdo, incluindo notificações interativas, notificações preenchidas com dados de usuários e até mesmo notificações por push que podem capturar informações como números de telefone e e-mail. Um de nossos recursos mais conhecidos no Braze, o Push Stories, é um excelente exemplo de como pode ser uma extensão de aplicativo de conteúdo de notificação por push!

Solicitações

  • Notificações por push integradas com sucesso em seu app
  • Os seguintes arquivos gerados pelo Xcode com base em sua linguagem de codificação:

Rápido

  • NotificationViewController.swift
  • MainInterface.storyboard

Objective C

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

Notificações por push interativas

As notificações por push podem responder às ações do usuário dentro de uma extensão de app de conteúdo. Para usuários que executam o iOS 12 ou posterior, isso significa que você pode transformar suas notificações por push em mensagens totalmente interativas! Isso oferece uma opção interessante para introduzir interatividade em suas promoções e aplicativos. Por exemplo, sua notificação por push pode incluir um jogo para os usuários jogarem, uma roda para ganhar descontos ou um botão “curtir” para salvar uma listagem ou música.

O exemplo a seguir mostra uma notificação por push em que os usuários podem jogar uma partida dentro da notificação expandida.

Um diagrama de como poderiam ser as fases de uma notificação por push interativa. Uma sequência mostra um usuário pressionando uma notificação por push que exibe um jogo de correspondência interativo.

Configuração do dashboard

Para criar uma notificação por push interativa, você deve definir uma exibição personalizada em seu dashboard.

  1. Na página Campanhas, clique em Criar campanha para iniciar uma nova campanha de notificação por push.
  2. Na guia Criar, ative os botões de notificação.
  3. Digite uma categoria personalizada do iOS no campo Categoria de notificação do iOS.
  4. No endereço .plist de seu Notification Content Extension Target, defina o atributo UNNotificationExtensionCategory para sua categoria personalizada do iOS. O valor fornecido aqui deve corresponder ao que está definido no dashboard do Braze em iOS Notification Category (Categoria de notificação do iOS).
  5. Defina a chave UNNotificationExtensionInteractionEnabled como true para ativar as interações do usuário em uma notificação por push.

As opções do botão de notificação encontradas nas configurações do criador de mensagens push.

Notificações por push personalizadas

Dois iPhones exibidos lado a lado. O primeiro iPhone mostra a exibição não expandida da mensagem push. O segundo iPhone mostra a versão expandida da mensagem push, exibindo uma foto do "progresso" do curso, o nome da próxima sessão e quando a próxima sessão deverá ser concluída.

As notificações por push podem exibir informações específicas do usuário dentro de uma extensão de conteúdo. Isso permite criar conteúdo push focado no usuário, como adicionar a opção de compartilhar seu progresso em diferentes plataformas, mostrar conquistas desbloqueadas ou exibir listas de verificação de integração. Este exemplo mostra uma notificação por push exibida a um usuário após ele ter concluído uma tarefa específica no curso do Braze Learning. Ao expandir a notificação, o usuário pode ver seu progresso na jornada de aprendizagem. As informações fornecidas aqui são específicas do usuário e podem ser disparadas quando uma sessão é concluída ou quando uma ação específica do usuário é realizada, aproveitando um acionador da API.

Configuração do dashboard

Para criar uma notificação por push personalizada, você deve definir uma exibição personalizada em seu dashboard.

  1. Na página Campanhas, clique em Criar campanha para iniciar uma nova campanha de notificação por push.
  2. Na guia Criar, ative os botões de notificação.
  3. Digite uma categoria personalizada do iOS no campo Categoria de notificação do iOS.
  4. Na guia Settings (Configurações ), crie pares de valores-chave usando o Liquid padrão. Defina as atribuições de usuário apropriadas que deseja que a mensagem mostre. Essas visualizações podem ser personalizadas com base em atribuições específicas de um perfil de usuário específico.
  5. No endereço .plist de seu Notification Content Extension Target, defina o atributo UNNotificationExtensionCategory para sua categoria personalizada do iOS. O valor fornecido aqui deve corresponder ao que está definido no dashboard do Braze em iOS Notification Category (Categoria de notificação do iOS).

Quatro conjuntos de pares chave-valor, onde "next_session_name" e "next_session_complete_date" são definidos como uma propriedade de disparo da API usando Liquid, e "completed_session contagem" e "total_session_count" são definidos como um atributo de usuário personalizado usando Liquid.

Manuseio de pares de valores-chave

O método didReceive é chamado quando a extensão do app de conteúdo de notificação recebe uma notificação. Esse método pode ser encontrado no site NotificationViewController. Os pares de valores-chave fornecidos no dashboard são representados no código por meio do uso de um dicionário userInfo.

Analisando pares de chave-valor de notificações por 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"];
  }
}

Notificação por push de captura de informações

As notificações por push podem capturar informações do usuário dentro de uma extensão de app de conteúdo, empurrando os limites do que é possível com um push. Solicitar a entrada do usuário por meio de notificações por push permite não apenas solicitar informações básicas, como nome ou e-mail, mas também solicitar que os usuários enviem feedback ou completem um perfil de usuário inacabado.

No fluxo a seguir, a exibição personalizada é capaz de responder a alterações de estado. Esses componentes de alteração de estado são representados em cada imagem.

  1. O usuário recebe uma notificação por push.
  2. O push é aberto. Depois de expandido, o push solicita informações ao usuário. Neste exemplo, o endereço de e-mail do usuário é solicitado, mas você pode solicitar qualquer tipo de informação.
  3. As informações são fornecidas e, se estiverem no formato esperado, o botão de registro é exibido.
  4. A visualização de confirmação é exibida e o push é dispensado.

Configuração do dashboard

Para criar uma notificação por push de captura de informações, você deve definir uma exibição personalizada em seu dashboard.

  1. Na página Campanhas, clique em Criar campanha para iniciar uma nova campanha de notificação por push.
  2. Na guia Criar, ative os botões de notificação.
  3. Digite uma categoria personalizada do iOS no campo Categoria de notificação do iOS.
  4. Na guia Settings (Configurações ), crie pares de valores-chave usando o Liquid padrão. Defina as atribuições de usuário apropriadas que deseja que a mensagem mostre.
  5. No endereço .plist de seu Notification Content Extension Target, defina o atributo UNNotificationExtensionCategory para sua categoria personalizada do iOS. O valor fornecido aqui deve corresponder ao que está definido no dashboard do Braze em iOS Notification Category (Categoria de notificação do iOS).

Como visto no exemplo, você também pode incluir uma imagem em sua notificação por push. Para isso, você deve integrar notificações ricas, definir o estilo de notificação em sua campanha como Notificação Rich e incluir uma imagem de notificação por push rica.

Uma mensagem push com três conjuntos de pares de valores-chave. 1. "Braze_id" definido como uma chamada Liquid para recuperar o ID do Braze. 2. "cert_title" definido como "Certificação de Profissional de Marketing Braze". 3. "Cert_description" definido como "Profissionais de marketing certificados do Braze impulsionam...".

Manipulação de ações de botões

Cada botão de ação é identificado de forma exclusiva. O código verifica se o identificador da resposta é igual a actionIndentifier e, em caso afirmativo, sabe que o usuário clicou no botão de ação.

Manipulação de respostas de botões de ação por 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);
  }
}

Dispensa de push

As notificações por push podem ser automaticamente descartadas a partir do pressionamento de um botão de ação. Há três opções pré-construídas de push dismissal que recomendamos:

  1. completion(.dismiss) - Descarta a notificação
  2. completion(.doNotDismiss) - A notificação permanece aberta
  3. completion(.dismissAndForward) - O push é descartado e o usuário é encaminhado para o aplicativo
Github   Editar esta página no GitHub
New Stuff!