menu 이용가이드
개발자 가이드 chevron_right SDK 설치
React Native iOS Bridge SDK
에어브릿지 React Native iOS SDK는 에어브릿지 서비스를 통해 iOS 앱에 유입된 설치, 실행, 인앱이벤트, 잔존율 트래킹에 반드시 필요합니다.

설치 및 설정

Cocoapods로 설치

podfile을 다음과 같이 설정하고 설치해주세요.

pod 'AirBridge'

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

npm install react-native-airbridge-bridge

설치 후 아래와 같은 명령어를 이용해서, 프로젝트와 link를 해주세요.

react-native link react-native-airbridge-bridge

Pods 폴더의 AirBridge.framework를 끌어서 Libraries 폴더안 AirbridgeBridge 프로젝트의 Framework 폴더안에 넣어 주세요.

빠른 설정

react-native 의 javascript 소스안에서 Airbridge api를 호출하시려면 아래와 같이 선언해주시면 됩니다.

const AirbridgeApi = require('react-native-airbridge-bridge');

앱의 시작 시점에 아래와 같이 Airbridge sdk 를 초기화해주세요.

...
AirbridgeApi.init('[앱 영문명]', '[앱 토큰]');
...

'앱 영문명'과 '앱 토큰'은 대시보드의 '앱정보 관리 > 앱 기본 정보'에서 확인할 수 있습니다.

설치 확인

  1. 테스트 디바이스에서 앱을 삭제해주세요.
  2. 앱을 빌드하여 해당 디바이스에서 실행해주세요.
  3. 에어브릿지 대시보드 → 앱 선택 → 좌측 메뉴의 '관리' 카테고리 항목 중 'SDK 설치 확인' 선택.
  4. 'Mobile SDK 설치 확인' 메뉴에서 해당 디바이스의 '디바이스 UUID (iOS IDFA)' 노출 확인.
  • iOS IDFA 확인: iOS 디바이스에서 '설정' → 개인 정보 보호 → 광고 → '광고 추적 제한' 끄기 → Safari 브라우저에서 'UDID.io' 검색 → Tap to find UDID → 허용 → 프로파일 설치 '설치' → 노출되는 페이지(get.udid.io)의 'UDID' 항목의 값이 iOS IDFA 입니다.
  • 'Mobile SDK 설치 확인' 메뉴에서 '디바이스 UUID (iOS IDFA)' 노출이 확인되지 않는다면 빠른 설치에 안내된 대로 설치되었는지 다시 한번 확인해주세요.

User Identity 통합

에어브릿지는 모바일 앱 영역을 넘어서 앱, 웹, 오프라인의 광고 성과분석을 통합하는 "사람 중심의 분석(People-based Analytics)"을 위한 서비스입니다.

한 명의 유저가 한 건의 구매(전환)를 일으키기까지는 다양한 디바이스, 플랫폼, 브라우저를 거치게 되며, 이러한 과정에서 얻은 정보를 바탕으로 마침내 구매(전환)에 이르게 됩니다.

이러한 흐름에서 하나의 디바이스, 하나의 플랫폼으로부터 수집된 데이터로는 파편화된 분석을 할 수 밖에 없지만 사람 중심의 분석은 웹, 앱, 오프라인까지 다양한 고객의 접촉점을 한 명의 유저 중심으로 이어주기 때문에 전체 유저 전환 경로를 통한 분석을 할 수 있습니다.

UserID 및 UserEmail 설정

User Identity 통합을 위한 방법 중 하나로, iOS SDK 설치 시 아래와 같이 '사용자 ID' 혹은 '사용자 Email' 중 한 가지를 반드시 설정할 것을 권장합니다.

다음 메서드 호출과 설정을 통하여, 사용자의 UserID와 UserEmail을 설정할 수 있습니다. 로그인/회원가입이 이루어지는 액티비티, 혹은 애플리케이션의 가장 기본이 되는 액티비티(인트로)에서 해당 메서드 호출할 것을 권장합니다.

