Skip to content

Exemples de notifications push avancées

Le guide suivant couvre quelques exemples de notifications push avancées pour le SDK de Braze.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Android Braze. Vous devrez également configurer les notifications push.

Disposition personnalisée des notifications

Les notifications de Braze sont envoyées sous forme de messages de données, ce qui signifie que votre application aura toujours la possibilité de répondre et d’adapter son comportement en conséquence, même en arrière-plan (contrairement aux messages de notification, qui peuvent être traités automatiquement par le système lorsque votre application est en arrière-plan). Votre application pourra ainsi personnaliser l’expérience, par exemple en affichant des éléments d’interface personnalisés dans la notification envoyée à la barre de notification. Bien que cette approche de l’implémentation push puisse sembler inhabituelle, l’une de nos fonctionnalités phares chez Braze, Push Stories, est un excellent exemple d’utilisation de composants de vue personnalisés pour créer une expérience engageante !

Vous pouvez utiliser l’interface IBrazeNotificationFactory pour personnaliser l’affichage des notifications push de Braze. En étendant BrazeNotificationFactory, Braze appellera la méthode createNotification() de votre fabrique avant que la notification ne soit affichée à l’utilisateur. Il transmettra ensuite un payload contenant des paires clé-valeur personnalisées envoyées via le tableau de bord de Braze ou la REST API.

Dans cette section, vous collaborerez avec Superb Owl, l’animateur d’un nouveau jeu télévisé dans lequel des équipes de sauvetage d’animaux sauvages s’affrontent pour déterminer qui peut sauver le plus grand nombre de hiboux. Ils souhaitent exploiter les notifications de mise à jour en direct dans leur application Android, afin d’afficher le statut d’un match en cours et d’effectuer des mises à jour dynamiques de la notification en temps réel.

La mise à jour en direct que Superb Owl souhaite afficher, montrant un match en cours entre « Wild Bird Fund » et « Owl Rescue ». C'est le quatrième quart-temps et le score est de 2-4 avec OWL en tête.

Étape 1 : Ajouter une disposition personnalisée

Vous pouvez ajouter une ou plusieurs dispositions RemoteView de notification personnalisées à votre projet. Elles sont utiles pour gérer l’affichage des notifications lorsqu’elles sont réduites ou développées. La structure de votre répertoire devrait ressembler à ce qui suit :

1
2
3
4
5
6

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

Dans chaque fichier XML, créez une disposition personnalisée. Superb Owl a créé les dispositions suivantes pour ses vues RemoteView réduites et développées :

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>
Afficher l’exemple de 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>

Étape 2 : Créer une fabrique de notifications personnalisée

Dans votre application, créez un nouveau fichier nommé MyCustomNotificationFactory.kt qui étend BrazeNotificationFactory pour gérer l’affichage des dispositions RemoteView personnalisées.

Dans l’exemple suivant, Superb Owl a créé une fabrique de notifications personnalisée pour afficher une disposition RemoteView pour les matchs en cours. À l’étape suivante, une nouvelle méthode appelée getTeamInfo sera créée pour mapper les données d’une équipe à l’activité.

Afficher l’exemple de 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)
        }
    }
}

Étape 3 : Mapper les données personnalisées

Dans MyCustomNotificationFactory.kt, créez une nouvelle méthode pour traiter les données lorsque des mises à jour en direct sont affichées.

Superb Owl a créé la méthode suivante pour mapper le nom et le logo de chaque équipe aux mises à jour en direct développées :

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

Étape 4 : Définir la fabrique de notifications personnalisée

Dans votre classe d’application, utilisez customBrazeNotificationFactory pour définir votre fabrique de notifications personnalisée.

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

Étape 5 : Envoyer l’activité

Vous pouvez utiliser l’endpoint REST API /messages/send pour envoyer une notification push à l’appareil Android d’un utilisateur.

Exemple de commande curl

Superb Owl a envoyé sa requête en utilisant la commande curl suivante :

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"
      }
    }
  }'

Paramètres de la requête

Étape 6 : Mettre à jour l’activité

Pour mettre à jour la notification RemoteView existante avec de nouvelles données, modifiez les paires clé-valeur pertinentes attribuées à messages.extra, puis utilisez le même notification_id et appelez à nouveau l’endpoint /messages/send.

Notifications push personnalisées

Les notifications push peuvent afficher des informations spécifiques à l’utilisateur dans une hiérarchie de vue personnalisée. Dans l’exemple suivant, un déclencheur API est utilisé pour envoyer une notification push personnalisée à un utilisateur afin qu’il puisse vérifier sa progression actuelle après avoir accompli une tâche spécifique dans l’application.

