DashboardUser GuideDataspecStatus Page

Flutter SDK

Suggest Edits

SDK 설치

Pub VersionPub Version

패키지 설치

pubspec 설정

pubspec.yaml 파일의 dependencies 블럭 안에 다음과 같은 라인을 추가해 주세요.

dependencies:
  airbridge_flutter_sdk: 2.0.1

해당 프로젝트의 최상위 파일의 위치에서 Termnimal을 열어 다음 명령어를 실행해 주세요.

Airbridge Flutter SDK 는 Flutter 1.20.0 이상, Dart 2.12.0 이상 에서만 작동합니다.

flutter pub get

프로젝트 설정

SDK 설정 파일 추가

pubspec.yaml 파일의 flutter/assets 블럭 안에 다음과 같은 라인을 추가해 주세요.

flutter:
  assets:
    - assets/airbridge.json

해당 프로젝트의 최상위 위치에서 assets/airbridge.json 다음과 같은 내용을 포함하여 추가시켜 주세요.

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

iOS 설정

해당 프로젝트 ios 모듈의 AppDelegate 클래스 파일에 다음과 같은 코드를 추가해 주세요.

import airbridge_flutter_sdk

override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    AirbridgeFlutter.initSDK(appName: "YOUR_APP_NAME", appToken: "YOUR_APP_TOKEN", withLaunchOptions: launchOptions)
}

#import <airbridge_flutter_sdk/AirbridgeFlutter.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [AirbridgeFlutter initSDKWithAppName:@"YOUR_APP_NAME" appToken:@"YOUR_APP_TOKEN" withLaunchOptions:launchOptions];
}

해당 YOUR_APP_NAME과 YOUR_APP_SDK_TOKEN은 Airbridge 대시보드 → Settings → Tokens 탭에서 확인하실 수 있습니다.

Android 설정

해당 프로젝트 android 모듈에 다음과 같은 Application 클래스 파일을 추가해 주세요.

import co.ab180.airbridge.flutter.AirbridgeFlutter;
import io.flutter.app.FlutterApplication;

public class MainApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        AirbridgeFlutter.init(this, "YOUR_APP_NAME", "YOUR_APP_TOKEN");
    }
}

import co.ab180.airbridge.flutter.AirbridgeFlutter
import io.flutter.app.FlutterApplication

class MainApplication: FlutterApplication() {
    override fun onCreate() {
        super.onCreate()
        AirbridgeFlutter.init(this, "YOUR_APP_NAME", "YOUR_APP_TOKEN")
    }
}

해당 YOUR_APP_NAME과 YOUR_APP_SDK_TOKEN은 Airbridge 대시보드 → Settings → Tokens 탭에서 확인하실 수 있습니다.

해당 프로젝트 android 모듈의 AndroidManifest.xml에 앞서 생성한 Application 클래스를 다음과 같이 등록해 주세요.

<application
    android:name=".MainApplication"
    ...>
    ...
</application>

SDK 설치 확인

설정이 완료되면 어플리케이션 설치 후 Airbridge 대시보드의 → Raw Data → App Real-time Log 탭에서 해당 어플리케이션의 이벤트를 확인하실 수 있습니다.

🚧

Real-time Log는 최장 5분의 지연시간이 있을 수도 있습니다.

딥링크 설정

대시보드 설정

각각 iOS 및 Android 플랫폼 별 딥링크 대시보드 설정은 다음과 같습니다.

프로젝트 설정

iOS 딥링크 설정

  • URL Scheme 추가
  1. 해당 프로젝트 ios 모듈의 *.xcodeproj 혹은 *.xcworkspace를 Xcode에서 열어주세요.
  2. 프로젝트 설정 → Info 탭으로 이동해 주세요.
  3. 해당 페이지의 URL Types 탭의 URL Schemes에 Airbridge 대시보드에서 입력한 iOS URI Scheme 정보를 추가해 주세요.
  • Universal Link 추가
  1. 해당 프로젝트 ios 모듈의 *.xcodeproj 혹은 *.xcworkspace를 Xcode에서 열어주세요.
  2. 프로젝트 설정 → Signing & Capabilities 탭으로 이동해 주세요.
  3. 해당 페이지의 Associated Domains 탭의 Domains에 다음 정보를 추가해 주세요.
  • applinks:YOUR_APP_NAME.airbridge.io
  • applinks:YOUR_APP_NAME.deeplink.page
  • AppDelegate 설정
  1. 해당 프로젝트 ios 모듈의 AppDelegate 를 열어주세요.
  2. 아래 함수를 추가해주세요.