AirbridgeApi.setEmail('[User Email]');
AirbridgeApi.setUser('[User ID]');
  • 이 메서드의 호출시, 효과적인 데이터 분석을 위하여 UserId와 UserEmail중 하나의 값은 반드시 설정할 것을 권장합니다.
  • 이 메서드 호출시 사용되는 값인 사용자 정보는 모두 Hash화(SHA256)되어 전송되며, 관리됩니다.

기본 인앱이벤트 설정

앱 설치 후 사용자의 다양한 행동 중 중요한 행동(전환)들을 인앱이벤트로 등록하고 유입 경로별로 성과를 측정할 수 있습니다.

보편적으로 많이 사용하는 “회원가입”, “로그인”, “홈화면 조회”, “상품리스트 조회”, “검색결과 조회”, “상품상세페이지 조회”, “장바구니 담기”, “결제”는 기본 인앱이벤트로 별도 매서드가 제공되며, 그 외 원하는 커스텀 인앱이벤트는 SDK에서 매서드를 동적으로 호출하면 1회 이상 달성시 대시보드에서 확인할 수 있습니다.

에어브릿지는 총 8개의 기본 인앱이벤트를 지원하며 SDK 설치시 매소드 호출만으로 트래킹이 가능합니다. 이벤트에 첨부되는 모든 정보는 부가적(Optional)이므로, 정보를 추가하지 않아도 이용할 수 있습니다. 그러나 이벤트에 대한 많은 정보는 리마케팅 캠페인 및 DSP 연동 등에 있어 자세하고 정확한 통계 제공에 도움이 될 수 있으므로 추가하여 전송하는 것을 권장합니다.

  1. 회원가입
  2. 로그인
  3. 홈화면 조회
  4. 상품리스트 조회
  5. 검색결과 조회
  6. 상품상세페이지 조회
  7. 장바구니 담기
  8. 결제
  9. 로그아웃

회원가입

회원가입 인앱이벤트 트래킹을 위하여 사용자가 회원가입 실행시 signUp 을 호출해 주세요.

makeUserObject 를 호출해서 유저 인스턴스를 만들 수 있습니다.

makeUserObject: function(user) {
    return {
        userId: user['userId'] || '',
        userEmail: user['userEmail'] || ''
    };
}

코드 예시 :

_user = AirbridgeApi.makeUserObject({userId: 'UserAB',userEmail: 'UserEmail'});
AirbridgeApi.signUp(_user);
  • 이 메서드의 호출시, 효과적인 데이터 분석을 위하여 UserID와 UserEmail중 하나의 값은 반드시 설정할 것을 권장합니다.
  • 이 메서드의 호출시 사용되는 값인 사용자 정보는 모두 Hash화(SHA256)되어 전송되며, 관리됩니다.

로그인

로그인 인앱이벤트 트래킹을 위하여 사용자가 로그인 실행시 signIn을 호출해 주세요.

makeUserObject 를 호출해서 유저 인스턴스를 만들 수 있습니다.

makeUserObject: function(user) {
    return {
        userId: user['userId'] || '',
        userEmail: user['userEmail'] || ''
    };
}

코드 예시 :

_user = AirbridgeApi.makeUserObject({userId: 'UserAB',userEmail: 'UserEmail'});
AirbridgeApi.signIn(_user);
  • 이 메서드의 호출시, 효과적인 데이터 분석을 위하여 UserID와 UserEmail중 하나의 값은 반드시 설정할 것을 권장합니다.
  • 이 메서드의 호출시 사용되는 값인 사용자 정보는 모두 Hash화(SHA256)되어 전송되며, 관리됩니다.

홈 화면 조회

홈 화면 조회 인앱이벤트 트래킹을 위하여 사용자가 앱 내에서의 홈 화면으로 이동시 AirbridgeApi.sendViewHome을 호출해 주세요.

코드 예시 :

AirbridgeApi.sendViewHome();

Product 인스턴스 만들기

상품 정보를 담은 instance를 makeProduct를 호출해서 만들 수 있습니다. 만들어진 Product 인스턴스는 상품리스트 조회, 검색결과 조회, 상품상세페이지 조회, 장바구니 담기, 결제 인앱이벤트에 상품 정보를 첨부할 때 사용할 수 있습니다.

