Integrating Growth Action [React-Native]

Getting Started

DFINERY Growth Action provides functions to help customers engage with their engagement marketing activities.

[Learn about the Growth Action service]

Using the functions provided by DFINERY, you can create audience groups and conduct personalized marketing targeting each audience.

[[인용:안내:보통]] To use Growth Action, you must use the DFINERY paid plan. [ Contact Us ]

Required

DFINERY integrating with the Growth Action feature requires the DFINERY (Adbrix) SDK integration.
You must complete the adbrix basic integration steps to enable Growth Action integration.

• DFINERY (AdBrix) Basic SDK - Integrating Definery [React Native]

Android Push Service Settings

To use Growth Action in React-Native, you need to set up for receiving push messages within the Android/iOS project in React-Native.

Firebase integration

In order to integrate the push function, the DFINERY (Adbrix) basic SDK and Firebase Cloud Messaging SDK (hereinafter referred to as FCM) are required.
You must complete the basic adbrix integration steps to be able to integrate with Growth Action.

• FCM SDK - Setting up Firebase Cloud Messaging Client App on Android

[[Caution: Risk: Moderate]]NoticeThe sending method using Firebase Server Key and Sender ID will no longer be supported after June 13, 2024, due to the discontinuation of support for the existing Firebase HTTP API. Please integrate according to the Firebase certificate issuance and registration guide introduced below.

View previous integration method

Register Firebase Server Key, Sender ID

To use the DFINERY Growth Action, you must register the Firebase Server Key / Sender ID in the DFINERY Console .
You can check the Firebase Server Key / Server ID in the Firebase console -> Settings -> Cloud Messaging.

a. Check the Firebase Server Key and Sender ID in the Firebase console.

b. Enter the verified key value in the Growth Action - Settings menu of the adbrix console.

Issuing a Firebase Certificate

1. Access the service account .

2. Select the project for which you want to issue a key.

If there is no project, it means that the Firebase project has not been created, so refer to Adding Firebase to your Android project to create a Firebase project.

3. Click on ⋮ in the task at the bottom right.

4. Click on Key Management from the dropdown.

5. Select Add Key.

If a key has already been generated, it means there is a history of a previously generated key, and you can use that key. If the key cannot be found, please generate a new key.

6. Click Create New Key from the dropdown.

7. Select JSON and click create.

8. The key issuance has been completed.

Register Firebase certificate in console

[[Citation:Warning:Normal]] Console setup opening date
The feature to register Firebase certificates in the console is scheduled to open on June 13th.

1.Access the console .

2. Click on Settings of GrowthAction in the left panel.

3. In the Android Push Setting tab, click Register in the Firebase Cloud Messaging certificate.

4. Click the upload button to upload the key.

5. After completing the upload, click the confirm button.

6. Click Save to apply the certificate.

7. The certificate has been registered in the console.

Push notification settings

Register the following receiver in AndroidManifest.xml.

Set up push reception using ReactAdbrix.onMessageReceived within the onMessageReceived of the FirebaseMessagingService you wrote.

import io.adbrix.reactnative.ReactAdbrix;

public class MyFirebaseMessagingService extends FirebaseMessagingService {    @Override    public void onMessageReceived(@NonNull RemoteMessage remoteMessage) {        super.onMessageReceived(remoteMessage);        ReactAdbrix.onMessageReceived(getApplicationContext(), remoteMessage);    }}

Set Token Value

To set the Token value of Firebase in adbrix, add the Token value using ReactAdbrix.setRegistrationId within onNewToken() of FirebaseMessagingService.

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

And add the following code to the Application class you are using so that the Token value can be updated as follows.

public class MyApplicationClass extends Application implements ReactApplication {    @Override    public void onCreate() {        super.onCreate();
        ...
        ...        refreshToken();    }    private void refreshToken(){        FirebaseMessaging.getInstance().getToken()            .addOnCompleteListener(new OnCompleteListener() {                @Override                public void onComplete(@NonNull Task task) {                    if (!task.isSuccessful()) {                        return;                    }                    String token = task.getResult();                    ReactAdbrix.setRegistrationId(token);
                    ReactAdbrix.setPushEnable(true);                }            });    }}

Push icon and color settings

Sets the color of the icon and app name displayed when receiving a push.

ReactAdbrix.setPushIconStyle("smallicon","largeicon",0x1000FF00);

The push icon set in this way is exposed as shown below.

