Integrating Growth Action [React-Native]

Getting started

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

[Learn about Growth Action services]

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.[ Contact Us ]

Required

In order to integrate the DFINERY growth action function, integration with the DFINERY (Adbrix) SDK is required.
You must complete the basic adbrix integration steps to be able to integrate with Growth Action.

• DFINERY (Adbrix) basic SDK - Integrating DFINERY [React Native]

Set up Android push service

In order to use Growth Action in React-Native, settings for receiving push messages are required 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 a Firebase Cloud Messaging client app on Android

[[Quote:Danger:Moderate]] Caution
The sending method using Firebase Server Key and Sender ID will be discontinued after June 13, 2024 due to the discontinuation of support for Firebase's existing HTTP API. Please link according to the Firebase certificate issuance and registration guide introduced below.

View previous linking methods

Register Firebase Server Key and Sender ID

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

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

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

Issue a Firebase certificate

1. Log in to 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. Refer to Add Firebase to your Android project to create a Firebase project.

3. Click ⋮ in the Actions section at the bottom right.

4. Click Key Management from the dropdown.

5. Select Add Key.

If there is a key that has already been generated, it means that there is a history of generating a key in the past and you can use that key. If you cannot find the key, please generate a new key.

6. Click Create New Key from the dropdown.

7. After selecting JSON, click Create.

8. Key issuance has been completed.

Register in the Firebase Certificates Console

[[Quote:Warning:Normal]] Console Settings Open Date
The ability to register Firebase certificates in the console will be available on June 13th.

1.Connect to the console .

2. In the left panel, click Settings under GrowthAction.

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

4. Click the Upload button to upload your key.

5. After uploading is complete, click the Confirm button.

6. Click Save to apply the certificate.

7. The certificate has been registered in the console.

Push reception settings

Register the receiver below in AndroidManifest.xml.

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

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 value setting

To set the Firebase Token value in adbrix, add the Token value using ReactAdbrix.setRegistrationId in 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 use 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 this way is displayed as shown below.

[[Quote:Risk:Moderate]] Caution
1) Enter only the image file name without the extension.
2) You need to add all images with that name to the Drawable folder in your android project within your React-Native project for all resolutions.
3) If largeIcon is set in server push, the icon will be displayed with priority.

Push channel settings

To create a notification 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 whether to vibrate for the notification channel . (Only 1 channel is created)

//App.js
let channelName = "test channel name";
let channelDescription = "channel Description";

ReactAdbrix.createNotificationChannel(channelName, channelDescription);

Or, it can be generated through react-native level javascript code.

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

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

iOS push service settings

APNS certificate registration

Register a certificate to use the iOS Gross Action service.

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

[[Quote:Warning:Normal]] Please check.
- You must register a p12 certificate without a password.
- p12 certificate must be registered as Production type.
- iOS Gross Action Server Push only works in Production environments. - iOS Gross Action Server Push only works in Production environments.

Add Capability

Complete the following to integrate with iOS Gross Action Service.

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

Add Notification Service Extension

Add Notification Service Extension for using GrossActions on 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 Extension.
The framework is currently located in the Pods -> AdBrixRmKit folder of your project.

e. Once the Extension settings are complete, open the NotificationService file that was automatically added to the folder and modify it as follows.

//NotificationService.h
      
#import 
#import 

@interface NotificationService : AdBrixPushServiceObjC

@end


//NotificationService.m

#import "NotificationService.h"

@implementation NotificationService

@end

Edit AppDelegate

To use the iOS gross action service, add and modify the following contents to AppDelegate.

a. Get Device Token value

#import 

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

b. Add push On / Off function according to user notification permission consent in didFinishLaunchingWithOptions

//AppDelegate.h
#import 
#import 

#import 

@interface AppDelegate : RCTAppDelegate 
@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 react-native level javascript code provided as follows.

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

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

c. Link the push click listener code with the code that determines whether to expose the push 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 linked to use the adbrix gross 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 for Definery is 'Push off'.
Therefore, after completing the gross action integration, you must call the setPushEnable API after receiving consent from users to receive push notifications.
Users who have previously agreed to receive push notifications must also 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 from pushes that include deep links. The push listener adds the listener to React-Native after adding settings in the Android / iOS project.

React-Native

Once Andoid/iOS setup is complete, add a 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 rejection settings for channels other than push, and also provides a function to retrieve the currently set value.

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

Subscribe to and opt out of 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 advertising notification)
• setMarketingNotificationFlag: Advertising notification (hereinafter referred to as the parent item of the advertising (night advertising) notification channel)
• setMarketingPushNotificationFlag: Advertising notification push channel
• setMarketingKakaoNotificationFlag: Advertising notification Kakao Notification Talk channel
• setMarketingSMSNotificationFlag: Advertising notification SMS channel
• setMarketingNightNotificationFlag: Night advertising notification (hereinafter referred to as the parent item of the night notification channel)
• setMarketingNightPushNotificationFlag: Night advertising notification push channel
• setMarketingNightKakaoNotificationFlag: Night advertising notification SMS channel
• setMarketingNightSMSNotificationFlag: Night advertising notification notification channel

[[Quote:Warning:Moderate]] The agreement of each parent item must take precedence over the agreement of its children. Therefore, if the informational flag is UNSUBSCRIBED, the push will not be sent even if the advertising 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 obj containing all the statuses
    console.log(subscriptionStatus.getObj())
    // or    
    subscriptionStatus.getInformativeNotificationFlag()
    // returns "SUBSCRIBED" or "UNSUBSCRIBED" or "UNDEFINED"
}).catch(e => {
    console.log(e) // error message from server
});

• getInformativeNotificationFlag: Informative notification
• getMarketingNotificationFlag: Advertising notification
• getMarketingPushNotificationFlag: Advertising notification push channel
• getMarketingKakaoNotificationFlag: Advertising notification Kakao Notification Talk channel
• getMarketingSMSNotificationFlag: Advertising notification SMS channel
• getMarketingNightNotificationFlag: Nighttime advertising notification
• getMarketingNightPushNotificationFlag: Night advertising notification push channel
• getMarketingNightKakaoNotificationFlag: Night advertising notification SMS channel
• getMarketingNightSMSNotificationFlag: Night advertising notification notification channel
• getObj() result value example

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

These are settings 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

Settings for using SMS. *PHONE_NUMBER: E.164 compliant country code + number minus “+” (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 pop-up message feature is available in AdBrix React-Native SDK version 2.3.0 or higher.

Pop-up message deep link

When using a deep link set in a pop-up 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()
 }
  }, [])

[[Quote:Guide:Normal]] Please be careful with the settings as the deep link code of the native OS is also called.

click event listener

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

You can use this listener to define additional actions for click events.

React-Native

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

//App.js
useEffect(() => {
 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 types and examples of values ​​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 pop-up message has been closed.