React Native SDK

SDK 설치


패키지 설치

npm

npm 을 이용하여 Airbridge 의 react-native SDK 를 설치해주세요.

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

아래와 같은 명령어를 실행해주세요.

12
cd ios
pod install

프로젝트 설정

import

프로젝트의 index.js 에 아래와 같은 코드를 통해 SDK 객체를 획득 해주세요.

1
import Airbridge from 'airbridge-react-native-sdk';

Android

MainApplication.java

android/app/src/main/java/.../MainApplication.java 파일의 onCreate 함수에 아래와 같은 코드를 추가해주세요.

12345678910
import co.ab180.airbridge.reactnative.AirbridgeRN;

//...

@Override
public void onCreate() {
    super.onCreate();
    AirbridgeRN.init(this, "YOUR_APP_NAME", "YOUR_APP_TOKEN");
    ...
}

YOUR_APP_NAME과 YOUR_APP_SDK_TOKENAirbridge 대시보드Settings > Tokens 탭에서 확인하실 수 있습니다.

iOS

AppDelegate.m

ios/[프로젝트 이름]/AppDelegate.m 파일의 import 부분에 아래와 같은 코드를 추가해주세요.

1
#import <AirbridgeRN/AirbridgeRN.h>

ios/[프로젝트 이름]/AppDelegate.m 파일의 application:didFinishLaunchingWithOptions: 함수에 아래와 같은 코드를 추가해주세요.

1234
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [AirbridgeRN getInstance:@"YOUR_APP_TOKEN" appName:@"YOUR_APP_NAME" withLaunchOptions:launchOptions];
    ...
}

YOUR_APP_NAME과 YOUR_APP_SDK_TOKENAirbridge 대시보드Settings > Tokens 탭에서 확인하실 수 있습니다.

공통 설정

airbridge.json

  1. 프로젝트 폴더에 airbridge.json파일을 생성해주세요.

  2. JSON 형식으로 설정값을 넣어주세요.
    React Native 0.59.X 이하 버전을 사용하는 경우, 아래 설정도 필요합니다.

    1. Xcode > Project 파일 > Build Phases > Copy Bundle Resources 로 이동해주세요.

    2. +버튼을 눌러 airbridge.json 파일을 추가해주세요.

Example
12345678910111213
{
    "sessionTimeoutSeconds": 300,
    "autoStartTrackingEnabled": true,
    "userInfoHashEnabled": true,
    "trackAirbridgeLinkOnly": false,
    "facebookDeferredAppLinkEnabled": false,
    "metaInstallReferrer": "YOUR_META_APP_ID",
    "sdkSignatureSecretID": "YOUR_SDK_SIGNATURE_SECRET_ID",
    "sdkSignatureSecret": "YOUR_SDK_SIGNATURE_SECRET",
    "locationCollectionEnabled": false,
    "trackingAuthorizeTimeoutSeconds": 30,
    "logLevel": "warning"
}

주의하세요

위 코드 중 trackingAuthorizeTimeoutSeconds 값은 Tracking Authorized Timeout 시간의 기본 값인 30000밀리초(ms)입니다. 실제로 활용할 때는 반드시 앱의 UX(사용자 경험)와 ATT 프롬프트 설정에 맞게 값을 바꿔야 합니다. Tracking Authorized Timeout에 관한 추가적인 내용은 React Native SDK 가이드 하단의 Tracking Authorize Timeout 설정 (iOS 전용)을 참고 바랍니다.

이름

타입

기본값

설명

sessionTimeoutSeconds

Number

300

설정한 세션기간 내에 유저가 앱을 재실행하는 경우에는, 같은 세션으로 판단하여 앱 실행 이벤트를 전송하지 않습니다.

autoStartTrackingEnabled

Boolean

true

false 로 설정하면, Airbridge.state.startTracking() 을 호출하기 전까지 이벤트를 전송하지 않습니다.

userInfoHashEnabled

Boolean

true

false 로 설정하면, User Email 및 User Phone 정보를 Hash 하지않고 이벤트를 전송합니다.

trackAirbridgeLinkOnly

Boolean

false

true 로 설정하면, Airbridge 딥링크로 앱이 열린 경우에만 딥링크 이벤트를 전송합니다.

facebookDeferredAppLinkEnabled

Boolean

false

true 로 설정하고 Facebook SDK 가 설치되어 있으면, Facebook Deferred AppLink 를 수집합니다.

metaInstallReferrer

String

null

메타 인스톨 리퍼러(Meta Install Referrer) 수집 설정을 합니다. (Android 전용) metaInstallReferrer 키 대신 facebookInstallReferrer 를 사용 할 수 있습니다. 두 개의 키가 모두 적용 되었을 시 metaInstallReferrer 를 적용합니다.
해당 기능은 airbridge-react-native-sdk version v2.6.0 부터 사용 가능 합니다.

locationCollectionEnabled

Boolean

false

true 로 설정하면, 해당 기기의 위치 정보를 수집합니다. (Android 전용)
사용하기 위해서는 AndroidManifest.xml 에 아래 2개 권한이 필요합니다.
android.permission.ACCESS_FINE_LOCATION
android.permission.ACCESS_COARSE_LOCATION

trackingAuthorizeTimeoutSeconds

Number

30

timeout 을 설정하면, 설치 이벤트를 전송하기 전에 timeout 만큼 추적 허용 선택창이 선택될 때 까지 기다립니다. (iOS 전용)

sdkSignatureSecretID

String

null

SDK spoofing 방지 기능을 동작 합니다. 발급 받은 SDK Signature Secret ID, Secret key 가 동시에 적용 되어야 합니다.

sdkSignatureSecret

String

null

SDK spoofing 방지 기능을 동작 합니다. 발급 받은 SDK Signature Secret ID, Secret key 가 동시에 적용 되어야 합니다.

logLevel

String

warning

Airbridge log 출력 level 을 설정 합니다.
logLevel: "debug" | "info" | "warning" | "error" | "fault"

SDK 설치 확인