[[Quote: Danger: Moderate]] Precautions
1) Enter only the name of the image file without the extension.
2) You must add all images with the corresponding name to the Drawable folder within the android project in the React-Native project of all resolutions.
3) If you have set a largeIcon in the server push, that icon will be displayed with priority.

Push Channel Settings

To create notifications on Android 8.0 or higher, you must use NotificationChannel. To use this API, AdBrixRm.setPushEnable(true); must be applied first .

Set the name, description, push priority, and vibration for the notification channel . (Only one channel is created)

//App.jslet channelName = "test channel name";let channelDescription = "channel Description";ReactAdbrix.createNotificationChannel(channelName, channelDescription);

Alternatively, it can be generated through JavaScript code at the react-native level.

import AdbrixRm from "react-native-adbrix-remaster"

AdbrixRm.createNotificationChannel("channelName", "channelDescription");

iOS Push Service Settings

APNS Certificate Registration

Register the certificate to use the iOS Growth Action Service.

Register in the DFINERY Console / Growth Action / Settings / iOS Push Setting. [ How do I register the certificate? ]

[[Quote:Warning:Normal]] Please make sure to check.
- You must register a p12 certificate without a password.
- The p12 certificate must be registered as a Production type.
- iOS Gross Action Server Push works only in the Production environment.- iOS Growth Action Server Push works only in the Production environment.

Add Capability

Complete the following tasks to integrate the iOS Growth Action service.

• Add Background Modes and Push Notifications to the app's Signing & Capabilities -> Capability
• Check Remote notifications in Background Modes

Add Notification Service Extension

Add a Notification Service Extension to use Growth Action in iOS.

a. Click the '+' button at the bottom of Xcode

b. Select Notification Service Extension and click the Next button

c. Enter the Product Name and complete

d. Add AdBrixRmKit.xcframework to the General settings of the relevant Extension.
The framework is located in the Pods -> AdBrixRmKit folder of the current project.

e. Once the extension setup is complete, open the automatically added NotificationService file in the folder and modify it as follows.

//NotificationService.h      #import #import @interface NotificationService : AdBrixPushServiceObjC@end//NotificationService.m#import "NotificationService.h"@implementation NotificationService@end

Modify AppDelegate

To use the iOS Growth Action service, add and modify the AppDelegate with the following content.

a. Retrieve Device Token value

#import 

- (void)application:(UIApplication*)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{  [[ReactAdbrix sharedInstance] setRegistrationIdWithDeviceToken:deviceToken];}

b. Add push On / Off feature according to user notification permission agreement in didFinishLaunchingWithOptions

//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];
       }
       
   }];
   
   ...
   
}

Or please use the provided React Native level JavaScript code as follows.

import AdbrixRm from "react-native-adbrix-remaster"

const status = await AdbrixRm.requestNotificationPermissionForiOS();
console.log(status) //true || false

c. Integrate the push click listener code with the code that determines whether to display the push notification while the app is running.

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

Using Push

Push On / Off

This is a mandatory API that must be integrated to use the adbrix Gross Action service. This API allows you to manage push services.

AdbrixRm.setPushEnable(true);   // Push On
AdbrixRm.setPushEnable(false);  // Push Off

[[Quote:Warning:Normal]] Check Default Settings
The default setting of the definery is 'Push off'.
Therefore, after completing the growth action integration, you must call the setPushEnable API after obtaining push reception consent from users.
Users who have previously consented to receive push notifications must also call the setPushEnable API to receive push notifications.

Push Notification Listener

Setting up a listener for push services. Through this, you can receive deep link information of the push containing the deep link. After adding settings in the Android / iOS project, add the listener to React-Native.

React-Native

Once the Android / iOS setup is complete, add the push listener within the React-Native project as shown below.

//App.js
useEffect(() => {
  AdbrixRm.remoteNotificationClickListener((e) => {
      console.log(e.pushData);
  });
}, []);

Notification subscription and opt-out settings

In order to integrate the DFINERY Growth Action feature, you need to set up a subscription for notifications.The SDK allows subscription and opt-out settings not only for push notifications but also for other channels, and it also provides the functionality to retrieve the current settings.

[[인용:보통:위험]]​ This function operates based on user audience.Therefore, please make sure to call the AdbrixRm.login() API to set the user_id before setting.