Exemple de notification push personnalisée dans le tableau de bord

Pour configurer une notification push personnalisée dans le tableau de bord, enregistrez la catégorie spécifique que vous souhaitez afficher, puis définissez les attributs utilisateur pertinents que vous souhaitez afficher à l’aide de Liquid.

Exemple de configuration de notification push personnalisée dans le tableau de bord

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Swift Braze. Vous devrez également configurer les notifications push.

Extensions d’application de contenu de notification

Deux messages de notification push affichés côte à côte. Le message de gauche montre à quoi ressemble une notification push avec l'interface par défaut. Le message de droite montre une notification push de carte de fidélité café, réalisée en implémentant une interface push personnalisée.

Les extensions d’application de contenu de notification offrent une excellente option de personnalisation des notifications push. Elles affichent une interface personnalisée pour les notifications de votre application lorsqu’une notification push est développée.

Les notifications push peuvent être développées de trois manières différentes :

  • Un appui long sur la bannière de notification push
  • Un glissement vers le bas sur la bannière de notification push
  • Un glissement de la bannière vers la gauche et la sélection de « Afficher »

Ces vues personnalisées offrent des moyens astucieux d’engager vos clients en affichant différents types de contenu, notamment des notifications interactives, des notifications alimentées par des données utilisateur, et même des messages push capables de capturer des informations telles que des numéros de téléphone et des adresses e-mail. L’une de nos fonctionnalités phares chez Braze, Push Stories, est un excellent exemple de ce à quoi peut ressembler une extension d’application de contenu de notification push !

Conditions préalables

  • Les notifications push intégrées avec succès dans votre application
  • Les fichiers suivants générés par Xcode en fonction de votre langage de programmation :

Swift

  • NotificationViewController.swift
  • MainInterface.storyboard

Objective-C

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

Notification push interactive

Les notifications push peuvent répondre aux actions de l’utilisateur à l’intérieur d’une extension d’application de contenu. Pour les utilisateurs sous iOS 12 ou version ultérieure, cela signifie que vous pouvez transformer vos notifications push en messages entièrement interactifs ! C’est une option passionnante pour introduire de l’interactivité dans vos promotions et applications. Par exemple, votre notification push peut inclure un jeu, une roue à faire tourner pour gagner des réductions, ou un bouton « J’aime » pour enregistrer une annonce ou une chanson.

L’exemple suivant montre une notification push dans laquelle les utilisateurs peuvent jouer à un jeu d’association à l’intérieur de la notification développée.

Un schéma illustrant les différentes phases d'une notification push interactive. Une séquence montre un utilisateur appuyant sur une notification push qui affiche un jeu d'association interactif.

Configuration du tableau de bord

Pour créer une notification push interactive, vous devez définir une vue personnalisée dans votre tableau de bord.

  1. Depuis la page Campaigns, cliquez sur Créer une campagne pour lancer une nouvelle campagne de notification push.
  2. Dans l’onglet Rédiger, activez les boutons de notification.
  3. Saisissez une catégorie iOS personnalisée dans le champ iOS Notification Category.
  4. Dans le .plist de votre cible d’extension de contenu de notification, définissez l’attribut UNNotificationExtensionCategory sur votre catégorie iOS personnalisée. La valeur indiquée ici doit correspondre à celle définie dans le tableau de bord de Braze sous iOS Notification Category.
  5. Définissez la clé UNNotificationExtensionInteractionEnabled sur true pour activer les interactions utilisateur dans une notification push.

Les options de boutons de notification dans les paramètres de l'éditeur de messages push.

Notifications push personnalisées

Deux iPhones affichés côte à côte. Le premier iPhone montre la vue non développée du message push. Le second iPhone montre la version développée du message push affichant la progression dans un cours, le nom de la prochaine session et la date limite de la prochaine session.

Les notifications push peuvent afficher des informations spécifiques à l’utilisateur dans une extension de contenu. Cela vous permet de créer du contenu push centré sur l’utilisateur, comme l’option de partager votre progression sur différentes plateformes, afficher les réalisations débloquées ou afficher des listes de contrôle d’onboarding. Cet exemple montre une notification push affichée à un utilisateur après qu’il a terminé une tâche spécifique dans le cours d’apprentissage Braze. En développant la notification, l’utilisateur peut voir sa progression dans son parcours d’apprentissage. Les informations fournies ici sont spécifiques à l’utilisateur et peuvent être déclenchées à la fin d’une session ou lors d’une action spécifique de l’utilisateur en utilisant un déclencheur API.

Configuration du tableau de bord