앱을 설치하고 실행 했을때 Install 이벤트가 전송되는지 확인해주세요.

대시보드로 확인

SDK 에서 발생한 Event 들은 에어브릿지 대시보드 > Raw Data > App Real-time Logs 에 출력됩니다. 로그 노출은 최대 5분 가량 지연될 수 있습니다.

  1. Airbridge 대시보드 > Raw Data> App Real-time Logs항목을 클릭해 주세요.

  2. 검색어 입력iOS IDFA또는 Android GAID를 입력해 주세요.

딥링크 설정

대시보드 설정

딥링크 설정을 위해 에어브릿지 대시보드에서 아래 가이드에 따라 진행해주세요.

프로젝트 설정

Javascript

setDeeplinkListener

딥링크 또는 지연된 딥링크가 발생할 때 마다 호출되는 함수를 등록합니다.

123456
Airbridge.deeplink.setDeeplinkListener((deeplink) => {
    // `딥링크` 또는 `지연된 딥링크` 가 발생했을 때, 작동할 코드
    // deeplink = YOUR_SCHEME://...

    console.log(deeplink);
});

App 을 여는 모든 Deeplink 들은 Deeplink Callback 에 전달됩니다.
Deeplink 들 중, Airbridge 를 통한 Deeplink 는 Airbridge 대시보드의 iOS URI Scheme 에 입력한 YOUR_SCHEME://...형태로 전달됩니다.

Android

AndroidManifest.xml

android/app/src/main/AndroidManifest.xml 파일의 MainActivity 영역에 아래와 같은 android:launchModeintent-filter 문장을 삽입해주세요.

12345678910111213141516171819202122232425262728293031
<activity android:name=".MainActivity"
    android:launchMode="singleTask"
    ...>
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="http" android:host="YOUR_APP_NAME.deeplink.page" />
        <data android:scheme="https" android:host="YOUR_APP_NAME.deeplink.page" />
    </intent-filter>
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="http" android:host="YOUR_APP_NAME.airbridge.io" />
        <data android:scheme="https" android:host="YOUR_APP_NAME.airbridge.io" />
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="YOUR_SCHEME" />
    </intent-filter>
    ...
<activity/>

YOUR_APP_NAME 에 앱 이름을, YOUR_SCHEME 에 대시보드에서 설정한 scheme 값을 입력해주세요.

MainActivity.java

android/app/src/main/java/.../MainActivity.java 파일에 다음 코드를 삽입해주세요.

123456789101112
@Override
protected void onResume() {
    super.onResume();

    AirbridgeRN.processDeeplinkData(getIntent());
}

@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    setIntent(intent);
}

iOS

Scheme

  1. Xcode > Project 파일 > Info > URL Types 로 이동해주세요.

  2. identifier 와 URL Schemes 에 대시보드에서 설정한 scheme 값을 넣어주세요.

주의하세요

URI Scheme 입력 시 :// 는 제외하고 입력해주세요.

  1. Xcode > Project 파일 > Signing & Capabilities > Associated Domains 로 이동해주세요.

  2. +버튼을 눌러 applinks:YOUR_APP_NAME.airbridge.io를 추가해주세요.

  3. +버튼을 눌러 applinks:YOUR_APP_NAME.deeplink.page를 추가해주세요.

YOUR_APP_NAME 은 대시보드의 Settings > Tokens > 앱 이름 에서 확인할 수 있습니다.

AppDelegate.m

Scheme

  1. ios/[프로젝트 이름]/AppDelegate.m파일을 열어주세요.

  2. 아래 코드를 추가해주세요.

    12345678910
    - (BOOL)application:(UIApplication *)application
                openURL:(NSURL *)url
                options:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options
    {
        NSLog(@"openURL : %@", url);
    
        [AirbridgeRN.deeplink handleURLSchemeDeeplink:url];
    
        return YES;
    }

  3. iOS 8.x 또는 그 이전 버전을 target 한다면 아래와 같은 코드를 추가로 적어주세요.

    1234567891011
    - (BOOL)application:(UIApplication*)application
                openURL:(NSURL*)url
      sourceApplication:(NSString*)sourceApplication 
             annotation:(id)annotation
    {
        NSLog(@"openURL : %@", url);
    
        [AirbridgeRN.deeplink handleURLSchemeDeeplink:url];
    
        return YES;
    }

  1. ios/[프로젝트 이름]/AppDelegate.m파일을 열어주세요.

  2. 아래 코드를 추가해주세요.

    12345678910
    -  (BOOL)application:(UIApplication*)application
    continueUserActivity:(NSUserActivity*)userActivity
      restorationHandler:(void (^)(NSArray* _Nullable))restorationHandler
    {
        NSLog(@"continueUserActivity : %@", userActivity.webpageURL);
    
        [AirbridgeRN.deeplink handleUniversalLink:userActivity.webpageURL];
    
        return YES;
    }

커스텀 도메인 (옵션)

Airbridge Tracking Link 에 Custom Domain 을 사용한다면 iOS, Android 에서 각 아래의 가이드에 따라 설정해주세요.

딥링크 설정 확인

Airbridge 대시보드의 iOS URI Scheme 에 입력한 YOUR_SCHEME://... 형태의 딥링크를 클릭하였을 때, 앱이 열리고 Deeplink 이벤트가 전송되는지 확인해주세요.

  1. 딥링크를 클릭해주세요.

  2. Airbridge 대시보드 > Raw Data> App Real-time Logs에서 Deeplink 이벤트가 존재하는지 확인해주세요.

사용자 설정

사용자 식별자 설정

SDK 에 사용자 식별자 정보를 전달하여 이후 수집되는 모든 이벤트에 입력되도록 할 수 있습니다.

이름

설명

제한

ID

사용자 ID

-

email

사용자 Email

자동으로 SHA256 으로 Hash 됨 (옵션으로 해제가능)

phone

사용자 전화번호

자동으로 SHA256 으로 Hash 됨 (옵션으로 해제가능)

attributes

사용자 속성