Subscribe and Unsubscribe Notifications

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 : Informational notification (Parent item of promotional notification)
• setMarketingNotificationFlag : Advertisement Notification (hereinafter referred to as the upper item of the advertisement (night advertisement) notification channel)
• setMarketingPushNotificationFlag : Advertising Push Notification Channel
• setMarketingKakaoNotificationFlag : Advertising notification Kakao Notification Talk channel
• setMarketingSMSNotificationFlag : Advertising notification SMS channel
• setMarketingNightNotificationFlag : Nighttime advertising notifications (hereinafter referred to as the parent item of the nighttime notification channel)
• setMarketingNightPushNotificationFlag : Nighttime Marketing Push Notification Channel
• setMarketingNightKakaoNotificationFlag : Nighttime promotional notification SMS channel
• setMarketingNightSMSNotificationFlag : Nighttime marketing notification AlimTalk channel

[[Quote:Warning:Normal]] Each superior item's consent should take precedence over the subordinate consent. Therefore, if the informational flag is UNSUBSCRIBED, the push will not be sent even if the promotional flag is SUBSCRIBED.

[[Quote:Warning:Normal]] Items for which consent to receive is not set will be sent in UNDEFINED status. At this time, the DFINERY notification server processes it the same as true to prevent missed transmissions, so please set the upper level items even if it is a channel that is not used.

Get notification subscription information

AdbrixRm.getSubscriptionStatus().then(subscriptionStatus => {
    //subscriptionStatus.getObj() returns an obj containing all statuses
    console.log(subscriptionStatus.getObj())
    // or    
    subscriptionStatus.getInformativeNotificationFlag()
    // returns "SUBSCRIBED" or "UNSUBSCRIBED" or "UNDEFINED"
}).catch(e => {
    console.log(e) // error message from server
});

• getInformativeNotificationFlag : Informational Notification
• getMarketingNotificationFlag : Advertising notification
• getMarketingPushNotificationFlag : Advertising notification push channel
• getMarketingKakaoNotificationFlag: Advertising notification Kakao notification talk channel
• getMarketingSMSNotificationFlag : Marketing notification SMS channel
• getMarketingNightNotificationFlag : Nighttime advertising notification
• getMarketingNightPushNotificationFlag: Nighttime Advertising Notification Push Channel
• getMarketingNightKakaoNotificationFlag : Nighttime promotional notification SMS channel
• getMarketingNightSMSNotificationFlag : Nighttime advertising notification AlimTalk channel
• Example of getObj() result value

• {
      "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"
  }

KakaoTalk Settings

This is a setting for using Kakao Notification Talk and Friend Talk. *KAKAOID: 10-digit Kakao ID received through Kakao Sync API

AdbrixRm.setKakaoId(KAKAOID).then(s => {
    console.log(s) //return "success"
}).catch(e => {
    console.log(e) // error message from server
})

SMS Settings

This is the setting for SMS usage. *PHONE_NUMBER: Value excluding the "+" in the country code + number complying with E.164 (Example: 8210********)

AdbrixRm.setPhoneNumber("821012341234").then(s => {
    console.log(s) // return "success"
}).catch(e => {
    console.log(e) // error message from server
});

Pop-up Message

DFINERY pop-up messages do not require separate integration.

You can expose a pop-up message by triggering an event delivered through the DFINERY SDK, and all settings can be made in the DFINERY console.

[[Quote:Guide:Normal]] The popup message feature is available from AdBrix React-Native SDK version 2.3.0 and above.

Popup message deep link

If you use the deep link set in the popup message, the deep link listener code will be called.

// App.js 
import AdbrixRm from 'react-native-adbrix-remaster'

useEffect(() => {
    const deeplinkListener = AdbrixRm.deeplinkListener((e) => { 
        console.log(e.deeplink) 
    })
    return () => { 
        deeplinkListener.remove()
    }
  }, [])

Please note that the deep link code of the native OS is also called, so be careful with the settings.

Click Event Listener

The users pop-up message click event is delivered through the configured listener.

You can define additional actions for the click event using this listener.

React-Native

Add an in-app message listener within the React-Native project.

//App.jsuseEffect(() => { const iamClickListener = AdbrixRm.inAppMessageClickListener((arg) => {
    console.log(arg.actionId);
    console.log(arg.actionType);
    console.log(arg.actionArg);
    console.log(arg.isClosed);
 })}, []);

Click Listener Pass Value Details

The type and example of the value passed through the click listener are as follows.

• 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): Whether the popup message is closed.