Pour créer une notification push personnalisée, vous devez définir une vue personnalisée dans votre tableau de bord.

  1. Depuis la page Campaigns, cliquez sur Créer une campagne pour lancer une nouvelle campagne de notification push.
  2. Dans l’onglet Rédiger, activez les boutons de notification.
  3. Saisissez une catégorie iOS personnalisée dans le champ iOS Notification Category.
  4. Dans l’onglet Paramètres, créez des paires clé-valeur à l’aide de Liquid standard. Définissez les attributs utilisateur appropriés que vous souhaitez afficher dans le message. Ces vues peuvent être personnalisées en fonction des attributs utilisateur spécifiques d’un profil utilisateur donné.
  5. Dans le .plist de votre cible d’extension de contenu de notification, définissez l’attribut UNNotificationExtensionCategory sur votre catégorie iOS personnalisée. La valeur indiquée ici doit correspondre à celle définie dans le tableau de bord de Braze sous iOS Notification Category.

Quatre ensembles de paires clé-valeur, où « next_session_name » et « next_session_complete_date » sont définis comme propriétés de déclencheur API à l'aide de Liquid, et « completed_session count » et « total_session_count » sont définis comme attributs utilisateur personnalisés à l'aide de Liquid.

Gérer les paires clé-valeur

La méthode didReceive est appelée lorsque l’extension d’application de contenu de notification a reçu une notification. Cette méthode se trouve dans le NotificationViewController. Les paires clé-valeur fournies dans le tableau de bord sont représentées dans le code via un dictionnaire userInfo.

Analyser les paires clé-valeur des notifications 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"];
  }
}

Notification push de capture d’informations

Les notifications push peuvent capturer des informations utilisateur à l’intérieur d’une extension d’application de contenu, repoussant les limites de ce qu’il est possible de faire avec une notification push. Demander des informations aux utilisateurs via les notifications push vous permet non seulement de recueillir des informations de base comme le nom ou l’adresse e-mail, mais aussi d’inviter les utilisateurs à soumettre des commentaires ou à compléter un profil utilisateur inachevé.

Dans le flux suivant, la vue personnalisée peut répondre aux changements d’état. Ces composants de changement d’état sont représentés dans chaque image.

  1. L’utilisateur reçoit une notification push.
  2. La notification push est ouverte. Une fois développée, elle invite l’utilisateur à fournir des informations. Dans cet exemple, l’adresse e-mail de l’utilisateur est demandée, mais vous pourriez demander n’importe quel type d’information.
  3. Les informations sont fournies et, si elles sont dans le format attendu, le bouton d’enregistrement s’affiche.
  4. La vue de confirmation s’affiche et la notification push est fermée.

Configuration du tableau de bord

Pour créer une notification push de capture d’informations, vous devez définir une vue personnalisée dans votre tableau de bord.

  1. Depuis la page Campaigns, cliquez sur Créer une campagne pour lancer une nouvelle campagne de notification push.
  2. Dans l’onglet Rédiger, activez les boutons de notification.
  3. Saisissez une catégorie iOS personnalisée dans le champ iOS Notification Category.
  4. Dans l’onglet Paramètres, créez des paires clé-valeur à l’aide de Liquid standard. Définissez les attributs utilisateur appropriés que vous souhaitez afficher dans le message.
  5. Dans le .plist de votre cible d’extension de contenu de notification, définissez l’attribut UNNotificationExtensionCategory sur votre catégorie iOS personnalisée. La valeur indiquée ici doit correspondre à celle définie dans le tableau de bord de Braze sous iOS Notification Category.

Comme le montre l’exemple, vous pouvez également inclure une image dans votre notification push. Pour ce faire, vous devez intégrer les notifications riches, définir le style de notification de votre campagne sur Notification riche et inclure une image de push riche.

Un message push avec trois ensembles de paires clé-valeur. 1. « Braze_id » défini comme un appel Liquid pour récupérer l'ID Braze. 2. « cert_title » défini comme « Braze Marketer Certification ». 3. « Cert_description » défini comme « Certified Braze marketers drive... ».

Gérer les actions des boutons

Chaque bouton d’action est identifié de manière unique. Le code vérifie si votre identifiant de réponse est égal à actionIdentifier et, le cas échéant, sait que l’utilisateur a cliqué sur le bouton d’action.

Gestion des réponses aux boutons d’action des notifications 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);
  }
}

Fermeture des notifications push

Les notifications push peuvent être automatiquement fermées lors de l’appui sur un bouton d’action. Trois options prédéfinies de fermeture sont recommandées :

  1. completion(.dismiss) - Ferme la notification
  2. completion(.doNotDismiss) - La notification reste ouverte
  3. completion(.dismissAndForward) - La notification push est fermée et l’utilisateur est redirigé vers l’application
New Stuff!