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 une chance de répondre et d’effectuer un 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). Ainsi, votre application aura la possibilité de personnaliser l’expérience, par exemple en affichant des éléments d’IU personnalisés dans la notification envoyée à la barre de notification. Bien que l’implémentation de push de cette manière puisse être peu familière à certains, l’une de nos fonctionnalités bien connues chez Braze, Push Stories, est un excellent exemple de l’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 usine avant que la notification ne soit affichée à l’utilisateur. Il transmettra ensuite une charge utile contenant des paires clé-valeur personnalisées envoyées via le tableau de bord de Braze ou l’API REST.

Dans cette section, vous serez le partenaire de Superb Owl, l’animateur d’un nouveau jeu télévisé dans lequel des équipes de sauvetage d’animaux sauvages s’affrontent pour savoir qui peut enregistrer le plus grand nombre de hiboux. Ils cherchent à exploiter les notifications de mise à jour en ligne 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 ligne/en production/instantanée que Superb Owl veut montrer, affiche un match en cours entre 'Wild Bird Fund' et 'Owl Rescue'. Nous sommes dans le quatrième quart-temps et le score est de 2-4 avec OWL en tête.

Étape 1 : Ajouter une mise en page personnalisée

Vous pouvez ajouter une ou plusieurs présentations RemoteView de notification personnalisées à votre projet. Ils permettent de 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 mise en page personnalisée. Superb Owl a créé les mises en page suivantes pour leurs mises en page RemoteView réduites et étendues :

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>

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

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

Dans l’exemple suivant, Superb Owl a créé une usine de notification personnalisée pour afficher une mise en page RemoteView pour les matchs en cours. Dans l’ étape suivante, ils créeront une nouvelle méthode appelée getTeamInfo pour mapper les données d’une équipe à l’activité.

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

Étape 3 : Mappage de 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 lignes/en production/instantanées étendues :

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 customBrazeNotificationFactorypour 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 le point d’arrivée de l’API /messages/send REST API endpoint 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 demande

É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 le point de terminaison /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 suivre sa progression après avoir accompli une tâche spécifique dans l’application.

Exemple de tableau de bord personnalisé

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

Exemple de tableau de bord personnalisé

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, le contenu push, 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 Campagnes, 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 Campagnes, 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 Campagnes, 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!