React Native SDK (v4)

NPM Version

Attention

This is a guide for installing and setting up the React Native SDK v4. For previous versions, refer to the React Native SDK (v1) guide.

Install the Airbridge React Native SDK and implement the necessary settings following the steps below.

Install SDK

The Airbridge React Native SDK can be installed using the method below. After installation, you can verify whether the SDK has been properly installed through a React Native SDK Test.

1. Install airbridge-react-native-sdk using npm.

1
npm install airbridge-react-native-sdk

2. Install iOS dependencies using CocoaPods. Android dependencies are installed automatically.

1
cd ios; pod install

Install Restricted SDK

Attention

Install only one version of the SDK, either the general SDK or the restricted SDK.

Depending on policies and environments, restrictions on collecting device IDs like GAID and IDFA may be required. When installing the Restricted SDK version, the device IDs are not collected.

Install the Restricted SDK using the method below.

1. Install airbridge-react-native-sdk using npm.

1
npm install airbridge-react-native-sdk-restricted

2. Install iOS dependencies using CocoaPods. Android dependencies are installed automatically.

1
cd ios; pod install

Initialize SDK

The initialization methods for iOS and Android SDKs are different. Refer to the information below. The YOUR_APP_NAME and YOUR_APP_SDK_TOKEN can be found on the [Settings]>[Tokens] page in the Airbridge dashboard.

iOS

Add the following code to the ios/YOUR_PROJECT_NAME/AppDelegate.m file.

123456
import AirbridgeReactNative
...
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    AirbridgeReactNative.initializeSDK(name: "YOUR_APP_NAME", token:"YOUR_APP_SDK_TOKEN")
    ...
}

Android

Add the following code to the android/app/src/main/java/.../MainApplication.kt file.

1234567
import co.ab180.airbridge.reactnative.AirbridgeReactNative
...
override fun onCreate() {
    super.onCreate()
    AirbridgeReactNative.initializeSDK(this, "YOUR_APP_NAME", "YOUR_APP_SDK_TOKEN")
    ...
}

Configure SDK settings

Configure the SDK settings to use the Airbridge React Native SDK.

12345678910111213141516171819
{
    "sdkEnabled": boolean,
    "logLevel": "debug" | "info" | "warning" | "error" | "fault",
    "autoStartTrackingEnabled": boolean,
    "autoDetermineTrackingAuthorizationTimeoutInSecond": number,
    "trackMetaDeferredAppLinkEnabled": boolean,
    "sessionTimeoutInSecond": number,
    "metaInstallReferrerAppID": string,
    "trackAirbridgeDeeplinkOnlyEnabled": boolean,
    "trackInSessionLifecycleEventEnabled": boolean,
    "hashUserInformationEnabled": boolean,
    "sdkSignatureID": string,
    "sdkSignatureSecret": string,
    "clearEventBufferOnInitializeEnabled": boolean,
    "eventBufferCountLimit": number,
    "eventBufferSizeLimitInGibibyte": number,
    "eventTransmitIntervalInSecond": number,
    "isHandleAirbridgeDeeplinkOnly" : boolean
}

1. Create an airbridge.json file at the top level of the React Native project folder, input the JSON as above, and configure the SDK settings.

2. Don't input values for keys that are not necessary for your service.

Refer to the links below for detailed guidance on the individual key values.

Configure ATT prompt

Note

The functions necessary to ensure compliance with privacy policies should be reviewed with legal counsel.

In the iOS environment, the IDFA can only be collected when users provide consent for data tracking through the AppTrackingTransparency (ATT) prompt.

Event collection should be delayed until the user allows tracking. If the install event is collected before the user allows tracking through the ATT prompt, the install event data will lack an identifier, making performance measurement difficult. We recommend setting a sufficient delay time for event collection to collect identifiers.

1. Prepare the text you will use in the ATT prompt.

2. Provide the ATT prompt following this guide provided by Apple.

3. If the install event is not collected, the Airbridge React Native SDK delays collecting install events for 30 seconds until the user allows tracking each time the app is launched. If the user exits the app before deciding whether to allow tracking, the SDK will not collect the install event and will try again at the next app launch.