override func application(
    _ application: UIApplication,
    continue userActivity: NSUserActivity,
    restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
) -> Bool {
    if let universalLink = userActivity.webpageURL {
        AirbridgeFlutter.deeplink.handleUniversalLink(universalLink)
    }
    
    return true
}

override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    AirbridgeFlutter.deeplink.handleURLSchemeDeeplink(url)
    
    return true
}

-  (BOOL)application:(UIApplication*)application
continueUserActivity:(NSUserActivity*)userActivity
  restorationHandler:(void (^)(NSArray* _Nullable))restorationHandler
{
    [AirbridgeFlutter.deeplink handleUniversalLink:userActivity.webpageURL];

    return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options
{
    [AirbridgeFlutter.deeplink handleURLSchemeDeeplink:url];

    return YES;
}

Android 딥링크 설정

  • AndroidManifest.xml 설정

하단에 명시된 절차에 따라서 Intent Filter를 설정해 주세요.

  1. 해당 프로젝트 android 모듈의 AndroidManifest.xml 파일을 열어주세요.
  2. MainAcitivty 에 Intent Filter 를 다음과 같이 추가해 주세요.
<activity ...>
    ...
    <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_APP_URI_SCHEME" />
    </intent-filter>
    ...
</activity>
  • MainActivity 설정
  1. 해당 프로젝트 android 모듈의 MainActivity 파일을 열어주세요.
  2. MainAcitivty 에 onResume, onNewIntent 를 다음과 같이 추가해 주세요.
@Override
protected void onResume() {
    super.onResume()
    AirbridgeFlutter.processDeeplink(intent)
}

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

override fun onResume() {
    super.onResume()
    AirbridgeFlutter.processDeeplink(intent)
}

override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    setIntent(intent)
}

딥링크 콜백 설정

유저가 클릭한 딥링크 데이터를 전송받기 위해 다음과 같이 메세지 콜백을 등록해 주세요.

Airbridge.deeplink.setDeeplinkListener((deeplink) {
    // airbridge deeplink = SCHEME://...
    print('$deeplink');
});

main 함수에서 호출하는 경우, WidgetsFlutterBinding.ensureInitialized(); 가 먼저 호출되어야 합니다.

딥링크 설정 확인

Airbridge Flutter SDK의 딥링크 설정이 완료 후 다음과 같은 링크들을 통하여 해당 모바일 앱의 페이지로 올바르게 이동 되는지 확인하실 수 있습니다.

  • YOUR_APP_URI_SCHEME://

딥링크 설정 및 확인이 완료되면 Airbridge 대시보드 → Row Data → App Real-time Log 탭에서 다음과 같이 확인하실 수 있습니다.

사용자 설정

사용자 식별자 설정

Airbridge에서는 웹(Web)과 앱(App)간의 파편화된 사용자의 기여도 측정을 위해 다음과 같은 사용자의 식별자 정보들을 수집합니다.

  • User Email : 이메일
  • User Phone : 전화번호
  • User ID : 사용자 고유 ID (사용자의 특정할 수 있는 ID 값으로 웹과 앱에서 1:1로 대응되어야 합니다)
  • User Alias : 사용자를 나타낼 수 있는 기타 ID (e.g. 로열티 프로그램용 ID, 계열사 통합 ID 등등)

📘

입력되어진 사용자의 이메일과 전화번호는 자동으로 해시화(SHA256)되어 서버로 전송되어 집니다.

Airbridge Flutter SDK에서는 다음과 같은 방법을 통해 사용자의 식별자 정보를 설정할 수 있습니다.

Airbridge.state.setUser(
    User(
    id: 'tester',
    email: '[email protected]',
    phone: '+82 10 0000-0000',
    alias: {
        'alias_key': 'alias_value',
    },
    )
);
  • User Alias의 개수는 최대 10개 입니다.
  • User Alias의 key 는 String 타입이며, 길이는 최대 128자 입니다.
  • User Alias의 key 는 ^[a-z_][a-z0-9_]*$ 정규식을 만족해야 합니다.
  • User Alias의 value 는 String 타입이며 String의 경우 최대 1024자 입니다.

사용자의 식별자 정보를 한번 설정하게 되면 모든 이벤트에 해당 식별자 정보가 함께 포함되어 전달됩니다.

🚧

설정된 사용자의 식별자 정보는 사용자 이벤트에 의해 자동으로 사라지거나 변경될 수 있습니다.

📘

다음과 같은 방법을 통해 설정된 유저 정보의 특정 필드를 변경하실 수 있습니다.

