Skip to content

고급 푸시 알림 예시

다음 가이드에서는 Braze SDK의 고급 푸시 알림 예제를 다룹니다.

필수 조건

이 기능을 사용하려면 먼저 Android Braze SDK를 통합해야 합니다. 푸시 알림도 설정해야 합니다.

커스텀 알림 레이아웃

Braze 알림은 데이터 메시지로 전송되므로 앱이 백그라운드에 있을 때 시스템에서 자동으로 처리할 수 있는 알림 메시지와 달리 백그라운드에서도 항상 응답하고 그에 따라 동작을 수행할 수 있는 기회가 있습니다. 이와 같이 애플리케이션은 예를 들어 알림 트레이에 전달된 알림 내에서 개인화된 UI 요소를 표시하여 경험을 사용자 지정할 수 있습니다. 이 방식으로 푸시를 구현하는 것이 일부에게는 낯설 수 있지만, Braze의 잘 알려진 기능 중 하나인 푸시 스토리는 커스텀 뷰 컴포넌트를 사용하여 몰입감 있는 경험을 만드는 좋은 예입니다!

인터페이스를 사용하여 IBrazeNotificationFactory 인터페이스를 사용하여 Braze 푸시 알림이 표시되는 방식을 사용자 지정할 수 있습니다. BrazeNotificationFactory 을 확장하면 사용자에게 알림이 표시되기 전에 Braze가 공장의 createNotification() 메소드를 호출합니다. 그런 다음 Braze 대시보드 또는 REST API를 통해 전송된 사용자 지정 키-값 쌍이 포함된 페이로드를 전달합니다.

이 섹션에서는 야생동물 구조팀이 누가 가장 많은 올빼미를 구할 수 있는지 경쟁하는 새로운 게임 쇼의 호스트인 슈퍼 올빼미와 파트너가 됩니다. 이들은 Android 앱에서 실시간 업데이트 알림을 활용하여 진행 중인 경기의 상태를 표시하고 실시간으로 알림을 동적으로 업데이트할 수 있도록 하려고 합니다.

슈퍼 올빼미가 보여주고 싶은 라이브 업데이트는 '야생 조류 기금'과 '올빼미 구조대'의 진행 중인 경기를 보여주는 것입니다. 현재 4쿼터, 스코어는 2-4로 OWL이 앞서고 있습니다.

1단계: 커스텀 레이아웃 추가하기

프로젝트에 하나 이상의 커스텀 알림 리모트뷰 레이아웃을 추가할 수 있습니다. 이는 접거나 펼쳤을 때 알림이 표시되는 방식을 처리하는 데 유용합니다. 디렉토리 구조는 다음과 비슷해야 합니다:

1
2
3
4
5
6

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

각 XML 파일에서 커스텀 레이아웃을 만듭니다. Superb Owl은 축소 및 확장된 RemoteView 레이아웃에 대해 다음과 같은 레이아웃을 만들었습니다:

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>

2단계: 사용자 지정 알림 팩토리 만들기

애플리케이션에서 MyCustomNotificationFactory.kt 이라는 이름의 새 파일을 만들어 확장자 BrazeNotificationFactory 을 확장하여 커스텀 리모트뷰 레이아웃이 표시되는 방식을 처리합니다.

다음 예시에서는 슈퍼 올빼미가 진행 중인 경기에 대한 RemoteView 레이아웃을 표시하는 커스텀 알림 팩토리를 만들었습니다. 다음 단계에서는 getTeamInfo 이라는 새로운 메서드를 만들어 팀의 데이터를 활동에 매핑합니다.

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

3단계: 사용자 지정 데이터 매핑

MyCustomNotificationFactory.kt 에서 라이브 업데이트가 표시될 때 데이터를 처리하는 새로운 메서드를 만듭니다.

슈퍼 올빼미는 각 팀의 이름과 로고를 확장된 라이브 업데이트에 매핑하는 방법을 다음과 같이 만들었습니다:

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

4단계: 사용자 지정 알림 팩토리 설정