In the SDK settings, configure the autoDetermineTrackingAuthorizationTimeout to set a sufficient delay time for collecting install events. The default value is 300 seconds, and it can be set up to 3600 seconds (1 hour).

Attention

Set a sufficient delay time to collect the app install event. If the SDK collects install events before users can allow tracking on the ATT prompt, the IDFA will not be collected along with the install events.

Opt-in setup

Attention

Optional settings. Configure only if necessary.

The opt-in policy requires user consent before using user data.

In the SDK settings, set the autoStartTrackingEnabled to false and call the startTracking function at the point of time when you can collect events. The SDK will start collecting events when the startTracking function is called.

123
import { Airbridge } from 'airbridge-react-native-sdk'
...
Airbridge.startTracking()

Opt-out setup

Attention

Optional settings. Configure only if necessary.

The opt-out policy allows the use of user information until the user explicitly declines.

In the SDK settings, set the autoStartTrackingEnabled to true and call the stopTracking function at the point of time when you can no longer collect events. The SDK will stop collecting events when the stopTracking function is called.

123
import { Airbridge } from 'airbridge-react-native-sdk'
...
Airbridge.startTracking()

SDK Signature

Attention

Optional settings. Configure only if necessary.

With the SDK Signature, you can prevent SDK spoofing and use verified events to measure ad performance.

The SDK Signature credentials, which are the Secret ID and the Secret, are required for the SDK Signature setup. They can be found on the [Management]>[Fraud Validation Rules]>[SDK Signature] page in the Airbridge dashboard. For more details on how to find the SDK Signature credentials, refer to this Airbridge guide.

Once you have the credentials, go to the SDK settings and enter the Secret ID as sdkSignatureID and the Secret as sdkSignatureSecret.

Deep Linking

Deep linking allows you to redirect users from ads to specific locations within your app. The data collected from the tracking link enables you to monitor the performance of the deep link in Airbridge.

When a user clicks on the Airbridge tracking link, the scheme deep link embedded in the tracking link is converted into an Airbridge Deep Link, which can be either an HTTP deep link or a scheme deep link. This Airbridge Deep Link redirects the user to the desired app location. Then, the Airbridge SDK converts the Airbridge Deep Link back to the original scheme deep link embedded in the tracking link and passes it to the app.

  • Example scheme deep link embedded in the tracking link: YOUR_SCHEME://product/12345

  • Examples of Airbridge Deep Links

    • HTTP deep link format 1: https://YOUR_APP_NAME.airbridge.io/~~~

    • HTTP deep link format 2: https://YOUR_APP_NAME.abr.ge/~~~

    • Scheme deep link format: YOUR_SCHEME://product/12345?airbridge_referrer=~~~

When the app is installed on the device and the tracking link is clicked, the app opens through the Airbridge Deep Link. The Airbridge SDK converts the Airbridge Deep Link into the scheme deep embedded in the tracking link and passes it to the app.

When the app is not installed on the device and the tracking link is clicked, the Airbridge SDK saves the Airbridge Deep Link is saved. After the user is redirected to the app store or website and the app is installed and launched, the Airbridge SDK converts the saved Airbridge Deep Link into the scheme deep embedded in the tracking link and passes it to the app.

Set up deep linking

For the deep linking setup, the following information is required.

  • Deep link information submitted in the Airbridge dashboard

  • In-app location address for user redirection

First, submit the deep link information to the Airbridge dashboard.

After entering the deep link information into the Airbridge dashboard, an additional setup is required to enable the following.

  • App launch with Airbridge Deep Links

  • Airbridge Deep Link event collection

  • User redirection with Airbridge Deep Links

For detailed instructions, refer to the information below.

Set up deferred deep linking

When a user clicks on a tracking link with deferred deep linking capabilities and your app is not installed on the device, the Airbridge SDK collects the deep link as follows.

Deferred deep links are automatically passed to OnDeeplinkReceived, so no additional setup is required.

In-app Events

The Airbridge SDK collects user actions from the app as per settings and sends them as in-app events.

Send in-app events

SDK setup for hybrid apps

You can set up the React Native SDK to handle Airbridge-related tasks within the in-app website without changing the website's code for your hybrid app.