Airbridge.state.updateUser(
    User(
        id: 'sam1234',
    )
);

사용자 속성 설정

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

Airbridge.state.setUser(
    User(
    attributes: {
        'attr_key': 'attr_value',
    },
    )
);
  • User Attribute의 개수는 최대 100개 입니다.
  • User Attribute의 key 는 String 타입이며, 길이는 최대 128자 입니다.
  • User Attribute의 key 는 ^[a-z_][a-z0-9_]*$ 정규식을 만족해야 합니다.
  • User Attribute의 value 는 Integer, Float, Long, Boolean 타입과 String 타입이며 String의 경우 최대 1024자 입니다.

🚧

설정된 사용자의 속성 정보는 사용자 이벤트에 의해 자동으로 사라지거나 변경될 수 있습니다.

사용자 설정 확인

Airbridge Flutter SDK에서 설정한 유저 정보는 Airbridge 대시보드 → Row Data → App Real-time Log 탭에서 다음과 같이 확인하실 수 있습니다.

이벤트 설정

Airbridge Flutter SDK에서 호출하는 모든 이벤트들은 다음과 같이 6개의 하위 속성 값들과 함께 전송할 수 있습니다.

  • Event Category : 이벤트의 이름 Required (String)
  • Event Action : 이벤트 하위 속성값 1 (String)
  • Event Label : 이벤트 하위 속성값 2 (String)
  • Event Value : 이벤트 하위 속성값 3 (Float)
  • Event Custom Attributes : 이벤트 하위의 커스텀 데이터 (Map<String, Object>)
  • Event Semantic Attributes : 이벤트 하위의 시멘틱 데이터 (Semantic Attributes Class)

사용자 이벤트 전송

Airbridge Flutter SDK에서는 편의를 위해 다음과 같은 3가지 유저 이벤트를 제공하고 있습니다.

  • 회원가입 (Sign up)
Airbridge.event.send(SignUpEvent(
    user: User(
        id: 'tester',
        email: '[email protected]',
        phone: '+82 10 0000-0000',
    )
));

🚧

식별자를 함께 포함하여 전송하게되면 자동으로 식별자 정보가 변경됩니다.

  • 로그인 (Sign in)
Airbridge.event.send(SignInEvent(
    user: User(
        id: 'tester',
        email: '[email protected]',
        phone: '+82 10 0000-0000',
    )
));

🚧

식별자를 함께 포함하여 전송하게되면 자동으로 식별자 정보가 변경됩니다.

  • 로그아웃 (Sign out)
Airbridge.event.send(SignOutEvent());

🚧

로그아웃 이벤트 호출 시 식별자 정보가 자동으로 초기화 됩니다.

이커머스 이벤트 전송

Airbridge Flutter SDK에서는 편의를 위해 다음과 같은 상품 클래스와 함께 이커머스 이벤트를 제공하고 있습니다.

Product(
  id: 'beverage_1'
  name: 'Coca cola',
  price: 1.25,
  currency: 'USD',
  quantity: 1,
  position: 0
)
  • 홈 화면 (Home Screen)
Airbridge.event.send(ViewHomeEvent());
  • 검색 결과 조회 (Search Results)
Airbridge.event.send(ViewSearchResultEvent(
  query: 'SELECT * FROM beverages',
  products: [
    Product(
      id: 'beverage_1'
      name: 'Coca cola',
      price: 1.25,
      currency: 'USD',
      quantity: 1,
      position: 0
    ),
    Product(
      id: 'beverage_2'
      name: 'Fanta',
      price: 1500,
      currency: 'KRW',
      quantity: 1,
      position: 1
    ),
  ],
));
  • 상품 리스트 조회 (Product List)
Airbridge.event.send(ViewProductListEvent(
  listID: 'beverage_list_0',
  products: [
    Product(
      id: 'beverage_1'
      name: 'Coca cola',
      price: 1.25,
      currency: 'USD',
      quantity: 1,
      position: 0
    ),
    Product(
      id: 'beverage_2'
      name: 'Fanta',
      price: 1500,
      currency: 'KRW',
      quantity: 1,
      position: 1
    ),
  ],
));
  • 상품 상세 페이지 조회 (Product Details)