- 최대 100개 입니다.
- key 는 NSString 타입이며, 최대 128자 입니다.
- key 는 ^ {
"h-0": "*$ 정규식을 만족해야 합니다.
- value 는 NSString 또는 NSNumber 타입입니다.
- value 는 NSString 타입일 경우 최대 1024자 입니다.

alias

사용자의 또 다른 ID

- 최대 10개 입니다.
- key 는 NSString 타입이며, 최대 128자 입니다.
- key 는 ^ {
"h-0": "*$ 정규식을 만족해야 합니다.
- value 는 NSString 타입이며, 최대 1024자 입니다.

코드 예시

12345678910111213
Airbridge.state.setUser({
    ID: 'persondoe1',
    email: 'persondoe1@example.com',
});

Airbridge.state.setUser({
    email: 'persondoe2@example.com',
    phone: '+14151231234',
});

Airbridge.state.updateUser({
    ID: 'persondoe3',
});

위 코드는 다음과 같이 작동합니다.

User = { ID: 'persondoe1', email: '[persondoe1@example.com](mailto:persondoe1@example.com)' }
=> User = { email: '[persondoe1@example.com](mailto:persondoe1@example.com)', phone: '+14151231234' }
=> User = { ID: 'persondoe3', email: '[persondoe1@example.com](mailto:persondoe1@example.com)', phone: '+14151231234' }

사용자 속성 설정

MTA(Multi-Touch Attribution) 분석의 정확도 향상, 내부 데이터 분석, 서드파티(3rd Party) 솔루션 연동 등의 목적으로 사용자의 추가 속성 데이터를 설정할 수 있습니다.

123456
Airbridge.state.updateUser({
    attributes: {
      age_group: "30",
      gender: "Female"
    }
});

사용자 설정 확인

사용자 설정을 완료한 후, SDK 를 통해 Event 를 전송하고, 해당 Event 에 설정한 사용자 정보가 있는지 확인해주세요.

  1. 사용자 설정을 해주세요.

  2. SDK 를 통해 Event 를 전송해주세요.

  3. Airbridge 대시보드 > Raw Data> App Real-time Logs에서 전송한 Event 를 클릭하여 JSON 속 user 부분에 설정한 사용자 정보가 있는지 확인해주세요.

디바이스 설정

디바이스 식별자 설정

SDK에 디바이스 식별자 정보를 설정해 이후 수집되는 모든 이벤트에 디바이스 식별정보를 포함시킬 수 있습니다. 디바이스 식별자가 설정되면 별도로 삭제하지 않을 경우 앱 종료 여부에 관계없이 계속 유지됩니다.

123
Airbridge.setDeviceAlias("ADD_YOUR_KEY", "AND_YOUR_VALUE");
Airbridge.removeDeviceAlias("DELETE_THIS_KEY");
Airbridge.clearDeviceAlias();

setDeviceAlias(key: string, value: string)

전달한 Key와 Value 쌍을 디바이스 식별자에 추가합니다.

removeDeviceAlias(key: string)

전달한 Key에 해당하는 디바이스 식별자를 삭제합니다. 해당하는 식별자가 없을 경우 아무런 동작을 하지 않습니다.

clearDeviceAlias()

모든 디바이스 식별자를 삭제합니다.

이벤트 설정

사용자의 중요한 행동들이 발생할 때, 인앱 이벤트를 전송해 유입 경로별 성과를 측정할 수 있습니다.

모든 이벤트의 파라미터는 선택적으로 추가할 수 있습니다. 그러나 이벤트에 대한 많은 정보는 정확한 통계 제공에 도움이 됨으로 추가하는 것을 권장합니다.

event option 으로는 action, label, value, customAttributes, semanticAttributes 사용이 가능합니다.

123456
/**
 * Send event to server.
 * @param {string} category event name
 * @param {EventOption} [option={}] event options
 */
trackEvent(category: string, option?: EventOption): void;

사용자 이벤트 전송

SDK 를 통해 사용자 관련 이벤트를 전송할 수 있습니다.

사용자 이벤트에서도 action, label, value, customAttributes, semanticAttributes 사용이 가능합니다.

회원가입

회원가입 이벤트 전송시, 사용자 식별자를 setUser 를 통해 정보 입력 후 AirbridgeCategory.SIGN_UP 이벤트를 전송합니다.

123456
Airbridge.state.setUser({
    ID: 'test',
    email: 'test@ab180.co',
    phone: '000-0000-0000',
});
Airbridge.trackEvent(AirbridgeCategory.SIGN_UP);

로그인

로그인 이벤트 전송시, 사용자 식별자가 입력 되어 있지 않다면 setUser 를 통해 정보를 입력 후 AirbridgeCategory.SIGN_IN 이벤트를 전송합니다.

123456
Airbridge.state.setUser({
    ID: 'test',
    email: 'test@ab180.co',
    phone: '000-0000-0000',
});
Airbridge.trackEvent(AirbridgeCategory.SIGN_IN);

로그아웃

로그아웃 이벤트 전송시, AirbridgeCategory.SIGN_OUT 이벤트를 전송 후 사용자 식별자를 초기화 합니다.

12
Airbridge.trackEvent(AirbridgeCategory.SIGN_OUT);
Airbridge.state.setUser({});

이커머스 이벤트 전송

SDK 를 통해 이커머스 관련 이벤트를 전송할 수 있습니다.

이커머스 이벤트에서도 action, label, value, customAttributes, semanticAttributes 사용이 가능합니다.

이커머스 이벤트에 semanticAttributes 에 상품 정보에 관련한 정보를 함께 전송합니다. 정의 된 key 값 외에도 custom key 도 사용이 가능합니다.

홈 화면 조회

1
Airbridge.trackEvent(AirbridgeCategory.HOME_VIEW);

상품 상세 조회

1234567891011121314
Airbridge.trackEvent(AirbridgeCategory.PRODUCT_DETAILS_VIEW, {
    semanticAttributes: {
        [AirbridgeAttributes.PRODUCTS]: [
            {
                [AirbridgeProduct.PRODUCT_ID]: 'coke_zero',
                [AirbridgeProduct.NAME]: 'Coke Zero',
                [AirbridgeProduct.PRICE]: 1.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 1,
                [AirbridgeProduct.QUANTITY]: 1,
            },
        ]
    }
});

상품 리스트 조회

1234567891011121314151617181920212223
Airbridge.trackEvent(AirbridgeCategory.PRODUCT_LIST_VIEW, {
    semanticAttributes: {
        [AirbridgeAttributes.PRODUCT_LIST_ID]: 'ID-1234567890'
        [AirbridgeAttributes.PRODUCTS]: [
            {
                [AirbridgeProduct.PRODUCT_ID]: 'coke_zero',
                [AirbridgeProduct.NAME]: 'Coke Zero',
                [AirbridgeProduct.PRICE]: 1.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 1,
                [AirbridgeProduct.QUANTITY]: 1,
            },
            {
                [AirbridgeProduct.PRODUCT_ID]: 'burger_cheese_double',
                [AirbridgeProduct.NAME]: 'Double Cheeseburger',
                [AirbridgeProduct.PRICE]: 3.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 2,
                [AirbridgeProduct.QUANTITY]: 1,
            },
        ]
    }
});

검색결과 조회

1234567891011121314151617181920212223
Airbridge.trackEvent(AirbridgeCategory.SEARCH_RESULT_VIEW, {
    semanticAttributes: {
        [AirbridgeAttributes.QUERY]: 'product'
        [AirbridgeAttributes.PRODUCTS]: [
            {
                [AirbridgeProduct.PRODUCT_ID]: 'coke_zero',
                [AirbridgeProduct.NAME]: 'Coke Zero',
                [AirbridgeProduct.PRICE]: 1.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 1,
                [AirbridgeProduct.QUANTITY]: 1,
            },
            {
                [AirbridgeProduct.PRODUCT_ID]: 'burger_cheese_double',
                [AirbridgeProduct.NAME]: 'Double Cheeseburger',
                [AirbridgeProduct.PRICE]: 3.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 2,
                [AirbridgeProduct.QUANTITY]: 1,
            },
        ]
    }
});

장바구니 담기

12345678910111213141516171819202122232425
Airbridge.trackEvent(AirbridgeCategory.ADD_TO_CART, {
    value: 5.98,
    semanticAttributes: {
        [AirbridgeAttributes.CART_ID]: 'ID-1234567890',
        [AirbridgeAttributes.CURRENCY]: 'USD',
        [AirbridgeAttributes.PRODUCTS]: [
            {
                [AirbridgeProduct.PRODUCT_ID]: 'coke_zero',
                [AirbridgeProduct.NAME]: 'Coke Zero',
                [AirbridgeProduct.PRICE]: 1.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 1,
                [AirbridgeProduct.QUANTITY]: 1,
            },
            {
                [AirbridgeProduct.PRODUCT_ID]: 'burger_cheese_double',
                [AirbridgeProduct.NAME]: 'Double Cheeseburger',
                [AirbridgeProduct.PRICE]: 3.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 2,
                [AirbridgeProduct.QUANTITY]: 1,
            },
        ]
    }
});

결제

1234567891011121314151617181920212223242526
Airbridge.trackEvent(AirbridgeCategory.ORDER_COMPLETED, {
    value: 5.98,
    semanticAttributes: {
        [AirbridgeAttributes.TRANSACTION_ID]: 'transactionID-purchase',
        [AirbridgeAttributes.CURRENCY]: 'USD',
        [AirbridgeAttributes.IN_APP_PURCHASED]: true,
        [AirbridgeAttributes.PRODUCTS]: [
            {
                [AirbridgeProduct.PRODUCT_ID]: 'coke_zero',
                [AirbridgeProduct.NAME]: 'Coke Zero',
                [AirbridgeProduct.PRICE]: 1.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 1,
                [AirbridgeProduct.QUANTITY]: 1,
            },
            {
                [AirbridgeProduct.PRODUCT_ID]: 'burger_cheese_double',
                [AirbridgeProduct.NAME]: 'Double Cheeseburger',
                [AirbridgeProduct.PRICE]: 3.99,
                [AirbridgeProduct.CURRENCY]: 'USD',
                [AirbridgeProduct.POSITION]: 2,
                [AirbridgeProduct.QUANTITY]: 1,
            },
        ]
    }
});

이벤트 전송 확인

SDK 를 통해 Event 를 전송하고, 에어브릿지 대시보드에 해당 Event 가 존재하는지 확인해주세요.

  1. SDK 를 통해 Event 를 전송해주세요.

  2. Airbridge 대시보드 > Raw Data> App Real-time Logs에서 전송한 Event 가 존재하는지 확인해주세요.

고급 설정

메타 인스톨 리퍼러 수집 설정

메타 인스톨 리퍼러(Meta Install Referrer) 수집 설정은 airbridge-react-native-sdk 2.6.0 버전 이상에서 사용할 수 있습니다. airbridge.json 에 아래 설정을 추가하면 메타 인스톨 리퍼러를 수집할 수 있습니다.

설정을 추가한 이후에 암호 해독 키를 에어브릿지 대시보드에 입력해야 복호화된 메타 인스톨 리퍼러를 확인할 수 있습니다. 암호 해독 키를 입력하는 방법은 에어브릿지 가이드를 참고해 주세요.

123
{
    "metaInstallReferrer": "YOUR_META_APP_ID"
}

Restricted SDK

개인정보보호법 등으로 인해 ADID 수집이 불가능 한 경우 기존 SDK 대신 ADID 수집 기능이 제거된 restricted SDK 를 사용 할 수 있습니다. Airbridge React-native SDK restricted 는 v2.5.3 부터 지원됩니다.

패키지 설치

npm

npm 을 이용하여 Airbridge 의 react-native SDK 를 설치해주세요.

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

아래와 같은 명령어를 실행해주세요.

12
cd ios
pod install

프로젝트 설정

import

프로젝트의 index.js 에 아래와 같은 코드를 통해 SDK 객체를 획득 해주세요.

1
import Airbridge from 'airbridge-react-native-sdk-restricted';

SDK Signature 설정

SDK Signature 를 설정하는 것으로 SDK 를 SDK Spoofing 으로 부터 보호할 수 있습니다.SDK signature 기능을 사용하기 위해서는 airbridge_react_native_sdk 2.3.0 이상 버전 부터 적용 가능합니다.

프로젝트 폴더의 airbridge.json파일에 아래 사항을 JSON 형식으로 설정값을 넣어주세요.

1234
{
    "sdkSignatureSecretID": "YOUR_SDK_SIGNATURE_SECRET_ID",
    "sdkSignatureSecret": "YOUR_SDK_SIGNATURE_SECRET"
}

SDK Signature 를 설정하기 위해서는 SDK Signature Secret, SDK Signature Secret ID 2가지가 필요합니다. 해당 2가지 값을 발급받기 위해서는 담당 에어브릿지 CSM 에게 연락해주세요.

세션 타임아웃 설정

앞서 추가한 airbridge.json 파일의 sessionTimeoutSeconds 필드의 설정을 통해 설정된 세션 시간 내에 유저가 앱을 재 실행 하더라도 같은 세션으로 판단하여 앱 실행 이벤트를 다시 보내지 않도록 할 수 있습니다.

  • 세션 타임아웃은 millisecond 단위이며, 0 이상 604800000 (7일) 이하 인 값이어야 합니다.

  • 세션 타임아웃의 기본값은 1000 60 5 (5분) 입니다.

사용자 정보 해시화 설정

내부의 데이터 분석 등의 목적을 위해 HASH(SHA256)하지 않고 사용자의 식별자 정보를 전송하고 싶은 경우, 앞서 추가한 airbridge.json 파일의 userInfoHashEnabled 필드의 설정을 통해 User Email 그리고 User Phone 정보의 해시화(SHA256)를 중단할 수 있습니다.

주의하세요

해당 옵션은 User Email과 User Phone 등 민감한 개인정보를 제 3자에게 제공하기 때문에 내부적으로 별도의 보안 조치가 선행되어져야 합니다.

페이스북 디퍼드 앱링크 설정

Facebook의 Deferred App Link를 앞서 추가한 airbridge.json 파일의 facebookDeferredAppLinkEnabled필드의 설정을 통하여 Airbridge SDK에서 함께 받아 보실 수 있습니다.

facebookDeferredAppLinkEnabled 값이 YES 이고, Facebook SDK 가 설치되어 있을 때, SDK 가 Facebook Deferred App Link 를 수집합니다.

해당 기능을 사용하기 위해서 Facebook SDK 설정이 선행되어져야 합니다.

Airbridge 링크만 추적 설정

광고주의 앱 내에서 다수의 딥링크 동작으로 인해 Airbridge를 통한 Re-engagement 성과를 한눈에 확인하기 어려운 경우, 앞서 추가한 airbridge.json 파일의 trackAirbridgeLinkOnly필드의 설정을 통하여 Airbridge 딥링크를 통해 들어온 성과만 필터링하도록 설정할 수 있습니다.

해당 기능을 활성화할 경우 아래의 조건을 만족한 딥링크를 통해 앱이 오픈 된 경우에 한하여 딥링크 성과로 측정합니다.

  • 대시보드에 등록된 형태의 딥링크를 통해 앱이 오픈 된 경우

  • airbridge.io딥링크를 통해 앱이 오픈 된 경우

  • deeplink.page딥링크를 통해 앱이 오픈 된 경우

  • airbridge_referrerquery 정보가 존재하는 경우

개인정보보호(Opt-out) 설정

해당 기능은 GDPR이나 CCPA와 같이 고객으로부터 개인정보보호에 대한 동의를 받아 데이터 수집 및 전송을 진행하는 경우에 유용한 기능입니다.앞서 추가한 airbridge.json 파일의 autoStartTrackingEnabled필드의 설정을 이용하여 데이터 수집과 전송을 명시적으로 시작할 수 있습니다.

해당 기능을 비활성화한 경우에 다음과 같은 함수를 명시적으로 호출해야 올바르게 데이터 수집이 이루어지게 됩니다.

  • Airbridge.state.startTracking();

Tracking Authorize Timeout 설정 (iOS 전용)

AppTrackingTransparency.framework 를 사용해 추적 허용 선택창 을 표시하는 경우, 추적 허용 을 선택하더라도 선택하기 이전에 설치 이벤트가 전송되기 때문에 설치 이벤트에서 IDFA 수집이 불가능합니다.

앞서 추가한 airbridge.json 파일의 trackingAuthorizeTimeoutSeconds 에 timeout 을 설정하면, 설치 이벤트를 전송하기 전에 timeout 만큼 추적 허용 선택창 이 선택될 때 까지 기다립니다.

위치 정보 수집 (Android 전용)

앞서 추가한 airbridge.json 파일의 locationCollectionEnabled필드의 설정을 통하여 유저의 위치 정보를 수집할 수 있습니다.

이 기능은 오직 안드로이드에서 사용 가능하며 다음과 같은 권한이 AndroidManifest.xml에 포함되어야 합니다.

12
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

위치 정보는 합법적인 목적과 방법을 통하여 수집되어야 하므로 본 기능 사용에 주의가 요구됩니다.

앱 내 트래킹링크 사용

Airbridge 의 트래킹링크를 열기 위해서는 브라우저를 거쳐야 합니다. 하지만 Airbridge SDK 는 브라우저를 거치지 않고도 트래킹링크를 열 수 있는 기능을 제공합니다.

12
Airbridge.placement.click('https://abr.ge/~~~', 'ablog://main', 'https://airbridge.io');
Airbridge.placement.impression('https://abr.ge/~~~');

click

해당 트래킹 링크가 클릭되었을 때 호출합니다. 그 후 트래킹 링크의 click 통계를 추가하고 설정된 App, Web 또는 Fallback으로 이동합니다.

impression

해당 트래킹 링크가 UI에 표시 되었을 때 호출합니다. 그 후 트래킹 링크의 impression 통계를 1개 추가합니다.

주의하세요

커스텀 도메인 사용 시, 커스텀 Short ID를 포함한 트래킹 링크는 사용할 수 없습니다.

deviceUUID 획득

1
await Airbridge.state.deviceUUID()

앱 삭제 추적 설정

앱 삭제 추적 설정에 대한 자세한 사항은 해당 페이지를 참조해 주세요.

앱 삭제 추적 설정은 Airbridge React-native SDK v2.1.0 이후 버전 부터 사용 가능합니다.

  • Airbridge Android SDK v2.6.0

  • Airbridge iOS SDK v1.28.2

Push Token 전송

획득한 push token 을 해당 registerPushToken method 를 통해 Airbridge 로 전달합니다.

1
Airbridge.registerPushToken(token);

삭제 추적 용 Silent push notification 무시

전달된 remote data 에 airbridge-uninstall-tracking 에 값이 true 라면 해당 push 에 대하여 무시하도록 합니다.

하이브리드 앱 설정

Web SDK만의 설치로는 앱 설치 및 실행 또는 딥링크 호출 등의 추가적인 이벤트를 트래킹 할 수가 없습니다. Airbridge 에서는 다음과 같은 설정을 통하여 쉽게 하이브리드 앱에서 인앱 이벤트를 호출할 수 있습니다.

123456
let webInterface = Airbridge.createWebInterface(
        'YOUR_WEB_TOKEN',
        (command) => { 
            return `...`;
        }
    )

Airbridge.createWebInterface 를 통해서 web interface 를 제어 할 수 있습니다.
아래 연동가이드를 확인 해주세요.

Troubleshooting

Braze push notification

Braze SDK 를 사용하여 push notification 을 통해 deeplink 를 open 할 시 airbridge 에서 event 가 DEEPLINK OPEN 이 안잡히고 OPEN 이 발생합니다. Airbridge SDK 는 event 확인을 위해서 activity 의 action 과 intent 의 dataString 으로 전달 되는 값을 통해 DEEPLINK OPEN ,OPEN 등을 판별 하고 있습니다. 그러나 Braze SDK 에 push notification 을 생성시 Braze SDK 에 정의 된 NotificationTrampolineActivity 을 통해서 open 되는데 해당 activity Action 과 intent 에서 dataString 값을 확인 할 수 없어서 발생하게 됩니다.

airbridge react-native SDK v2.7.1 에서 추가된 아래 interface 를 통해 해당 내용을 해결 할 수 있습니다.

MainApplication.java

android/app/src/main/java/.../MainApplication.java 파일의 onCreate 함수에 아래와 같은 코드를 추가해주세요.

12345678910111213141516171819202122
import co.ab180.airbridge.reactnative.AirbridgeRN;
import co.ab180.airbridge.reactnative.AirbridgeLifecycleIntegration;

//...

@Override
public void onCreate() {
    super.onCreate();
    AirbridgeRN.init(this, "YOUR_APP_NAME", "YOUR_APP_TOKEN");
    AirbridgeRN.setLifecycleIntegration(new AirbridgeLifecycleIntegration() {
      @Override
      public String getDataString(Activity activity) {
        if (activity.getClass().getName().equals("com.braze.push.NotificationTrampolineActivity")
          && activity.getIntent() != null
          && activity.getIntent().getExtras() != null) {
          return activity.getIntent().getExtras().getString("uri");
        }
        return null;
      }
    });
    ...
}

Bitcode 컴파일 에러

react-native SDK 1.5.0 이상의 버전으로 iOS 빌드 시 Bitcode 를 지원하지 않아서 아래와 같이 에러가 발생 할 수 있습니다.

1
ld: XCFrameworkIntermediates/AirBridge/AirBridge.framework/AirBridge(AirBridge-arm64-master.o)' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE)

react-native SDK 1.5.0 버전 부터 Airbridge iOS SDK 1.28.0 버전 으로 업데이트 되었습니다. Airbridge iOS SDK 는 1.28.0 버전 부터 Bitcode 를 지원하지 않습니다. 해당 에러 발생 시 아래 가이드를 참고 바랍니다.

마이그레이션 가이드


SDK 업데이트 시, `이전버전` ~ `이후버전` 사이에 해당하는 버전들에 해당하는 내용들을 고려해주세요.

2.8.0

2023년 9월 4일 이후에 생성된 에어브릿지 앱의 경우, 딥링크 콜백에서 제공하는 딥링크 URL 이 에어브릿지 대시보드에 입력된 내용을 2번 디코딩하여 제공하는 문제가 v2.7.3 ~ v2.5.1 에 있었던 것이 해결되었습니다.

2.5.1

2023년 9월 4일 이후에 생성된 에어브릿지 앱의 경우, 딥링크 콜백에서 제공하는 딥링크 URL 에 더이상 airbridge_referrer 가 추가되지 않게 됩니다.

ios app 업데이트 하시는 경우, 마지막으로 계산된 SKAdNetwork Conversion Value 로 확정되고, 추가적으로 계산하지 않습니다.

  • 2.5.1 미만 버전에서는 SKAdNetwork Conversion Value 를 최대 24시간 동안만 계산합니다.

  • 새로 설치하시는 유저에 대해서는 문제되지 않습니다.

deeplink.page 가 deprecated 되었습니다. 2.5.1 부터는 abr.ge 로 딥링크 도메인을 사용 하여 코드를 작성 하도록 권장 드립니다

  • deeplink.page 는 하위 호환을 위해 여전히 지원 및 동작은 되고 있습니다.

2.5.0

trackingAuthorizeTimeout 의 기본값이 30초로 변경됩니다.

Update 1.X.X → 2.X.X

기존에 1.X.X 버전 에 있던 있던 event 전송 API 가 삭제 되고 아래의 API 로 대체 되었습니다.

123456
/**
 * Send event to server.
 * @param {string} category event name
 * @param {EventOption} [option={}] event options
 */
trackEvent(category: string, option?: EventOption): void;

React native 2.X.X migration guide 에서 자세한 내용을 확인하세요.

Update 1.1.X → 1.2.X

npm

package.json 의 Airbridge React Native SDK 버전을 교체해주세요.

123
...
    "airbridge-react-native-sdk": "1.2.1",
...

다음 명령어를 실행해주세요.

123
npm install
cd ios
pod install

Android

android/app/src/main/java/.../MainActivity파일에 다음 코드를 수정해주세요.

12
-     AirbridgeRN.deeplink()?.handleURLSchemeDeeplink(url, withSourceBundle: sourceApplication)
+     AirbridgeRN.deeplink()?.handleURLSchemeDeeplink(url)

iOS

ios/[프로젝트 이름]/AppDelegate파일의 다음 코드를 수정해주세요.

12
-     AirbridgeRN.deeplink()?.handleURLSchemeDeeplink(url, withSourceBundle: sourceApplication)
+     AirbridgeRN.deeplink()?.handleURLSchemeDeeplink(url)

설정
  1. 프로젝트 폴더에 airbridge.json 파일을 생성해주세요.

  2. JSON 형식으로 설정값을 넣어주세요.

Example

12345678
{
    "sessionTimeoutSeconds": 300,
    "autoStartTrackingEnabled": true,
    "userInfoHashEnabled": true,
    "trackAirbridgeLinkOnly": false,
    "facebookDeferredAppLinkEnabled": false,
    "locationCollectionEnabled": false
}

이름

타입

기본값

설명

sessionTimeoutSeconds

number

300

설정한 세션기간 내에 유저가 앱을 재실행하는 경우에는, 같은 세션으로 판단하여 앱 실행 이벤트를 전송하지 않습니다.

autoStartTrackingEnabled

boolean

true

false 로 설정하면, Airbridge.state.startTracking() 을 호출하기 전까지 이벤트를 전송하지 않습니다.

userInfoHashEnabled

boolean

true

false 로 설정하면, User Email 및 User Phone 정보를 Hash 하지않고 이벤트를 전송합니다.

trackAirbridgeLinkOnly

boolean

false

true 로 설정하면, Airbridge 딥링크로 앱이 열린 경우에만 딥링크 이벤트를 전송합니다.

facebookDeferredAppLinkEnabled

boolean

false

true 로 설정하고 Facebook SDK 가 설치되어 있으면, Facebook Deferred AppLink 를 수집합니다.

locationCollectionEnabled

boolean

false

true 로 설정하면, 해당 기기의 위치 정보를 수집합니다. (Android 전용)
사용하기 위해서는 AndroidManifest.xml 에 아래 2개 권한이 필요합니다.
android.permission.ACCESS_FINE_LOCATION
android.permission.ACCESS_COARSE_LOCATION

Update 1.0.X → 1.1.X

Install

구버전 SDK 를 uninstall 해주세요.

1
npm uninstall react-native-airbridge-bridge

신버전 SDK 를 install 해주세요.

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

아래 명령어를 실행해주세요.

12
cd ios
pod install

Javascript

DeeplinkListener

getInitialDeeplink 함수를 제거하고 setDeeplinkListener 함수만 사용해주세요.

1234567
- Airbridge.deeplink.getInitialDeeplink().then((deeplink) => {
-
- });
. 
. Airbridge.deeplink.setDeeplinkListner((deeplink) => {
. 
. });

Android

AndroidManifest.xml

android/app/src/main/AndroidManifest.xml 파일의 MainActivity 영역에 아래와 같은 intent-filter 문장을 삽입해주세요.

1234567891011121314151617181920212223242526
+ <intent-filter android:autoVerify="true">
+     <action android:name="android.intent.action.VIEW" />
+
+     <category android:name="android.intent.category.DEFAULT" />
+     <category android:name="android.intent.category.BROWSABLE" />
+
+     <data android:scheme="http" android:host="YOUR_APP_NAME.deeplink.page" />
+     <data android:scheme="https" android:host="YOUR_APP_NAME.deeplink.page" />
+ </intent-filter>
. <intent-filter android:autoVerify="true">
.     <action android:name="android.intent.action.VIEW" />
. 
.     <category android:name="android.intent.category.DEFAULT" />
.     <category android:name="android.intent.category.BROWSABLE" />
. 
.     <data android:scheme="http" android:host="YOUR_APP_NAME.airbridge.io" />
.     <data android:scheme="https" android:host="YOUR_APP_NAME.airbridge.io" />
. </intent-filter>
. <intent-filter>
.     <action android:name="android.intent.action.VIEW" />
. 
.     <category android:name="android.intent.category.DEFAULT" />
.     <category android:name="android.intent.category.BROWSABLE" />
. 
.     <data android:scheme="EXAMPLE_SCHEME" />
. </intent-filter>

MainActivity.java

android/app/src/main/java/.../MainActivity.java 을 수정해주세요.

12345678910111213141516
. import co.ab180.airbridge.reactnative.AirbridgeRN;
. 
. public class MainActivity extends ReactActivity {
+     @Override
+     protected void onResume() {
+         super.onResume();
+ 
+         AirbridgeRN.getDeeplink().fetch(getIntent());
+     }
+  
.     @Override
.     public void onNewIntent(Intent intent) {
.         super.onNewIntent(intent);
.         setIntent(intent);
.     }
. }

iOS

Xcode

Universal Link

  1. Xcode > Project 파일 > Signing & Capabilities > Associated Domains 로 이동해주세요.

  2. +버튼을 눌러 applinks:YOUR_APP_NAME.deeplink.page를 추가해주세요.

YOUR_APP_NAME 은 대시보드의 Settings > Tokens > 앱 이름 에서 확인할 수 있습니다.

AppDelegate.m

ios/.../AppDelegate.m 을 수정해주세요.

123456789101112131415161718192021222324
. - (BOOL)application:(UIApplication *)application
.             openURL:(NSURL *)url
.             options:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options
. {
-     [AirbridgeRN.instance handleURLSchemeDeeplink:url
-                                withSourceBundle:options[UIApplicationOpenURLOptionsSourceApplicationKey]];
+     [AirbridgeRN.deeplink handleURLSchemeDeeplink:url
+                                withSourceBundle:options[UIApplicationOpenURLOptionsSourceApplicationKey]];
. 
.     return YES;
. }
. 
. - (BOOL)application:(UIApplication*)application
.             openURL:(NSURL*)url
.   sourceApplication:(NSString*)sourceApplication 
.          annotation:(id)annotation
. {
-     [AirbridgeRN.instance handleURLSchemeDeeplink:url
-                                withSourceBundle:sourceApplication];
+     [AirbridgeRN.deeplink handleURLSchemeDeeplink:url
+                                withSourceBundle:sourceApplication];
. 
.     return YES;
. }

iOS 8.x 또는 그 이전 버전을 target 한다면 아래와 같은 코드를 추가로 수정해주세요.

123456789
. -  (BOOL)application:(UIApplication*)application
. continueUserActivity:(NSUserActivity*)userActivity
.   restorationHandler:(void (^)(NSArray* _Nullable))restorationHandler
. {
-     [AirbridgeRN.instance handleUniversalDeeplink:userActivity.webpageURL];
+     [AirbridgeRN.deeplink handleUniversalLink:userActivity.webpageURL];
. 
.     return YES;
. }

Update 0.2.X → 1.0.X

terminal

구버전 SDK 를 unlink 해주세요.

1
react-native unlink react-native-airbridge-bridge

react-native unlink react-native-airbridge-bridge 가 에러난 경우

1. android/app/src/main/java/.../MainApplication.java를 수정해주세요.

1
- import com.reactlibrary.AirbridgeBridgePackage;
12345678
. @Override
. protected List<ReactPackage> getPackages() {
.     return Arrays.<ReactPackage>asList(
+         new MainReactPackage()
-         new MainReactPackage(),
-         new AirbridgeBridgePackage()
.     );
. }

2. ios/xxx.xcodeproj를 수정해주세요.

3. Libraries 안의 AirbridgeBridge.xcodeproj 를 삭제해주세요.

구버전 SDK 를 uninstall 해주세요.

1
npm uninstall react-native-airbridge-bridge

신버전 SDK 를 install 해주세요.

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

신버전 SDK 를 link 해주세요.

1
react-native link airbridge-react-native-sdk

index.js

index.js 에서 require 를 import 로 바꿔주세요.

12
- const Airbridge = require('react-native-airbridge-bridge');
+ import Airbridge from 'airbridge-react-native-sdk';

Build.gradle

android/app/build.gradle 를 수정해주세요.

123456
. dependencies {
.     ...
-     implementation 'io.airbridge:sdk-android:1.5.+'
-     implementation 'com.android.installreferrer:installreferrer:1.0'
.     ...
. }

AndroidManifest.xml

android/app/src/main/AndroidManifest.xml 를 수정해주세요.

permission

12
-     <uses-permission android:name="android.permission.INTERNET" />
-     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

MainActivity

123
.     <activity android:name=".MainActivity"
          ...
+         android:launchMode="singleTask">

MainApplication.java

android/app/src/main/java/.../MainApplication.java 을 수정해주세요.

1
- import io.airbridge.*;
1234567
. @Override
. public void onCreate() {
.     super.onCreate();
-     AirBridge.init(this, "[앱 이름]", "[앱 토큰]");
+     AirbridgeRN.init(this, "[앱 이름]", "[앱 토큰]");
.     ...
. }

MainActivity.java

android/app/src/main/java/.../MainActivity.java 을 수정해주세요.

123456789
+ import co.ab180.airbridge.reactnative.AirbridgeRN;

+ public class MainActivity extends ReactActivity {
+   @Override
+   public void onNewIntent(Intent intent) {
+       super.onNewIntent(intent);
+       setIntent(intent);
+   }
+ }

Podfile

ios/Podfile 을 수정해주세요.

123
target '[Project Name]' do
-   pod 'AirBridge', '1.6.2'
end

아래 명령어를 terminal 에서 실행해주세요.

1
pod install

AppDelegate.m

ios/.../AppDelegate.m 을 수정해주세요.

12
- #import <AirBridge/AirBridge.h>
+ #import <AirbridgeRN/AirbridgeRN.h>
1234567
.           - (BOOL)application:(UIApplication *)application 
. didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
. {
-     [AirBridge getInstance:@"YOUR_APP_TOKEN(앱 토큰)" appName:@"YOUR_APP_NAME(앱 이름)" withLaunchOptions:launchOptions];
+     [AirbridgeRN getInstance:@"YOUR_APP_TOKEN(앱 토큰)" appName:@"YOUR_APP_NAME(앱 이름)" withLaunchOptions:launchOptions];
.     ...
. }
123456789
. - (BOOL)application:(UIApplication *)application
.             openURL:(NSURL *)url
.             options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
. {
-     [[AirBridge instance] handleURL:url];
+     [AirbridgeRN.instance handleURLSchemeDeeplink:url withSourceBundle:options[UIApplicationOpenURLOptionsSourceApplicationKey]];.
.
.     return YES;
. }
12345678910
. - (BOOL)application:(UIApplication *)application 
.             openURL:(NSURL *)url
.   sourceApplication:(NSString *)sourceApplication 
.          annotation:(id)annotation
. {
-     [[AirBridge instance] handleURL:url];
+     [AirbridgeRN.instance handleURLSchemeDeeplink:url withSourceBundle:options[UIApplicationOpenURLOptionsSourceApplicationKey]];
. 
.     return YES;
. }

iOS 8.x 또는 그 이전 버전을 target 한다면 아래와 같은 코드를 추가로 수정해주세요.

123456789
.   - (BOOL)application:(UIApplication *)application 
.  continueUserActivity:(NSUserActivity *)userActivity
.    restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler
. {
-     [[AirBridge instance] handleURL:url];
+     [AirbridgeRN.instance handleUniversalDeeplink:userActivity.webpageURL];
. 
.     return YES;
. }

도움이 되었나요?

더 필요한 내용이 있나요?