Linking Growth Action [React-Native]

Getting Started

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

[Learn about Growth Action service]

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

[[Quote: Guide: Normal]] To use Growth Action, you must use the DFINERY paid plan.[ Inquire about usage ]

Required items

Definery SDK integration is required to link the growth action feature of Definery (Adbrix) .
The basic adbrix integration steps must be completed to enable growth action integration.

• Dfinery (Adbrix) Basic SDK - Integrating Dfinery [React Native]

Android Push Service Settings

To use Growth Action in React-Native, you need to set up push message reception 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

[[Quote:Risk:Moderate]] Notice
The sending method using Firebase Server Key and Sender ID will be discontinued 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 Definery Growth Action, you need to register the Firebase Server Key / Sender ID in the Definery Console .
Firebase Server Key / Server ID can be found in the Firebase console -> Settings -> Cloud Messaging.

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

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

Issuing a Firebase Certificate

1. Access the service account .

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

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

3.Click the ⋮ in the bottom right corner of the task.

4.Click on Key Management in the dropdown.

5.Select Add Key.

If a key has already been generated, it means that there is a history of an existing key being created, and you can use that key.If the key cannot be found, please create a new key.

6.Click Create New Key in the dropdown.

7.Select JSON and click Create.

8.The key issuance is complete.

Registering Firebase Certificate in Console

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

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.Press the confirm button after completing the upload.

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 have written.

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 Firebase Token value in adbrix, add the Token value using ReactAdbrix.setRegistrationId within the 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.

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

Push Icon and Color Settings

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

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

This configured push icon will be displayed as follows.

[[Quote:Risk: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 for all resolutions.
3) If the largeIcon is set in the server push, that icon will be displayed first.

Push Channel Settings

To create notifications on Android 8.0 and above, you need to 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 1 channel is created)

//App.js
let 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

Register APNS Certificate

Register the certificate to use the iOS Growth Action service.

Register in the Definery 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 Production type.
- iOS Growth Action Server Push works only in the Production environment. - The iOS Growth Action Server Push only works in the Production environment.

Add Capability

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

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

Add Notification Service Extension

Add 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 Product Name and complete

d. Add AdBrixRmKit.xcframework to the General settings of the corresponding 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 respective folder and modify it as follows.

//NotificationService.h

#import <UserNotifications/UserNotifications.h>
#import <AdBrixRmKit/AdBrixPushServiceObjC.h>

@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 following content in AppDelegate.

a. Retrieve Device Token value

#import <react-native-adbrix-remaster/ReactAdbrix.h>

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

b. Add push On / Off functionality according to user notification permission consent 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];
       }
       
   }];
   
   ...
   
}

Alternatively, 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 Growth Action service. You can manage the push service with this API.

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

[[Quote:Warning:Normal]] Check default settings
The default setting of Definery is 'Push off'.
Therefore, after completing the integration with Growth Action, you must call the setPushEnable API after obtaining push reception consent from users.
Even users who have previously consented to receive push notifications must call the setPushEnable API to receive push notifications.

Push Notification Listener

Set up a listener for the push service.Through this, you can receive deep link information contained in the push.After adding the 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 Unsubscription Settings

In order to integrate the DFINERY Growth Action feature, you need to set up a subscription for notifications.In the SDK, it is possible to subscribe and unsubscribe to not only push notifications but also other channels, and it also provides the functionality to retrieve the currently set values.

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

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 (superior item of advertising notification)
• setMarketingNotificationFlag : Advertising notification (hereinafter referred to as the upper item of the advertising (nighttime advertising) notification channel)
• setMarketingPushNotificationFlag : Advertising Notification Push Channel
• setMarketingKakaoNotificationFlag : Advertising notification Kakao Alimtalk channel
• setMarketingSMSNotificationFlag : Marketing Notification SMS Channel
• setMarketingNightNotificationFlag : Nighttime advertising notification (hereinafter referred to as the top item of the nighttime notification channel)
• setMarketingNightPushNotificationFlag : Nighttime advertising push notification channel
• setMarketingNightKakaoNotificationFlag : Nighttime promotional notification SMS channel
• setMarketingNightSMSNotificationFlag : Nighttime Advertising Notification AlimTalk Channel

[[Quote:Warning:Normal]] Each top-level item's consent should take precedence over the lower-level 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 has not been 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 object 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 push notification channel
• getMarketingKakaoNotificationFlag : Advertising Notification Kakao Notification Talk Channel
• getMarketingSMSNotificationFlag : Marketing Notification SMS Channel
• getMarketingNightNotificationFlag : Nighttime marketing notification
• getMarketingNightPushNotificationFlag : Nighttime advertising push notification channel
• getMarketingNightKakaoNotificationFlag : Nighttime advertising notification SMS channel
• getMarketingNightSMSNotificationFlag : Nighttime advertising notification Alimtalk channel
• Example of the 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 the 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 using SMS.*PHONE_NUMBER: E.164 compliant country code + number excluding "+" (example: 8210********)

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

팝업 메시지

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 in AdBrix React-Native SDK version 2.3.0 or higher.

Popup message deep link

When using the deep link set in the popup message, the deep link listener code is called.

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

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

Since the deep link code of the native OS is also called, please pay attention to 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 in 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 Passed 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.