애플리케이션 클래스에서 customBrazeNotificationFactory를 사용하여 사용자 지정 알림 팩토리를 설정합니다.

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

5단계: 활동 보내기

REST API 엔드포인트를 사용하여 /messages/send REST API 엔드포인트를 사용하여 사용자의 Android 디바이스로 푸시 알림을 보낼 수 있습니다.

curl 명령 예제

Superb Owl은 다음 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"
      }
    }
  }'

요청 매개변수

6단계: 활동 업데이트

기존 RemoteView 알림을 새 데이터로 업데이트하려면 messages.extra 에 할당된 관련 키-값 페어를 수정한 다음 동일한 notification_id 을 사용하여 /messages/send 엔드포인트를 다시 호출하세요.

개인화된 푸시 알림

푸시 알림은 사용자 지정 보기 계층 구조 내에 사용자별 정보를 표시할 수 있습니다. 다음 예제에서는 API 트리거를 사용하여 앱에서 특정 작업을 완료한 후 현재 진행 상황을 추적할 수 있도록 사용자에게 개인화된 푸시 알림을 보냅니다.

개인화된 푸시 대시보드 예제

대시보드에서 개인화된 푸시를 설정하려면 표시하려는 특정 카테고리를 등록한 다음 Liquid를 사용하여 표시하려는 관련 사용자 속성을 설정하세요.

개인화된 푸시 대시보드 예제

필수 조건

이 기능을 사용하려면 먼저 Swift Braze SDK를 통합해야 합니다. 푸시 알림도 설정해야 합니다.

알림 콘텐츠 앱 확장

두 개의 푸시 메시지가 나란히 표시됩니다. 왼쪽의 메시지는 기본 UI에서 푸시가 어떻게 표시되는지 보여줍니다. 오른쪽의 메시지는 커스텀 푸시 UI를 구현하여 만든 커피 펀치 카드 푸시를 보여줍니다.

알림 콘텐츠 앱 확장은 푸시 알림을 사용자 지정할 수 있는 뛰어난 옵션을 제공합니다. 알림 콘텐츠 앱 확장은 푸시 알림이 확장될 때 앱의 알림에 대한 커스텀 인터페이스를 표시합니다.

푸시 알림은 세 가지 방법으로 확장할 수 있습니다.

  • 푸시 배너를 길게 누릅니다.
  • 푸시 배너를 아래로 스와이프
  • 배너를 왼쪽으로 스와이프하고 ‘보기’를 선택합니다.

이러한 사용자 지정 보기는 대화형 알림, 사용자 데이터로 채워진 알림, 전화번호 및 이메일과 같은 정보를 캡처할 수 있는 푸시 메시지 등 다양한 유형의 콘텐츠를 표시하여 고객의 참여를 유도하는 스마트한 방법을 제공합니다. Braze의 잘 알려진 기능 중 하나인 푸시 스토리는 푸시 알림 콘텐츠 앱 확장의 모습을 보여주는 대표적인 예입니다!

요구 사항

  • 앱에 성공적으로 통합된 푸시 알림
  • 코딩 언어에 따라 Xcode에서 생성되는 파일은 다음과 같습니다.

Swift

  • NotificationViewController.swift
  • MainInterface.storyboard

Objective-C

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

대화형 푸시 알림

푸시 알림은 콘텐츠 앱 확장 내에서 사용자 작업에 응답할 수 있습니다. iOS 12 이상을 실행하는 사용자의 경우, 푸시 알림을 완전한 대화형 메시지로 전환할 수 있습니다! 이는 프로모션과 애플리케이션에 인터랙티브한 기능을 도입할 수 있는 흥미로운 옵션입니다. 예를 들어 푸시 알림에는 사용자가 플레이할 수 있는 게임, 할인 옵션을 제공하는 돌림판, 목록이나 노래를 저장하는 ‘좋아요’ 버튼 등이 포함될 수 있습니다.