Call the Airbridge.trackEvent function to send events. Refer to the information below about the required Airbridge.trackEvent function components and their types.

1234567891011121314
static trackEvent(
    category: string,
): void

static trackEvent(
    category: string,
    semanticAttributes: Record<string, any>,
): void

static trackEvent(
    category: string,
    semanticAttributes: Record<string, any>,
    customAttributes: Record<string, any>,
): void

Component

Required or Optional

Type

Description

category

Required

String

Event name

semanticAttributes

Optional

Record<string, any>

Semantic attributes of the events

customAttributes

Optional

Record<string, any>

Custom attributes of the event

Refer to the component definition and available strings below.

The Event Category of Standard Events and Semantic Attributes provided by the SDK are as follows.

Refer to the example codes for each data type below.

123456789101112131415
import { Airbridge, AirbridgeAttribute } from 'airbridge-react-native-sdk'
...
Airbridge.trackEvent(
    'event',
    {
        [AirbridgeAttribute.VALUE]: 10,
    },
    {
        'string': 'string',
        'number': 1000,
        'boolean': true,
        'object': {'key': 'value'},
        'array': ['value'],
    },
)

Additional in-app event settings

Attention

The default settings will apply if no additional settings are configured. Proceed after reviewing whether additional settings are necessary.

Configure additional settings for sending in-app events if necessary.

Example codes

Airbridge collects in-app events that are classified as Standard Events and Custom Events. Standard Events are events predefined by Airbridge. Refer to the example codes below.

Custom Events are events defined by Airbridge users to track user actions that are unique to their services. Refer to the example code below.

123456789101112131415
import { Airbridge, AirbridgeAttribute } from 'airbridge-react-native-sdk'
...
Airbridge.trackEvent(
    'event',
    {
        [AirbridgeAttribute.VALUE]: 10,
    },
    {
        'string': 'string',
        'number': 1000,
        'boolean': true,
        'object': {'key': 'value'},
        'array': ['value'],
    },
)

User Data

Airbridge sends user data along with events. User data allows for a more accurate ad performance measurement.

Set up User ID

User IDs refer to the user identifier used in a service. User IDs should be unique IDs that can identify unique users across websites and apps.

#{"width":"140px"}

Function

#{"width":"240px"}

Description

Airbridge.setUserID

Inputs the user ID.

Airbridge.clearUserID

Deletes the user ID.

Airbridge.setUserAlias

Adds additional user identifiers. Up to 10 items can be added.

- key: Up to 128 characters. Must follow the regular expression ^[a-zA-Z_][a-zA-Z0-9_]*$.

- value: Up to 1024 characters.

Airbridge.removeUserAlias

Deletes only specified identifiers.

Airbridge.clearUserAlias

Deletes all additional user identifiers.

Refer to the example below.

123456789
import { Airbridge } from 'airbridge-react-native-sdk'
...
// identifier
Airbridge.setUserID('string')
Airbridge.clearUserID()
// addtional identifier
Airbridge.setUserAlias('string', 'string')
Airbridge.removeUserAlias('string')
Airbridge.clearUserAlias()

Send additional user information

Attention

Sensitive user information may be included. Send after a thorough review with a legal advisor.

Refer to the functions below to send additional user information.

#{"width":"140px"}

Function

#{"width":"240px"}

Description

Airbridge.setUserEmail

Inputs user's email. The data is hashed using SHA256.

Airbridge.clearUserEmail

Deletes the user email.

Airbridge.setUserPhone

Inputs user's phone number. The data is hashed using SHA256.

Airbridge.clearUserPhone

Deletes the user's phone number.

Airbridge.setUserAttribute

Adds additional user attributes. Up to 100 items can be added.

- key: Up to 128 characters. Must satisfy the regular expression: ^[a-zA-Z_][a-zA-Z0-9_]*$.

- value: Only supports string, number, and Boolean types. Up to 1024 characters.

Airbridge.removeUserAttribute

Deletes only specified attributes from the additional attributes.

Airbridge.clearUserAttributes

Deletes all additional user attributes.

Refer to the example below.

