Skip to content

Exemplos avançados de notificações por push

O guia a seguir cobre alguns exemplos avançados de notificações por push para o SDK da 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 da Braze são enviadas como mensagens de dados, o que significa que seu aplicativo sempre terá a chance de responder e executar o comportamento adequado, mesmo em segundo plano (diferentemente das 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 de interface dentro da notificação entregue na bandeja de notificações. Embora implementar push dessa maneira possa não ser familiar para alguns, um de nossos recursos mais conhecidos na Braze, o Push Stories, é um excelente exemplo do uso de componentes de visualização personalizados para criar uma experiência envolvente!

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

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 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. Eles são úteis para controlar 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>
Mostrar o código de exemplo
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 controlar como os layouts personalizados do RemoteView são exibidos.

No exemplo a seguir, a 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.

Mostrar o código de exemplo
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 personalizada

Em sua classe de aplicativo, use customBrazeNotificationFactory para 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 da 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

Chave Descrição
REST_API_KEY Uma chave da API REST da Braze com permissões messages.send.

Isso pode ser criado no dashboard da Braze em Configurações > Chaves de API.
BRAZE_REST_ENDPOINT Sua URL de endpoint REST. Seu endpoint dependerá da URL da Braze para sua instância.
USER_ID O ID do usuário para o qual você está enviando a notificação.
messages.android_push.title O título da mensagem. Por padrão, isso não é usado para as notificações ao vivo da fábrica de notificações personalizada, mas pode ser usado como fallback.
messages.android_push.alert O corpo da mensagem. Por padrão, isso não é usado para as notificações ao vivo da fábrica de notificações personalizada, mas pode ser usado como fallback.
messages.extra Pares de chave-valor que a fábrica de notificações personalizada usa para notificações ao vivo. Você pode atribuir qualquer string a esse valor—no entanto, no exemplo acima, live_updates é usado para determinar se é uma notificação por push padrão ou ao vivo.
ASSIGNED_NOTIFICATION_ID O ID de notificação que você deseja atribuir à notificação ao vivo do usuário escolhido. O ID deve ser exclusivo para esse jogo e deve ser usado para atualizar a notificação existente posteriormente.

Etapa 6: Atualizar a atividade

Para atualizar a notificação existente do RemoteView com novos dados, modifique os pares de chave-valor 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 gatilho de API é usado para enviar uma notificação por push personalizada a um usuário para que ele possa verificar seu progresso atual depois de concluir uma tarefa específica no app.

Exemplo de push personalizado no dashboard

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

Exemplo de push personalizado no dashboard

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 fidelidade 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 personalizar notificações por push. Elas 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:

  • Pressionando longamente o banner de push
  • Deslizando para baixo no banner de push
  • Deslizando o banner para a esquerda e selecionando “View”

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

Pré-requisitos

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

Swift

  • NotificationViewController.swift
  • MainInterface.storyboard

Objective-C

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

Notificações por push interativas

As notificações por push podem responder a ações do usuário dentro de uma extensão de app de conteúdo. Para usuários com iOS 12 ou posterior, isso significa que você pode transformar suas notificações por push em mensagens totalmente interativas! Essa é uma opção empolgante para introduzir interatividade nas suas promoções e aplicativos. Por exemplo, sua notificação por push pode incluir um jogo para os usuários jogarem, uma roleta de descontos ou um botão “curtir” para salvar um anúncio ou música.

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

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

Configuração do dashboard

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

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

As opções de 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 visualizaçã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 deve 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 checklists 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, utilizando um gatilho de API.

Configuração do dashboard

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

  1. Na página Campaigns, clique em Create Campaign para iniciar uma nova campanha de notificação por push.
  2. Na guia Compose, ative os Notification Buttons.
  3. Insira uma categoria personalizada do iOS no campo iOS Notification Category.
  4. Na guia Settings, crie pares de chave-valor usando Liquid padrão. Defina os atributos de usuário apropriados que deseja que a mensagem exiba. Essas visualizações podem ser personalizadas com base em atributos específicos de um perfil de usuário específico.
  5. No .plist do seu Notification Content Extension Target, defina o atributo UNNotificationExtensionCategory para a sua categoria personalizada do iOS. O valor fornecido aqui deve corresponder ao que está definido no dashboard da Braze em iOS Notification Category.

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

Manipulação de pares de chave-valor

O método didReceive é chamado quando a extensão de app de conteúdo de notificação recebe uma notificação. Esse método pode ser encontrado no NotificationViewController. Os pares de chave-valor fornecidos no dashboard são representados no código por meio 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, expandindo os limites do que é possível com um push. Solicitar entrada do usuário por meio de notificações por push permite não apenas pedir 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 visualização personalizada é capaz de responder a mudanças de estado. Esses componentes de mudança 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 visualização personalizada no seu dashboard.

  1. Na página Campaigns, clique em Create Campaign para iniciar uma nova campanha de notificação por push.
  2. Na guia Compose, ative os Notification Buttons.
  3. Insira uma categoria personalizada do iOS no campo iOS Notification Category.
  4. Na guia Settings, crie pares de chave-valor usando Liquid padrão. Defina os atributos de usuário apropriados que deseja que a mensagem exiba.
  5. No .plist do seu Notification Content Extension Target, defina o atributo UNNotificationExtensionCategory para a sua categoria personalizada do iOS. O valor fornecido aqui deve corresponder ao que está definido no dashboard da Braze em iOS Notification Category.

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

Uma mensagem push com três conjuntos de pares de chave-valor. 1. "Braze_id" definido como uma chamada Liquid para recuperar o ID da Braze. 2. "cert_title" definido como "Braze Marketer Certification". 3. "Cert_description" definido como "Certified Braze marketers drive...".

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 ao actionIdentifier 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 de notificaçã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);
  }
}

Dispensando pushes

As notificações por push podem ser automaticamente dispensadas ao pressionar um botão de ação. Existem três opções pré-construídas de dispensa de push que recomendamos:

  1. completion(.dismiss) - Dispensa a notificação
  2. completion(.doNotDismiss) - A notificação permanece aberta
  3. completion(.dismissAndForward) - O push é dispensado e o usuário é encaminhado para o aplicativo
New Stuff!