다음 예시는 사용자가 확장된 알림 내에서 매치 게임을 플레이할 수 있는 푸시 알림을 보여줍니다.

대화형 푸시 알림의 단계가 어떤 모습일 수 있는지 보여주는 다이어그램입니다. 사용자가 대화형 매칭 게임을 표시하는 푸시 알림을 누르는 일련의 모습을 보여줍니다.

대시보드 구성

대화형 푸시 알림을 만들려면 대시보드에서 사용자 지정 보기를 설정해야 합니다.

  1. 캠페인 페이지에서 캠페인 생성을 클릭하여 새 푸시 알림 캠페인을 시작합니다.
  2. 작성 탭에서 알림 버튼을 토글합니다.
  3. iOS 알림 카테고리 필드에 사용자 지정 iOS 카테고리를 입력합니다.
  4. 알림 콘텐츠 확장 대상의 .plist 에서 UNNotificationExtensionCategory 속성을 사용자 지정 iOS 카테고리로 설정합니다. 여기에 입력한 값은 iOS 알림 카테고리 아래의 Braze 대시보드에 설정된 값과 일치해야 합니다.
  5. UNNotificationExtensionInteractionEnabled 키를 true 으로 설정하여 푸시 알림에서 사용자 상호작용을 활성화합니다.

푸시 메시지 작성기 설정에 있는 알림 버튼 옵션입니다.

개인화된 푸시 알림

두 대의 iPhone이 나란히 표시됩니다. 첫 번째 iPhone은 푸시 메시지의 확장되지 않은 보기를 표시합니다. 두 번째 iPhone에는 코스의 '진행' 화면, 다음 세션 이름, 다음 세션의 만료 시점을 표시하는 확장된 버전의 푸시 메시지가 표시됩니다.

푸시 알림은 콘텐츠 확장 내에서 사용자별 정보를 표시할 수 있습니다. 이를 통해 여러 플랫폼에서 진행 상황을 공유하거나, 잠금 해제된 업적을 표시하거나, 온보딩 체크리스트를 표시하는 옵션을 추가하는 등 사용자 중심의 푸시 콘텐츠를 만들 수 있습니다. 이 예제에서는 사용자가 Braze 학습 과정에서 특정 작업을 완료한 후 사용자에게 표시되는 푸시 알림을 보여줍니다. 알림을 확장하면 사용자는 학습 경로를 통해 자신의 진행 상황을 확인할 수 있습니다. 여기에 제공된 정보는 사용자별로 다르며 세션이 완료되거나 특정 사용자 작업이 수행될 때 API 트리거를 활용하여 실행될 수 있습니다.

대시보드 구성

개인화된 푸시 알림을 만들려면 대시보드에서 사용자 지정 보기를 설정해야 합니다.

  1. 캠페인 페이지에서 캠페인 생성을 클릭하여 새 푸시 알림 캠페인을 시작합니다.
  2. 작성 탭에서 알림 버튼을 토글합니다.
  3. iOS 알림 카테고리 필드에 사용자 지정 iOS 카테고리를 입력합니다.
  4. 설정 탭에서 표준 Liquid를 사용하여 키-값 쌍을 생성합니다. 메시지에 표시할 적절한 사용자 속성을 설정합니다. 이러한 보기는 특정 고객 프로필의 특정 사용자 속성을 기반으로 개인화될 수 있습니다.
  5. 알림 콘텐츠 확장 대상의 .plist 에서 UNNotificationExtensionCategory 속성을 사용자 지정 iOS 카테고리로 설정합니다. 여기에 입력한 값은 iOS 알림 카테고리 아래의 Braze 대시보드에 설정된 값과 일치해야 합니다.

네 개의 키-값 페어 세트, "next_session_name" 및 "next_session_complete_date" 은 Liquid를 사용하여 API 트리거 속성으로 설정하고 "completed_session count" 및 "total_session_count" 은 Liquid를 사용하여 커스텀 사용자 속성으로 설정합니다.

키-값 쌍 처리하기