123456789101112
import { Airbridge } from 'airbridge-react-native-sdk'
...
// email, phone
Airbridge.setUserEmail('string')
Airbridge.clearUserEmail()
Airbridge.setUserPhone('string')
Airbridge.clearUserPhone()
// addtional attribute
Airbridge.setUserAttribute('string', 'string')
Airbridge.setUserAttribute('number', 1000)
Airbridge.removeUserAttribute('string')
Airbridge.clearUserAttributes()

Hash user information

When hashUserInformationEnabled is set to false in the SDK settings, user emails and phone numbers are passed without being hashed. The default setting is true.

Clear user data

You can reset user information with the Airbridge.clearUser function.

123
import { Airbridge } from 'airbridge-react-native-sdk'
...
Airbridge.clearUser()

Additional SDK Settings

Follow the instructions below for additional setup.

Attention

Optional settings. Configure only if necessary.

Note

The Airbridge React Native SDK must be v4.1.2 or later.

The deep links passed through the setOnDeeplinkReceived method of the Airbridge React Native SDK include not only Airbridge Deep Links but also deep links from other solutions.

12345
import { Airbridge } from 'airbridge-react-native-sdk';
...
Airbridge.setOnDeeplinkReceived((url) => {
    // show proper content using url
})

By configuring isHandleAirbridgeDeeplinkOnly to true in the SDK settings, only Airbridge Deep Links will be passed to the setOnDeeplinkReceived callback. In this way, you can handle the deep links from other solutions separately from the Airbridge Deep Links.

Depending on how links are opened, it may be challenging to properly use the tracking link within the app.

By using the Airbridge.click function or the Airbridge.impression function, you can properly use the tracking link within the app without sending users to an external browser.

Attention

When you set up the Airbridge SDK to use tracking links within apps, every time a tracking link is used within the app, Deeplink Pageviews are aggregated as Target Events. The deep link performance may be affected when Deeplink Pageviews occur frequently right after Deeplink Opens.

The attribution window for Deeplink Pageviews is set to 3 days by default. If you want to change the attribution window for Deeplink Pageviews, contact your Airbridge CSM. If you don't have a designated CSM, contact the Airbridge Help Center.

Get attribution results

Attention

It takes some time for the Airbridge SDK to collect attribution results. We do not recommend using attribution results for functionalities requiring real-time processing.

Use the Airbridge.setOnAttributionReceived function to get the attribution data of install events.

12345
import { Airbridge } from 'airbridge-react-native-sdk'
...
Airbridge.setOnAttributionReceived((attribution) => {
    // when attribution is received
})

Depending on whether the attribution result exists or not, data is passed as follows.

When a user clicks a push notification, the deep link information in the payload should be passed to the Airbridge SDK to enable the collection of deep link events. Use the Airbridge.trackDeeplink function.

iOS

Add the following code to the ios/YOUR_PROJECT_NAME/AppDelegate.m file.

12345678910111213141516171819202122232425262728
import Airbridge

func application(
    _ application: UIApplication,
    didReceiveRemoteNotification userInfo: [AnyHashable : Any],
    fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void
) {
    if UIApplication.shared.applicationState == .inactive {
        let url = // 푸시 알림 페이로드의 딥링크

        Airbridge.trackDeeplink(url)
    }
}

func userNotificationCenter(
    _ center: UNUserNotificationCenter,
    didReceive response: UNNotificationResponse,
    withCompletionHandlercompletionHandler: @escaping () -> Void
) {
    if 
        UIApplication.shared.applicationState == .inactive || UIApplication.shared.applicationState == .background,
        response.actionIdentifier == UNNotificationDefaultActionIdentifier
    {
        let url = // 푸시 알림 페이로드의 딥링크

        Airbridge.trackDeeplink(url)
    }
}

Android

No setup is required as the events are automatically collected on Android.

The Airbridge SDK collects deep link events when the app is opened through a deep link, even if the deep link is not an Airbridge Deep Link. Configure trackAirbridgeDeeplinkOnlyEnabled in the SDK settings to true to collect deep link events only if the app is opened through an Airbridge Deep Link and prevent unnecessary event collection.

Collect in-session lifecycle events

The Airbridge SDK collects Open and Foreground events that initiate a new session. These events are not collected during an ongoing session.