Airbridge.event.send(ViewProductDetailEvent(
  products: [
    Product(
      id: 'beverage_1'
      name: 'Coca cola',
      price: 1.25,
      currency: 'USD',
      quantity: 1,
      position: 0
    ),
  ],
);
  • 장바구니 담기 (Add to Cart)
Airbridge.event.send(AddToCartEvent(
  cartID: 'cart_0',
  currency: 'KRW',
  total: 2500,
  products: [
    Product(
      id: 'beverage_1'
      name: 'Coca cola',
      price: 1000,
      currency: 'KRW',
      quantity: 1,
      position: 0
    ),
    Product(
      id: 'beverage_2'
      name: 'Fanta',
      price: 1500,
      currency: 'KRW',
      quantity: 1,
      position: 1
    ),
  ],
);
  • 결제 완료 (Order Complete)
Airbridge.event.send(PurchaseEvent(
  transactionID: 'transaction_0',
  products: [
    Product(
      id: 'beverage_1'
      name: 'Coca cola',
      price: 1000,
      currency: 'KRW',
      quantity: 1,
      position: 0
    ),
    Product(
      id: 'beverage_2'
      name: 'Fanta',
      price: 1500,
      currency: 'KRW',
      quantity: 1,
      position: 1
    ),
  ],
  isInAppPurchase: true,
  currency: 'KRW',
  total: 2500,
);

커스텀 이벤트 전송

Airbridge Flutter SDK에서는 다음과 같은 방법을 통해 커스터마이즈 된 이벤트를 전송할 수 있습니다.

Airbridge.event.send(Event(
  'category',
  option: EventOption(
    action: 'action',
    label: 'label',
    value: 9999,
    attributes: {
      'custom_key': 'value',
    },
    semantics: {
      'query': 'query_123',
    },
  ),
));

📘

Semantic Attributes를 직접 구성하여 전달하기 위해서는 다음 페이지를 참조해 주세요.

이벤트 전송 확인

Airbridge Flutter SDK에서 전송된 이벤트 정보는 Airbridge 대시보드 → Row Data → App Real-time Log 탭에서 다음과 같이 확인하실 수 있습니다.

고급 설정

사용자 정보 해시화 설정

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

❗️

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

세션 타임아웃 설정

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

개인정보보호 설정

해당 기능은 GDPR이나 CCPA와 같이 고객으로부터 개인정보보호에 대한 동의를 받아 데이터 수집 및 전송을 진행하는 경우에 유용한 기능입니다.

앞서 추가한 airbridge.json 파일의 autoStartTrackingEnabled 필드의 설정을 이용하여 데이터 수집과 전송을 명시적으로 시작할 수 있습니다.

📘

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

Airbridge.state.startTracking();

Airbridge 링크 추적 설정

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

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

  • 대시보드에 등록된 형태의 딥링크를 통해 앱이 오픈 된 경우
  • airbridge.io 딥링크를 통해 앱이 오픈 된 경우
  • deeplink.page 딥링크를 통해 앱이 오픈 된 경우
  • airbridge_referrer query 정보가 존재하는 경우

위치 정보 수집 (Android 전용)

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

❗️

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

🚧

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

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

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

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

🚧

해당 기능을 사용하기 위해서 미리 Facebook SDK 설정이 선행되어져야 합니다.
참조 - https://developers.facebook.com/docs/app-ads/sdk-setup/

Tracking Authorize Timeout 설정 (iOS 전용)

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

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

Troubleshooting

settings.gradle

Android build 시에 Plugin project ... not found. Please update settings.gradle 에러가 발생하면 android/settings.gradle 파일을 아래와 같이 수정해서 문제를 해결 할 수 있습니다.

include ':app'

def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()

def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
}

plugins.each { name, path ->
    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
    include ":$name"
    project(":$name").projectDir = pluginDirectory
}

Could not find or use auto-linked library...

Flutter issue: https://github.com/flutter/flutter/issues/16049

Airbridge Flutter SDK 는 swift plugin 이고,
Flutter 에는 100% Objective C Project 에서 Swift Plugin 을 사용하면 해당 오류가 발생하는 문제가 있습니다.
File > New > File... > Swift File 을 선택해서 File.swift 파일을 생성하고, Bridge Header 를 생성하는 것으로
문제를 해결할 수 있습니다.

Objective C & Swift Project 및 100% Swift Project 에서는 발생하지 않는 문제입니다.

Update 1.X.X to 2.X.X

  • iOS
  1. AppDelegate 의 AirbridgeFL 클래스를 AirbridgeFlutter 클래스로 변경해주세요.
  • Android
  1. MainApplication 및 MainActivity 의 AirbridgeFL 클래스를 AirbridgeFlutter 클래스로 변경해주세요.
  2. MainActivity 의 processDeeplinkData 함수를 processDeeplink 함수로 변경해주세요.

Updated about 2 months ago