makeProduct: function(product) {
    return {
        productId: product['productId'] || '',
        name: product['name'] || '',
        currency: product['currency'] || 'KRW',
        price: product['price'] || 0,
        quantity: product['quantity'] || 0,
        positionInList: product['positionInList'] || 0
    };
}
...
_product = AirbridgeApi.makeProduct({productId: '1', price: 100},
_products = [{productId: '1', price: 100}]
변수 타입 설명
productId (권장값) String 상품의 고유 ID. 권장값이므로 DSP 연동 시 넣어주시는 것을 권장합니다.
name String 상품 이름
currency String ISO 4217 standard에 따른 통화 정보 (ex. KRW)
※ 이 값은 향후 서비스 다국가 제공 시 구매금액 합산에 사용할 수 있습니다.
price int 상품 금액
quantity int 구매한 상품의 수량
positionInList int 리스트 중 해당 상품의 실제 위치
※ 검색결과 및 상품 리스트에서 노출된 우선순위 정보를 반영할 때 사용할 수 있습니다.

코드 예시 :

_product1 = AirbridgeApi.makeProduct({productId: '1', price: 100});
_product2 = AirbridgeApi.makeProduct({productId: '2', quantity: 3});
_products = [_product1,_product2];

AirbridgeApi.sendCompleteOrder(_products, 'Transaction-123', true, 'KRW', 10000);

상품 리스트 조회

상품 리스트 조회 인앱이벤트 트래킹을 위하여 사용자가 상품 리스트를 조회할 경우 AirbridgeApi.sendViewProductList을 호출해 주세요.

코드 예시 :

_product1 = AirbridgeApi.makeProduct({productId: '1', price: 100})
_product2 = AirbridgeApi.makeProduct({productId: 2, quantity: 3})
_list = [_product1,product2];

AirbridgeApi.sendViewProductList(‘리스트 ID, _list);
  • 사용자가 리스트를 스크롤하여 새로운 정보를 로드할 경우, 해당 이벤트를 별도로 발생시켜서 추가적으로 로드된 상품 정보를 보내주시는 것을 권장합니다.
  • Product 클래스에 대한 상세 내용은 위의 Product 인스턴스 만들기를 참고해 주세요.

검색결과 조회

검색결과 조회 인앱이벤트 트래킹을 위하여 사용자가 상품을 검색할 경우 AirbridgeApi.sendViewSearchResult을 호출해 주세요.

코드 예시 :

_product1 = AirbridgeApi.makeProduct({productId: '1', price: 100})
_product2 = AirbridgeApi.makeProduct({productId: 2, quantity: 3})
_list = [_product1,product2];

AirbridgeApi.sendViewSearchResult(query, _list);

Product 클래스에 대한 상세 내용은 위의 Product 인스턴스 만들기를 참고해 주세요.

상품 상세페이지 조회

상품 상세페이지 조회 인앱이벤트 트래킹을 위하여 사용자가 상품의 상세정보를 조회할 경우 AirbridgeApi.sendViewProductDetail를 호출해 주세요.

코드 예시 :

_product1 = AirbridgeApi.makeProduct({productId: '1', currency: 'KRW', price: 100};

 AirbridgeApi.sendViewProductDetail(_product1);

Product 클래스에 대한 상세 내용은 위의 Product 인스턴스 만들기를 참고해주세요.

장바구니 담기

장바구니 담기 인앱이벤트 트래킹을 위하여 사용자가 장바구니에 상품을 담았을 때 AirbridgeApi.sendAddToCart를 전송해 주세요.

‘기여도분석용’으로 사용 시 코드 예시 (단순한 ROI 계산 용도로 사용할 수 있습니다) :

_product1 = AirbridgeApi.makeProduct({productId: '1', currency: 'KRW', price: 100});

AirbridgeApi.sendAddToCart(_product1,cartId=‘장바구니 ID, currency=‘통화’, totalValue=총가격);

Product 클래스에 대한 상세 내용은 위의 Product 인스턴스 만들기를 참해 주세요.

결제

결제 인앱이벤트 트래킹을 위하여 사용자가 결제를 진행할 경우 AirbridgeApi.sendCompleteOrder를 호출해 주세요.

‘기여도분석용’으로 사용 시 코드 예시 (단순한 ROI 계산 용도로 사용할 수 있습니다) :

_product1 = AirbridgeApi.makeProduct({productId: '1', price: 100})
_product2 = AirbridgeApi.makeProduct({productId: 2, quantity: 3})
_list = [_product1,_product2];

AirbridgeApi.sendCompleteOrder(_list, ‘트랜잭션 ID, 인앱구매여부, ‘통화’, 총가격);

Product 클래스에 대한 상세 내용은 위의 Product 인스턴스 만들기를 참고해주세요.

로그아웃

로그아웃 인앱이벤트 트래킹을 위하여 사용자가 로그아웃 실행시 SignOutEvent를 전송해 주세요.

생성자 타입 설명
SignOutEvent - 비어있는 로그아웃 이벤트
메서드 타입 설명
expireUser void 로그아웃 이벤트 액션

코드 예시 :

AirbridgeApi.expireUser();

커스텀 인앱이벤트 설정

원하는 인앱이벤트에 대해 SDK에서 메서드를 동적으로 호출하면 1회 이상 달성시 대시보드에서 확인할 수 있습니다.

생성자 타입 설명
GoalEvent String category가 포함되어있는 커스텀 이벤트
GoalEvent String,String category와 action가 포함되어있는 커스텀 이벤트
메서드 타입 설명
setLabel String 이벤트 라벨
setCategory String 이벤트 카테고리
setAction String 이벤트 액션
setValue int 이벤트 값
setCustomAttribute String, Object 이벤트 키 값, 오브젝트 값

코드 예시 :

AirbridgeApi.goal('category', 'action', 'label', 100);

Category, Action, Label에 대한 상세 내용은 다음 설명을 참고해 주세요.

Category / Action / Label을 활용한 인앱이벤트 구분

에어브릿지는 기본적으로 Category, Action, Label의 3가지 구분값의 조합으로 인앱이벤트별 통계를 제공합니다. 기본 인앱이벤트의 경우 Category의 값이 미리 고정되어 있으므로 Action, Label의 2가지 구분값을 자유롭게 활용할 수 있으며, 구분값을 조합할 수 있는 기본 인앱이벤트는 “회원가입”, “로그인”, “장바구니 담기”, “결제”의 4개 이벤트입니다. 커스텀 통계 리포트는 Category, Action, Label의 3개 구분값 모두 활용할 수 있습니다. 실제 활용 예시는 다음과 같습니다.

  1. (기본) Category : 회원가입 (고정) / Action : “서울” / Label : “남자”
  2. (기본) Category : 회원가입 (고정) / Action : “부산” / Label : “여자”
  3. (기본) Category : 결제 (고정) / Action : “할인쿠폰사용” / Label : “카카오페이사용”
  4. (커스텀) Category : “user-subscription-canceled” / Action : “premium” / Label : 미입력

너무 많은 Action과 Label의 경우의 수 조합은 실시간 통계 리포트의 수합을 느리게 할 수 있으므로 모든 인앱이벤트를 합쳐 최대 10,000개 이하의 경우의 수로 조합하여 사용하기를 권장드립니다.

딥링크 설정

딥링크가 발생하는 구간에서 아래와 같이 호출 해주세요.

AirbridgeApi.deeplinkLaunched('http://deeplink?q=123');

앱 세션 기간 커스텀 설정

앱 세션 기간의 커스텀 설정 방법에 대한 안내입니다.

기본 설정값

에어브릿지 앱 세션 기간의 기본값은 300초(5분)입니다.

앱 세션 기간 커스텀 설정

에어브릿지 앱 세션 기간을 사용자의 필요에 따라 설정할 수 있습니다.

AirBridge.init 코드 이전(Airbridge를 initalize하기 전)에 다음 메서드를 호출해 앱의 세션 기간을 설정할 수 있습니다.

AirbridgeApi.setCustomSessionTimeOut(100);
...
AirbridgeApi.init('[앱 영문명]', '[앱 토큰]');
...

설정 기간은 integer로 기본 단위는 s(sec)이며, 0 이상으로 최대값이 604,800(7일)인 값이어야 합니다.

검색결과
keyboard_return 이전으로