By configuring the trackInSessionLifecycleEventEnabled in the SDK settings to true, the Open and Foreground events can be collected during ongoing sessions.

All collected Foreground events are recorded as Open events.

Compliance with Google DMA

To comply with the Digital Markets Act (DMA), the user consent data must be sent to Airbridge. For more information about the DMA and whether it applies to your service, refer to the Airbridge user guide.

If you are in the European Economic Area (EEA), the user consent data must be sent to Airbridge at all times.

1. Confirm whether the end user launched the app in the EEA. If the end user did launch the app in the EEA (eea=1), confirm whether the consent values have already been stored for the session. If consent values are stored, proceed to Step 3.

If the user launched the app from outside the EEA, user consent data collection is not mandatory.

Note

Airbridge cannot provide guidance on storing the user consent data and implementing the prompts. For assistance, consult legal professionals.

2. If no consent values are stored, collect user consent data using means such as a prompt. The adPersonalization and adUserData values should be collected in this step.

3. Configure the autoStartTrackingEnabled in the SDK settings to false.

4. After the SDK initialization, the user consent data must be passed to Airbridge before the user data collection.

Attention

Ensure to follow the instructions below.

  • Use the field names specified by Airbridge: eea, adPersonalization, adUserData

  • Input 0 or 1 following the consent data collected.

12345678910
import { Airbridge } from 'airbridge-react-native-sdk'
...
// deliver informations to sdk using device alias
// based on actual region
Airbridge.setDeviceAlias('eea', '0' or '1')
// based on actual user consent
Airbridge.setDeviceAlias('adPersonalization', '0' or '1')
Airbridge.setDeviceAlias('adUserData', '0' or '1')
// start tracking explicitly
Airbridge.startTracking()

Attention

Upon completing the SDK setup to use Meta deferred app links, Facebook SDK's fetchDeferredAppLink function should not be used.

Follow the steps below to use deferred deep linking in Meta ads. The Airbridge SDK collects the Meta deferred app links before the Airbridge deferred deep links. If there are no Meta deferred app links, the Airbridge deferred deep links are collected.

Note that Meta does not support Meta deferred app links for SKAdNetwork campaigns.

1. Refer to the Meta ads document and install the Facebook SDK.

2. Configure the trackMetaDeferredAppLinkEnabled in the SDK settings to true.

Initialize the Airbridge SDK with all functions disabled

Attention

If the SDK is not enabled immediately after the SDK initialization, the Install, Open, and Deeplink Openbvevents may not be collected.

Upon initialization, all functions of the SDK are enabled by default. By configuring sdkEnabled in the SDK settings to false, the SDK can be initialized with all functions disabled.

You can also check the activation status of the Airbridge SDK and enable or disable all functions, as in the following example.

12345
import { Airbridge } from 'airbridge-react-native-sdk'
...
Airbridge.isSDKEnabled()
Airbridge.enableSDK()
Airbridge.disableSDK()

Set up Meta Install Referrer collection

To collect the Meta Install Referrer, enter the Meta App ID as the key value for metaInstallReferrerAppID in the SDK settings.

Note that the decryption key must be submitted to the Airbridge dashboard to read the decrypted Meta Install Referrer. Refer to this user guide to learn how to enter the decryption key.

Set up uninstall tracking

Airbridge sends a silent push every day between 3:00 PM and 4:00 PM (UTC) to users who performed an app event at least once in the last 6 months to check if the app has been deleted. You can check the uninstall event in the Airbridge reports and raw data export files.

Refer to the article below for the detailed setup instructions.

Integrate with third-party solutions

An additional SDK setup is required to integrate with some third-party solutions. It is recommended that you complete this setup before collecting data with the Airbridge SDK.

Refer to the articles listed below for integrating with third-party solutions.

SDK logs

The logs provided by the Airbridge SDK are categorized into Debug, Info, Warning, Error, and Fault levels. The Debug level is the least critical log, while the Fault level is the most critical log.

By default, the Airbridge SDK provides logs at Warning, Error, and Fault levels. By entering a specific log level as the setLogLevel value in the SDK settings, the logs from that specified level up to the Fault level will be available.

Was this page helpful?

Have any questions or suggestions?