didReceive 메서드는 알림 콘텐츠 앱 확장이 알림을 받으면 호출됩니다. 이 방법은 NotificationViewController 에서 찾을 수 있습니다. 대시보드에 제공된 키-값 페어는 userInfo 사전을 사용하여 코드에 표시됩니다.

푸시 알림에서 키-값 쌍 구문 분석하기

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"];
  }
}

정보 캡처 푸시 알림

푸시 알림은 콘텐츠 앱 확장 내에서 사용자 정보를 캡처할 수 있으므로 푸시로 가능한 작업의 한계를 뛰어넘을 수 있습니다. 푸시 알림을 통해 사용자 입력을 요청하면 이름이나 이메일과 같은 기본 정보를 요청할 수 있을 뿐만 아니라 사용자에게 피드백을 제출하거나 미완성된 사용자 프로필을 작성하라는 메시지를 표시할 수도 있습니다.

다음 흐름에서 사용자 지정 보기는 상태 변경에 응답할 수 있습니다. 이러한 상태 변경 구성요소가 각 이미지에 표시됩니다.

  1. 사용자가 푸시 알림을 받습니다.
  2. 푸시가 열립니다. 확장 후 푸시는 사용자에게 정보를 입력하라는 메시지를 표시합니다. 이 예제에서는 사용자의 이메일 주소가 요청되었지만 모든 종류의 정보를 요청할 수 있습니다.
  3. 정보가 제공되고 예상되는 형식인 경우 등록 버튼이 표시됩니다.
  4. 확인 보기가 표시되고 푸시가 해제됩니다.

대시보드 구성

정보 캡처 푸시 알림을 만들려면 대시보드에서 사용자 지정 보기를 설정해야 합니다.

  1. 캠페인 페이지에서 캠페인 생성을 클릭하여 새 푸시 알림 캠페인을 시작합니다.
  2. 작성 탭에서 알림 버튼을 토글합니다.
  3. iOS 알림 카테고리 필드에 사용자 지정 iOS 카테고리를 입력합니다.
  4. 설정 탭에서 표준 Liquid를 사용하여 키-값 쌍을 생성합니다. 메시지에 표시할 적절한 사용자 속성을 설정합니다.
  5. 알림 콘텐츠 확장 대상의 .plist 에서 UNNotificationExtensionCategory 속성을 사용자 지정 iOS 카테고리로 설정합니다. 여기에 입력한 값은 iOS 알림 카테고리 아래의 Braze 대시보드에 설정된 값과 일치해야 합니다.

예시에서 볼 수 있듯이 푸시 알림에 이미지를 포함할 수도 있습니다. 이렇게 하려면 리치 알림을 통합하고 캠페인에서 알림 스타일을 리치 알림으로 설정한 다음, 리치 푸시 이미지를 포함해야 합니다.

세 세트의 키-값 쌍이 포함된 푸시 메시지입니다. 1. "Braze_id" 를 Liquid 호출로 설정하여 Braze ID를 검색합니다. 2. "cert_title" 을 "Braze 마케터 인증"으로 설정합니다. 3. "Cert_description" "인증된 Braze 마케터가 운전합니다..."로 설정.

버튼 동작 처리하기

각 실행 버튼은 고유하게 식별됩니다. 이 코드는 응답 식별자가 actionIndentifier와 같은지 확인하고, 같다면 사용자가 실행 버튼을 클릭했음을 알 수 있습니다.

푸시 알림 동작 버튼 응답 처리하기

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

푸시 해제하기

푸시 알림은 실행 버튼을 누르면 자동으로 해제할 수 있습니다. 권장되는 세 가지 사전 빌드된 푸시 해제 옵션이 있습니다.

  1. completion(.dismiss) - 알림을 해제합니다.
  2. completion(.doNotDismiss) - 알림이 계속 열려 있습니다.
  3. completion(.dismissAndForward) - 푸시가 해제되고 사용자가 애플리케이션으로 이동합니다.
Github   GitHub 에서 이 페이지를 편집합니다.
New Stuff!