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 un envoi avec l'interface utilisateur par défaut. Le message de droite montre une notification push de carte de fidélisation pour du café, réalisée en implémentant une interface utilisateur de notification push personnalisée.

Les extensions d’applications de contenu de notification constituent une excellente option de personnalisation des notifications push. Les extensions d’apps de contenu de notification affichent une interface personnalisée pour les notifications de votre app lorsqu’une notification push est développée.

Les notifications push peuvent être étendues de trois manières différentes :

  • Un appui long sur la bannière de notification push
  • Faire glisser sur la bannière de notification push
  • Faire glisser la bannière vers la gauche et sélectionner « Afficher »

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

Conditions

  • Les notifications push intégrées avec succès dans votre app.
  • Les fichiers suivants générés par Xcode en fonction de votre langue de codage :

Swift

  • NotificationViewController.swift
  • MainInterface.storyboard

Objectif-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 exécutant iOS 12 ou une version ultérieure, cela signifie que vous pouvez transformer vos notifications push en messages entièrement interactifs ! Il s’agit d’une option intéressante pour introduire de l’interactivité dans vos promotions et applications. Par exemple, votre notification push peut inclure un jeu pour les utilisateurs, 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 de match à l’intérieur de la notification élargie.

Un schéma de ce à quoi pourraient ressembler les 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. Dans la page Campagnes, cliquez sur Créer une campagne pour lancer une nouvelle campagne de notification push.
  2. Dans l’onglet Composer, basculez sur les boutons de notification.
  3. Saisissez une catégorie iOS personnalisée dans le champ Catégorie de notification iOS.
  4. Dans la .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 Catégorie de notification iOS.
  5. Définissez la clé UNNotificationExtensionInteractionEnabled sur true pour activer les interactions avec l’utilisateur dans une notification push.

Options de bouton de notification dans les paramètres de l’éditeur de messages push.

Notifications push personnalisées

Deux iPhone affichés côte à côte. Le premier iPhone affiche la vue non étendue du message push. Le deuxième iPhone affiche la version élargie du message push affichant une « progression » de l’état d’avancement d’un cours, le nom de la prochaine session et la date d’échéance 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 axé sur l’utilisateur, comme l’ajout de l’option de partage de votre progression sur différentes plateformes, l’affichage des réalisations déverrouillées ou l’affichage 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 de 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 de l’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. Dans la page Campagnes, cliquez sur Créer une campagne pour lancer une nouvelle campagne de notification push.
  2. Dans l’onglet Composer, basculez sur les boutons de notification.
  3. Saisissez une catégorie iOS personnalisée dans le champ Catégorie de notification iOS.
  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 voir apparaître dans le message. Ces vues peuvent être personnalisées sur la base des attributs utilisateur spécifiques d’un profil utilisateur donné.
  5. Dans la .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 Catégorie de notification iOS.

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

Gérer les paires clé-valeur

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

Analyser des paires clé-valeur à partir de 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 recueil d’informations

Les notifications push peuvent capturer les informations de l’utilisateur à l’intérieur d’une extension d’app de contenu, repoussant ainsi les limites de ce qu’il est possible de faire avec un push. Demander la contribution des utilisateurs par le biais de notifications push vous permet non seulement de demander des informations de base comme le nom ou l’e-mail, mais aussi d’inciter les utilisateurs à soumettre leurs commentaires ou à compléter un profil utilisateur inachevé.

Dans le flux suivant, la vue personnalisée est en mesure de 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 élargie, la notification push 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 rejeté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. Dans la page Campagnes, cliquez sur Créer une campagne pour lancer une nouvelle campagne de notification push.
  2. Dans l’onglet Composer, basculez sur les boutons de notification.
  3. Saisissez une catégorie iOS personnalisée dans le champ Catégorie de notification iOS.
  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 voir apparaître dans le message.
  5. Dans la .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 Catégorie de notification iOS.

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

Une notification push avec trois ensembles de paires clé-valeur. 1. "Braze_id" réglé comme un appel liquide pour récupérer l'ID de Braze. 2. "cert_title" défini comme "Braze Marketer Certification". 3. "Cert_description" défini comme "Entraîneur certifié pour le marché de la Braze...".

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 à actionIndentifier, et, si c’est le cas, 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);
  }
}

Rejet des notifications push

Les notifications push peuvent être automatiquement rejetées en appuyant sur un bouton d’action. Nous vous recommandons de choisir parmi trois options prédéfinies pour le rejet de la notification push :

  1. completion(.dismiss) - Rejet de la notification
  2. completion(.doNotDismiss) - La notification reste ouverte
  3. completion(.dismissAndForward) - La commande push est rejetée et l’utilisateur est redirigé vers l’application.
Github   Modifier cette page sur GitHub
New Stuff!