그로스 액션 (Growth Action) 연동하기 [React-Native]
팔로우
시작하기
디파이너리 그로스액션은 고객사의 인게이지먼트 마케팅 활동을 돕기 위한 기능을 제공합니다.
[그로스액션 (Growth Action) 서비스 알아보기]
디파이너리가 제공하는 기능을 이용하여 오디언스 그룹을 생성하고 각 오디언스를 타겟으로 하는 개인화된 마케팅을 진행할 수 있습니다.
[[인용:안내:보통]] 그로스액션을 이용하기 위해서는 디파이너리 유료플랜 이용이 필요합니다. [이용 문의하기]
필수 사항
디파이너리 그로스 액션 기능을 연동하기 위해서는 디파이너리(애드브릭스) SDK 연동이 필요합니다.
adbrix 기본 연동 단계까지 완료해야 그로스액션 연동이 가능합니다.
- 디파이너리(애드브릭스) 기본 SDK - 디파이너리 연동하기 [React Native]
Android 푸시 서비스 설정
React-Native 에서 Growth Action 을 사용하기 위해서는 React-Native 내 Android / iOS 프로젝트 내에 푸시 메시지 수신을 위한 세팅이 필요합니다.
Firebase 연동
푸시 기능을 연동하기 위해서는 디파이너리(애드브릭스) 기본 SDK와 Firebase Cloud Messaging SDK (이하 FCM) 연동이 필요합니다.
adbrix 기본 연동 단계까지 완료해야 그로스액션 연동이 가능합니다.
[[인용:위험:보통]]주의사항
Firebase Server Key, Sender ID를 사용한 발송 방식은 Firebase 기존 HTTP API의 지원 중단에 따라 2024년 6월 13일 이후로 지원이 중단됩니다. 아래 소개되는 Firebase 인증서 발급 및 등록 가이드에 따라 연동하여 주시기 바랍니다.
이전 연동 방식 보기
Firebase Server Key, Sender ID 등록디파이너리 그로스 액션 이용을 위해서는 디파이너리 콘솔에 Firebase Server Key / Sender ID 를 등록해야 합니다.
Firebase Server Key / Server ID 는 Firebase 콘솔 -> 설정 -> 클라우드 메시징 에서 확인하실 수 있습니다.
a. Firebase 콘솔에서 Firebase Server Key, Sender ID 를 확인합니다.
b. adbrix 콘솔의 Growth Action - Settings 메뉴에 확인한 키값을 입력합니다.
Firebase 인증서 발급하기
1. 서비스 계정에 접속합니다.
2. 발급 하고 싶은 키의 프로젝트를 선택합니다.
프로젝트가 없을 경우 Firebase 프로젝트 생성이 되지 않았다는 뜻이므로 Android 프로젝트에 Firebase 추가하기를 참고하여 Firebase 프로젝트를 생성합니다.
3. 우측 하단의 작업에서 ⋮를 클릭합니다.
4. 드롭다운에서 키 관리를 클릭합니다.
5. 키 추가를 선택합니다.
이미 생성된 키가 있을 경우, 기존에 키를 생성한 이력이 있다는 뜻이며 해당 키를 사용하시면 됩니다. 해당 키를 찾을 수 없을 경우 새로 키를 생성하여 주시기 바랍니다.
6. 드롭다운에서 새 키 만들기를 클릭합니다.
7. JSON을 선택 후 만들기를 클릭합니다.
8. 키 발급이 완료되었습니다.
Firebase 인증서 콘솔에 등록하기
[[인용:경고:보통]] 콘솔 설정 오픈 예정일
Firebase 인증서를 콘솔에 등록하는 기능은 6월 13일에 오픈될 예정입니다.
1. 콘솔에 접속합니다.
2. 좌측 패널에서 GrowthAction의 Settings를 클릭합니다.
3. Android Push Setting 탭에서 Firebase Cloud Messaging 인증서에서 등록을 클릭합니다.
4. 업로드 버튼을 클릭하여 키를 업로드합니다.
5. 업로드 완료 후 확인 버튼을 누릅니다.
6. 저장을 클릭하여 인증서를 적용합니다.
7. 인증서가 콘솔에 등록 되었습니다.
푸시 수신 설정
AndroidManifest.xml 에 아래 리시버를 등록합니다.
<receiver android:name="com.igaworks.v2.core.push.notification.AbxPushReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND"> <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE"/> <action android:name="com.igaworks.v2.core.pushServiceImplement.CLIENT_PUSH_RECEIVE"/> </intent-filter> </receiver>
작성하신 FirebaseMessagingService의 onMessageReceived내에 ReactAdbrix.onMessageReceived를 사용하여 푸시 수신 설정을 합니다.
import io.adbrix.reactnative.ReactAdbrix;
public class MyFirebaseMessagingService extends FirebaseMessagingService { @Override public void onMessageReceived(@NonNull RemoteMessage remoteMessage) { super.onMessageReceived(remoteMessage); ReactAdbrix.onMessageReceived(getApplicationContext(), remoteMessage); } }
Token 값 설정
adbrix에 Firebase 의 Token 값을 설정하기 위해서는 FirebaseMessagingService의 onNewToken()내에 ReactAdbrix.setRegistrationId를 사용하여 Token 값을 추가합니다.
public class MyFirebaseMessagingService extends FirebaseMessagingService{
@Override
public void onNewToken(String token){
Log.d(TAG, "Refreshed token: " + token);
// If you want to send messages to this application instance or
ReactAdbrix.setRegistrationId(token);
}
}
그리고 사용하는 Application 클래스에 다음과 같이 Token 값이 갱신 될 수 있도록 다음 코드를 추가합니다.
public class MyApplicationClass extends Application implements ReactApplication { @Override public void onCreate() { super.onCreate();
...
... refreshToken(); } private void refreshToken(){ FirebaseMessaging.getInstance().getToken() .addOnCompleteListener(new OnCompleteListener<String>() { @Override public void onComplete(@NonNull Task<String> task) { if (!task.isSuccessful()) { return; } String token = task.getResult(); ReactAdbrix.setRegistrationId(token);
ReactAdbrix.setPushEnable(true); } }); } }
푸시 아이콘 및 색상 설정
푸시 수신시 노출되는 아이콘 및 앱 이름의 색상을 설정합니다.
ReactAdbrix.setPushIconStyle("smallicon","largeicon",0x1000FF00);
이렇게 설정된 푸시 아이콘은 아래와 같이 노출 됩니다.
[[인용:위험:보통]]주의사항
1) 이미지 파일 이름은 확장자를 뺀 이름만 입력합니다.
2) 모든 해상도의 React-Native 프로젝트 내 android 프로젝트 내에 있는 Drawable 폴더에 해당 이름의 이미지를 모두 추가해야 합니다.
3) 서버 푸시에서 largeIcon 을 설정하였다면 해당 아이콘이 우선적으로 노출됩니다.
푸시 채널 설정
Android 8.0 이상에서 알림을 만들기 위해서는 NotificationChannel을 이용해야합니다. 해당 API를 사용하기 위해 반드시 AdBrixRm.setPushEnable(true);가 먼저 적용되어야 합니다.
알림 채널의 이름, 설명, 푸시 우선 순위, 진동 여부를 설정합니다. (1개의 채널만 생성 합니다)
//App.js let channelName = "test channel name"; let channelDescription = "channel Description"; ReactAdbrix.createNotificationChannel(channelName, channelDescription);
혹은 react-native 레벨의 javascript 코드를 통해 생성할 수 있습니다.
import AdbrixRm from "react-native-adbrix-remaster"
AdbrixRm.createNotificationChannel("channelName", "channelDescription");
iOS 푸시 서비스 설정
APNS 인증서 등록
iOS 그로스 액션 서비스를 이용하기 위해 인증서를 등록합니다.
디파이너리 콘솔 / Growth Action / Settings / iOS Push Setting 에서 등록합니다. [인증서는 어떻게 등록하나요?]
[[인용:경고:보통]] 꼭 확인하세요.
- 암호가 없는 p12 인증서를 등록해야 합니다.
- p12 인증서는 Production 타입으로 등록해야 합니다.
- iOS 그로스 액션 서버 푸시는 Production 환경에서만 동작합니다.
Capability 추가
iOS 그로스액션 서비스 연동을 위해 아래 사항을 완료합니다.
- 앱의 Signing & Capabilities -> Capability 에 Background Modes, Push Notifications 를 추가
- Background Modes 에는 Remote notifications 를 체크
Notification Service Extension 추가
iOS 의 그로스액션 사용을 위해 Notification Service Extension 을 추가합니다.
a. Xcode 하단의 '+' 버튼 클릭
b. Notification Service Extension 을 선택하고 Next 버튼 클릭
c. Product Name 을 입력하고 완료
d. 해당 Extension 의 General 설정에 AdBrixRmKit.xcframework 를 추가합니다.
프레임워크는 현재 프로젝트의 Pods -> AdBrixRmKit 폴더에 있습니다.
e. Extension 설정이 완료되면 해당 폴더에 자동으로 추가된 NotificationService 파일을 열고 아래와 같이 수정합니다.
//NotificationService.h #import <UserNotifications/UserNotifications.h> #import <AdBrixRmKit/AdBrixPushServiceObjC.h> @interface NotificationService : AdBrixPushServiceObjC @end //NotificationService.m #import "NotificationService.h" @implementation NotificationService @end
AppDelegate 수정
iOS 그로스액션 서비스 이용을 위해 AppDelegate 를 아래 내용을 추가, 수정합니다.
a. Device Token 값 가져오기
#import <react-native-adbrix-remaster/ReactAdbrix.h>
- (void)application:(UIApplication*)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { [[ReactAdbrix sharedInstance] setRegistrationIdWithDeviceToken:deviceToken]; }
b. didFinishLaunchingWithOptions 에 사용자 알림 사용 권한 동의에 따라 푸시 On / Off 기능 추가
//AppDelegate.h #import <UIKit/UIKit.h> #import <UserNotifications/UNUserNotificationCenter.h>
#import <react-native-adbrix-remaster/ReactAdbrix.h>
@interface AppDelegate : RCTAppDelegate <UNUserNotificationCenterDelegate>@end //AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... [application registerForRemoteNotifications]; UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter]; center.delegate = self;
[center requestAuthorizationWithOptions:(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge) completionHandler:^(BOOL granted, NSError * _Nullable error){ if(granted){ [[UIApplication sharedApplication] registerForRemoteNotifications]; ReactAdbrix * adBrix = [ReactAdbrix sharedInstance]; [adBrix setPushEnableWith:true]; } else{ ReactAdbrix * adBrix = [ReactAdbrix sharedInstance]; [adBrix setPushEnableWith:false]; } }]; ... }
혹은 다음처럼 제공되는 react-native 레벨의 javascript 코드를 사용해주세요
import AdbrixRm from "react-native-adbrix-remaster"
const status = await AdbrixRm.requestNotificationPermissionForiOS();
console.log(status) //true || false
c. 푸시 클릭 리스너 코드와 앱 실행 중 푸시 노출 여부를 결정하는 코드를 연동합니다.
- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler { [[ReactAdbrix sharedInstance] userNotificationCenterWithCenter:center response:response withCompletionHandler:completionHandler]; } - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler { [[ReactAdbrix sharedInstance] userNotificationCenterWithCenter:center notification:notification withCompletionHandler:completionHandler]; }
Push 사용하기
Push On / Off
adbrix 그로스액션 서비스를 이용하기 위해서는 반드시 연동해야하는 필수 API 입니다. 이 API 로 푸시 서비스를 관리할 수 있습니다.
AdbrixRm.setPushEnable(true); // Push On AdbrixRm.setPushEnable(false); // Push Off
[[인용:경고:보통]]기본 설정값 확인
디파이너리의 기본 설정값은 'Push off' 입니다.
따라서 그로스 액션 연동 완료 후 사용자들에게 푸시 수신 동의를 받은 후 setPushEnable API 를 호출해야 합니다.
기존에 푸시 수신 동의를 받은 사용자들 역시 푸시 수신을 위해서 setPushEnable API 를 호출해야 합니다.
푸시 알림 리스너
푸시 서비스에 대한 리스너를 설정합니다. 이를 통해 딥링크가 포함된 푸시의 딥링크 정보를 전달받을 수 있습니다. 푸시 리스너는 Android / iOS 프로젝트에서 설정을 추가 후 React-Native 에 리스너를 추가합니다.
React-Native
Andoid / iOS 설정이 완료되면 아래와 같이 React-Native 프로젝트 내 푸시 리스너를 추가합니다.
//App.js useEffect(() => { AdbrixRm.remoteNotificationClickListener((e) => { console.log(e.pushData); }); }, []);
알림 구독 및 거부 설정
디파이너리 그로스 액션 기능을 연동하기 위해서는 알림에 대한 구독 설정이 필요합니다. SDK에서는 푸시 뿐만 아닌 다른 채널에 대해서 구독 및 거부 설정이 가능하며 현재 설정되어 있는 값을 가져오는 기능도 같이 제공합니다.
[[인용:경고:보통]] 해당 기능은 유저오디언스 기반으로 동작합니다. 따라서 설정 전에 반드시 AdbrixRm.login() API를 호출하여 user_id를 설정해주세요.
알림 구독 및 거부하기
var subscriptionStatus = new AdbrixRm.SubscriptionStatus() subscriptionStatus.setInformativeNotificationFlag(true) subscriptionStatus.setMarketingNotificationFlag(true) subscriptionStatus.setMarketingPushNotificationFlag(true) subscriptionStatus.setMarketingKakaoNotificationFlag(true) subscriptionStatus.setMarketingSMSNotificationFlag(true) subscriptionStatus.setMarketingNightKakaoNotificationFlag(true) subscriptionStatus.setMarketingNightPushNotificationFlag(true) subscriptionStatus.setMarketingNightSMSNotificationFlag(true) AdbrixRm.setSubscriptionStatus(subscriptionStatus).then(s => { console.log(s) //"success" }).catch(e => { console.log(e) // error message });
- setInformativeNotificationFlag : 정보성 알림 (광고성 알림의 상위 항목)
- setMarketingNotificationFlag : 광고성 알림 (이하 광고성(야간 광고성) 알림 채널의 상위 항목)
- setMarketingPushNotificationFlag : 광고성 알림 푸시 채널
- setMarketingKakaoNotificationFlag : 광고성 알림 카카오 알림톡 채널
- setMarketingSMSNotificationFlag : 광고성 알림 SMS 채널
- setMarketingNightNotificationFlag : 야간 광고성 알림 (이하 야간 알림 채널의 상위 항목)
- setMarketingNightPushNotificationFlag : 야간 광고성 알림 푸시 채널
- setMarketingNightKakaoNotificationFlag : 야간 광고성 알림 SMS 채널
- setMarketingNightSMSNotificationFlag : 야간 광고성 알림 알림톡 채널
[[인용:경고:보통]] 각 상위항목의 동의 여부는 하위 동의 여부에 우선되어야 합니다. 따라서 정보성 플래그가 UNSUBSCRIBED라면 광고성 플래그가 SUBSCRIBED 여도 푸시가 발송되지 않습니다.
[[인용:경고:보통]] 수신동의 여부가 설정되지 않은 항목은 UNDEFINED 상태로 전송됩니다. 이 때, 디파이너리 알림 서버에서는 발송 누락을 방지하기 위해 true와 동일하게 처리하기 때문에 사용하지 않는 채널이라도 상위 항목에 대해서는 설정해주시기 바랍니다.
알림 구독 정보 가져오기
AdbrixRm.getSubscriptionStatus().then(subscriptionStatus => { //subscriptionStatus.getObj() 모든 상태가 담겨있는 obj 반환 console.log(subscriptionStatus.getObj()) // or subscriptionStatus.getInformativeNotificationFlag() // "SUBSCRIBED" or "UNSUBSCRIBED" or "UNDEFINED" 반환 }).catch(e => { console.log(e) // error message from server });
- getInformativeNotificationFlag : 정보성 알림
- getMarketingNotificationFlag : 광고성 알림
- getMarketingPushNotificationFlag : 광고성 알림 푸시 채널
- getMarketingKakaoNotificationFlag : 광고성 알림 카카오 알림톡 채널
- getMarketingSMSNotificationFlag : 광고성 알림 SMS 채널
- getMarketingNightNotificationFlag : 야간 광고성 알림
- getMarketingNightPushNotificationFlag : 야간 광고성 알림 푸시 채널
- getMarketingNightKakaoNotificationFlag : 야간 광고성 알림 SMS 채널
- getMarketingNightSMSNotificationFlag : 야간 광고성 알림 알림톡 채널
- getObj() 결과 값 예시
-
{
"informative": "SUBSCRIBED",
"marketing": "SUBSCRIBED",
"marketing_push": "UNSUBSCRIBED",
"marketing_sms": "UNSUBSCRIBED",
"marketing_kakao": "UNSUBSCRIBED",
"marketing_night": "UNSUBSCRIBED",
"marketing_night_kakao": "UNDEFINED",
"marketing_night_push": "UNDEFINED",
"marketing_night_sms": "UNDEFINED"
}
카카오톡 설정
카카오 알림톡, 친구톡 사용을 위한 설정입니다. *KAKAOID: 카카오 싱크 API를 통해 받은 10자리 카카오 ID
AdbrixRm.setKakaoId(KAKAOID).then(s => { console.log(s) //return "success" }).catch(e => { console.log(e) // error message from server })
SMS 설정
SMS 사용을 위한 설정입니다. *PHONE_NUMBER: E.164를 준수하는 국가코드 + 번호 에서 "+"를 제외한 값(예시 : 8210********)
AdbrixRm.setPhoneNumber("821012341234").then(s => { console.log(s) // return "success" }).catch(e => { console.log(e) // error message from server });
Pop-up Message
디파이너리 팝업 메시지는 별도의 연동이 필요하지 않습니다.
디파이너리 SDK를 통해서 전달된 이벤트를 트리거로 하여 팝업 메시지를 노출할 수 있고, 디파이너리 콘솔에서 모든 설정을 진행할 수 있습니다.
[[인용:안내:보통]] 팝업 메시지 기능은 AdBrix React-Native SDK 2.3.0 버전 이상에서 사용할 수 있습니다.
팝업 메시지 딥링크
팝업 메시지에 설정되어있는 딥링크를 사용할 경우 딥링크 리스너 코드가 호출이 됩니다.
// App.js
import AdbrixRm from 'react-native-adbrix-remaster'
useEffect(() => {
const deeplinkListener = AdbrixRm.deeplinkListener((e) => {
console.log(e.deeplink)
})
return () => {
deeplinkListener.remove()
}
}, [])
[[인용:안내:보통]] 네이티브 os의 딥링크 코드도 호출되니 설정에 유의해주세요
클릭 이벤트 리스너
유저의 팝업 메시지 클릭 이벤트를 설정한 리스너를 통해 전달합니다.
이 리스너를 이용하여 클릭 이벤트에 대한 추가 액션을 정의할 수 있습니다.
React-Native
React-Native 프로젝트 내 in-app message 리스너를 추가합니다.
//App.js useEffect(() => { const iamClickListener = AdbrixRm.inAppMessageClickListener((arg) => {
console.log(arg.actionId);
console.log(arg.actionType);
console.log(arg.actionArg);
console.log(arg.isClosed);
}) }, []);
클릭 리스너 전달 값 상세
클릭 리스너를 통해 전달되는 값의 타입과 예시는 다음과 같습니다.
- actionId (String) : button_1, button_2, image, sticky
- actionType (String) : close, deeplink_and_close, weblink, weblink_and_close, dont_show_me_today_and_close
- actionArg (String) : weblink address, deeplink path
- isClosed (Boolean) : 팝업 메시지가 닫혔는지 여부.