menu 이용가이드
User Guide for Developer chevron_right SDK Install Guide
WEB SDK
에어브릿지 WEB SDK는 웹페이지에 접속한 사용자들의 전환 이벤트를 추적하고, 웹사이트에 랜딩한 사용자가 모바일 앱으로 이동하는 기능을 지원합니다.

WEB SDK 기능

에어브릿지 WEB SDK는 웹사이트에 삽입되는 스크립트 형태로, 웹페이지에 접속한 사용자들의 웹 내 전환 이벤트를 추적하고, 웹사이트로 랜딩된 사용자의 앱 전환 성과 추적 및 앱 내 특정 페이지로 이동(딥링크)하는 기능을 지원합니다.

특히 네이버 광고(파워링크)를 통해 웹사이트로 유입된 유저들의 앱 전환 성과도 측정할 수 있어 네이버 광고의 성과를 더욱 상세히 분석할 수 있습니다.

에어브릿지 WEB SDK에서 지원하는 구체적인 기능들은 아래와 같습니다.

  1. 웹사이트를 통한 모바일 전환 성과 측정
  2. 웹사이트 내 전환 성과 측정
  3. 웹사이트에서 모바일 앱 내 특정 페이지 이동 (딥링크)
  4. 웹사이트에서 앱 설치를 유도하는 웹투앱배너 제공
  5. 데스크탑 사용자 설치 링크 SMS 발송, 발송수 측정 및 설치 링크 SMS 기여도 분석
  6. 웹사이트 조회수 측정 및 조회에 대한 앱 설치 기여도 분석 (TBD)

WEB SDK 기본 설치

기본적으로 아래의 스크립트를 웹페이지에 삽입한 후에 아래의 기능들 중 필요로하는 메서드를 호출하여 사용할 수 있습니다.

<!-- body 태그  끝에 해당 스크립트를 넣는 것을 권장합니다.-->
<script>
// load airbridge websdk script
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]||!a_[_b].queue){_g=i_.getElementsByTagName(r_)[0];a_[_b]={queue:[]};_d={};for(_i=0;_i<_r.length;_d={m:_d.m},_i++){_d.m=_r[_i],~_d.m.indexOf(".")&&(_e=_d.m.split(".")[0],a_[_b][_e]=a_[_b][_e]||{},a_[_b][_e][_d.m.split(".")[1]]=function(_d){return function(){a_[_b].queue.push([_d.m,arguments]);};}(_d)),a_[_b][_d.m]=function(_d){return function(){a_[_b].queue.push([_d.m,arguments]);};}(_d);}_d=i_.createElement(r_);_d.async=1;_d.src="http://static.airbridge.io/sdk/latest/airbridge.min.js";_g.parentNode.insertBefore(_d,_g);}})(window,document,"script","airbridge","init setBanner setDownload setDeeplink setDeeplinks sendSMS sendWeb setUserAgent setUserId setUserEmail setDeviceIFV setDeviceIFA setDeviceGAID events.send events.signIn events.signUp events.purchased events.addedToCart events.productDetailsViewEvent events.homeViewEvent events.productListViewEvent events.searchResultViewEvent".split(" "));


// initialize
airbridge.init({
  app: '앱 영문명',                          // 대시보드 > 앱 정보에서 확인할 수 있습니다.
  appToken: '앱 토큰',                    // 대시보드 > 앱 정보에서 확인할 수 있습니다.
  defaultChannel: '대시보드에서 확인할 채널명',  // default 값은 'airbridge.websdk' 입니다.
  defaultParams: {
    campaign: '대시보드에서 확인할 캠페인명',    // 필수 아님
    medium: '대시보드에서 확인할 매체명',         // 필수 아님
    content: '대시보드에서 확인할 콘텐츠',    // 필수 아님
    term: '대시보드에서 확인할 키워드'        // 필수 아님
    // 추가적으로 원하는 파라미터를 넣을 수 있습니다.
  }
});
</script>

WEB SDK 설치 확인

  1. Web SDK가 설치된 웹페이지로 이동 (웹페이지 조회 이벤트 발생)
  2. 에어브릿지 대시보드로 이동 → 앱 선택 → 좌측 메뉴의 '관리' 카테고리 항목 중 'SDK 설치 확인' 선택
  3. 'Web SDK 설치 확인' 메뉴에서 테스트 환경의 'Web Cookie ID' 노출 확인
  • Web Cookie ID 확인: Web SDK가 설치된 웹페이지로 이동 → 크롬 개발자 콘솔에서 'airbridge.client.clientId' 출력 → 출력된 값이 'Web Cookie Id' 입니다.
  • 'Web SDK 설치 확인' 메뉴에서 'Web Cookie Id' 노출이 확인되지 않는다면 WEB SDK 기본 설치에 안내된 대로 설치되었는지 다시 한번 확인해주세요.

User Identity 통합

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

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

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

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

'사용자 ID 설정' 및 '사용자 Email 설정'을 위한 방법은 웹사이트 내 전환 이벤트 측정에서도 확인하실 수 있습니다.

사용자 ID 설정

airbridge.setUserId('사용자 ID');

// ex)
airbridge.setUserId('airbridge123');

사용자 Email 설정

airbridge.setUserEmail('사용자 Email');

// ex)
airbridge.setUserEmail('airbridge123@ab180.co');

WEB SDK 기능별 설치

웹사이트를 통한 모바일 전환 이벤트 측정

웹사이트 내 다운로드 버튼을 통한 모바일 전환 이벤트 측정

모바일, 데스크탑 PC의 어떤 버튼을 통해서라도 앱 설치를 유도하고 웹사이트를 통한 모바일 전환 이벤트를 측정 할 수 있습니다. WEB SDK를 통해 설정된 버튼을 클릭 시 Desktop, Android, iOS별로 아래와 같이 이동하게 됩니다.

WEB SDK가 설치된 플랫폼 Desktop에서 클릭 시 Android에서 클릭 시 iOS에서 클릭 시
데스크탑 PC 웹사이트 구글 플레이스토어로 이동(웹) - -
모바일 웹사이트 - 구글 플레이스토어로 이동(앱) iTunes 앱스토어로 이동(앱)

즉, 모바일 웹사이트에 설치된 배너를 클릭 시 자동으로 플랫폼에 따라서 분기되어, Android일 경우 구글 플레이스토어로 이동하며, iOS일 경우 iTunes 앱스토어로 이동하게 됩니다. 반면 데스크탑에서는 iTunes 앱스토어에서는 앱을 설치할 수 없으므로, 구글 아이디로 로그인 시 자동으로 앱을 설치할 수 있는 구글 플레이스토어로만 일괄 이동하게 됩니다. 구글 플레이스토어에서의 설치 추적은 데스크탑 PC 웹사이트, 모바일 웹사이트, 모바일 앱 버전 모두에서 지원됩니다.

설치 방법은 아래와 같이 airbridge.setDownload 메서드에 버튼의 ID값을 넣어주시면 됩니다.

주의하실 사항은 사용자를 마켓으로 보내는 역할은 에어브릿지 WEB SDK에서 하기 때문에 다운로드용 버튼에 앱마켓으로 보내는 <a>tag 등이 사용되면 안됩니다.

// 원하는 앱 설치 버튼을 통한 설치 추적하기 (이 경우 ID가 'app_download')
// 대시보드 통계는 airbridge.init시 설정한 defaultChannel값이 Channel로, 다운로드 버튼의 ID값이 content로 들어가게 됩니다.
<button id="app_download">앱으로이동</button>

airbridge.setDownload({
  buttonId: "app_download"
}, function(err, res) {
  // callback function
});

만약 사용자를 웹사이트 랜딩 후 곧바로 마켓으로 보내고 싶거나, custom channel, params를 사용하고 싶다면 goDownload 메서드를 사용할 수 있습니다.

airbridge.goDownload({
  channel: '대시보드에서 확인할 채널명'
  params: {
    campaign: '대시보드에서 확인할 캠페인명',    // 필수 아님
    medium: '대시보드에서 확인할 매체명',         // 필수 아님
    content: '대시보드에서 확인할 콘텐츠',    // 필수 아님
    term: '대시보드에서 확인할 키워드'        // 필수 아님
});

callback 함수를 사용하여, error나 response값을 받아 직접 사용할 수 있으며 callback 함수 이용시 자동 redirect는 되지 않습니다.

airbridge.goDownload({
  channel: '대시보드에서 확인할 채널명'
  params: {
    campaign: '대시보드에서 확인할 캠페인명',    // 필수 아님
    medium: '대시보드에서 확인할 매체명',         // 필수 아님
    content: '대시보드에서 확인할 콘텐츠',    // 필수 아님
    term: '대시보드에서 확인할 키워드'        // 필수 아님
}, function(err, res) {
    if (res != null) {
        window.open(res.targetUrl);
    }
});

네이버 검색 광고를 통한 모바일 전환 이벤트 측정 (파워 링크)

에어브릿지 WEB SDK를 사용하면 네이버의 추적 기능을 통해 네이버 검색 광고로 웹사이트에 랜딩된 사용자들의 모바일 전환 이벤트를 측정할 수 있습니다.

네이버 검색 광고를 통해 웹사이트로 유입된 유저들의 모바일 전환 이벤트를 측정하기 위해서는 웹사이트 내 다운로드 버튼을 통한 모바일 전환 이벤트 측정 설정을 완료 후 네이버 광고에서 파워 링크 캠페인에 추적 기능(추적 경유 사이트)을 적용하면 됩니다.

추적 기능(추적 경유 사이트)을 적용하는 방법은 에어브릿지 이용가이드 내 네이버 광고 (Naver Ad)에서 확인할 수 있습니다.

네이버 검색 광고의 경우 네이버의 추적 기능(추적 경유 사이트)을 사용하여 광고 클릭 후 웹페이지로 유입 시 URL에 airbridge_sid 라는 파라미터가 추가되고, WEB SDK에선 defaultChannel, defaultParams에 보다 airbridge sid를 우선으로 적용합니다.
따라서 전환 성과는 airbridge.init시 설정한 defaultChannel이 아닌 네이버 검색 광고로 적용됩니다.

네이버 검색 외의 광고나 바이럴 채널 등을 통한 모바일 전환 이벤트 측정

광고 혹은 외부 웹사이트를 거쳐 에어브릿지 WEB SDK가 설치된 웹사이트로 랜딩되는 경우 웹사이트 URL 뒤에 query parameter가 붙어있을 경우 아래 javascript 코드를 통해 URL내의 query parameter를 파싱하고, airbridge.init 할 때 defaultChannel과 defaultParams에 정보로 넣어줄 수 있습니다. 즉 경로를 통해 웹사이트에 유입되었으며, 모바일 전환까지 이뤄졌는지 측정할 수 있습니다.

웹사이트에 랜딩되었을 때 위의 URL처럼 query parameter가 붙어있을 것이고 아래와 같이 query parameter를 파싱하는 소스 코드를 ‘airbridge.init’ 호출 전에 삽입하고 airbridge.setDownload 메서드를 추가한 후 buttonID에 앱 다운로드 버튼의 ID값을 넣어주시면 설정이 완료됩니다.

주의하실 사항은 사용자를 마켓으로 보내는 역할은 에어브릿지 WEB SDK에서 하기 때문에 다운로드용 버튼에 앱마켓으로 보내는 <a>tag등이 사용되면 안됩니다.

// query parameter를 파싱하는 소스 코드. airbridge.init 호출 전에 삽입
function queryStringToJSON(url) {
    if (url.search.slice !== undefined) {
        var pairs = url.search.slice(1).split('&');
    } else {
        var pairs = url.split('?')[1].split('&');
    }

    var result = {};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    });

    return JSON.parse(JSON.stringify(result));
}

var url = window.location.href;
var params = queryStringToJSON(url);

// initialize
airbridge.init({
  app: 'app 이름',                        
  appToken: 'app 토큰',                  
  defaultChannel: params['utm_source']
  defaultParams: {
    campaign: params['utm_campaign'],
    medium: params['utm_medium'],
    term: params['utm_term']
  }
});

// 원하는 앱 설치 버튼을 통한 설치 추적하기 (이 경우 ID가 'app_download')
<button id="app_download">앱으로이동</button>

airbridge.setDownload({
  buttonId: "app_download"
}, function(err, res) {
  // callback function
});

웹사이트 내 전환 이벤트 측정

에어브릿지 WEB SDK를 통해 사용자의 웹사이트 내 웹 전환 이벤트를 측정할 수 있습니다.

일반적으로 많이 사용하는 “회원가입”, “로그인”, “장바구니 담기”, “결제 완료”는 기본 전환이벤트로 별도 매소드가 기본 제공되며, 그 외에도 원하는 전환이벤트를 커스텀하게 등록하여 성과를 측정할 수 있습니다.

인앱이벤트 API에 들어가는 모든 파라미터는 Optional입니다.

사용자 ID 설정

airbridge.setUserId('사용자 ID');

// ex)
airbridge.setUserId('airbridge123');

User Identity 통합을 위하여 사용자 ID와 사용자 Email 중 하나는 반드시 설정할 것을 권장합니다.

사용자 Email 설정

airbridge.setUserEmail('사용자 Email');

// ex)
airbridge.setUserEmail('airbridge123@ab180.co');

User Identity 통합을 위하여 사용자 ID와 사용자 Email 중 하나는 반드시 설정할 것을 권장합니다.

회원가입

airbridge.events.signUp({
    userId: '사용자 ID',
    userEmail: '사용자 이메일',
    action: '액션명',
    label: '이벤트 라벨'
});

// ex)
airbridge.events.signUp({ userId: 'ab180' });

로그인

airbridge.events.signIn({
    userId: '사용자 ID',
    userEmail: '사용자 이메일',
    action: '액션명',
    label: '이벤트 라벨'
});

// ex)
airbridge.events.signIn({ userId: 'ab180' });

홈화면 조회

airbridge.events.homeViewEvent({ });

상품상세 조회

airbridge.events.productDetailsViewEvent({
  products: [{
          id: '1',
          name: 'MacBook Pro',
          price: 1548200,
          currency: 'KRW'
      }
  ]
});

상품리스트조회

airbridge.events.productListViewEvent({
  products: [{
          id: '1',
          name: 'MacBook Pro',
          price: 1548200,
          currency: 'KRW',
          positionInList: 1
      },
      {
          id: '2',
          name: 'MacBook Air',
          price: 1500000,
          currency: 'KRW',
          positionInList: 2
      }
  ],
  productListID: '리스트 ID'
});

검색결과조회

airbridge.events.searchResultViewEvent({

  products: [{
          id: '1',
          name: 'MacBook Pro',
          price: 1548200,
          currency: 'KRW',
          positionInList: 1
      },
      {
          id: '2',
          name: 'MacBook Air',
          price: 1500000,
          currency: 'KRW',
          positionInList: 2
      }
  ],
  query: '검색 Query'

  });

장바구니 담기

airbridge.events.addedToCart({
    products: [{
            id: '1',
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
            quantity: 3,
            positionInList: 1
        },
        {
            id: '2',
            name: 'MacBook Air',
            price: 1500000,
            currency: 'KRW',
            quantity: 2,
            positionInList: 2
        }
    ],
    cartId: '카트 ID',
    totalValue: 15000,
    currency: 'KRW'
});

결제완료

airbridge.events.purchased({
    products: [{
            id: '1',
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
            quantity: 3
        },
        {
            id: '2',
            name: 'MacBook Air',
            price: 1500000,
            currency: 'KRW',
            quantity: 2
        }
    ],
    inAppPurchased: true,
    totalValue: 15000,
    currency: 'KRW',
    transactionId: '전환 ID'
});

커스텀 이벤트

airbridge.events.send("custom_category", {
    "label": "label",
    "action": "action",
    "value": 123.0,
    "customAttributes": {
        "custom1": 123,
        "custom2": 'abc'
    }
});

에어브릿지 WEB SDK는 딥링킹 기능을 지원하며, 앱이 설치된 사용자들을 웹사이트에서 앱으로 보내기 위한 중계페이지에 사용될 수 있습니다. 딥링크 실행 통계는 기본적으로 airbridge.init에서 설정해주신 defaultChanneldefaultParams를 기준으로 쌓이게 됩니다.

// html
<button id="deeplinking-button-1">앱으로 이동</button>

// js script
// airbridge.init 이후 삽입
airbridge.setDeeplinks({
  deeplinks: {
        ios: "ablog://contents?title=data-science-with-r-2-data-visualization",
        android: "ablog://contents?title=data-science-with-r-2-data-visualization",
        desktop: "http://blog.ab180.co/data-science-with-r-2-data-visualization"
    },
  fallbacks: {
    ios: "http://blog.ab180.co/data-science-with-r-2-data-visualization", // itunes-appstore(default), google-play, custom url
    android: "google-play" // google-play(default), itunes-appstore, custom url
  },
  redirect: true,
  buttonID: "deeplinking-button-1",
  desktopPopUp: true
});

airbridge.setDeeplinks에 사용되는 파라미터는 아래와 같습니다.

  • deeplinks: 필수값으로 앱이 설치되었을 경우 iOS, Android, Desktop 사용자가 어디로 이동할지 지정합니다.
  • buttonID: 버튼 element의 id를 적어넣으면, 해당 버튼을 클릭했을때 앱으로 이동합니다. 아래 redirect 파라미터를 사용하여 자동 redirect을 원하신다면 buttonID를 지정하지 않으셔도 됩니다.
  • redirect: true로 설정되면, WEB SDK 스크립트가 로딩되었을 때 자동으로 redirect를 시도합니다. 기본값은 false입니다.
  • desktopPopUp: true로 설정되면, 데스크탑 사용자의 경우 웹페이지가 새창에 뜨게됩니다. 기본값은 false입니다.
  • fallbacks: 앱이 설치되어있지 않았을 경우, iOS와 Android의 fallback을 지정합니다. itunes-appstore, google-play 혹은 http, https 형식의 커스텀 URL(custom url)을 지정할 수 있습니다.

웹사이트에서 앱 설치를 유도하는 웹투앱 배너

모바일 사용자가 설치 버튼을 클릭

웹투앱배너는 웹 사용자를 모바일 앱으로 보내주는 웹사이트 배너입니다. 데스크탑 사용자의 경우, 웹투앱배너를 통해 다운로드 링크를 SMS로 전송할 수 있으며, 배너의 제목과 설명, 버튼의 색깔 등을 변경할 수 있습니다. (대시보드 웹투앱배너 메뉴에서 배너의 설정을 변경한다고, 실제 웹사이트 웹투앱배너 설정이 변경되진 않습니다.)

// 기본 배너를 설정하는 코드, 이 코드를 삭제할 시 기본 배너가 더 이상 노출되지 않습니다.
airbridge.setBanner({
   title: '에어스타일',
   description: '본격취향저격 - 에어스타일에서 내 스타일을 찾아보세요',
   keyColor: '#00a0c6',         // 버튼 색깔
   position: 1                  // 1이면 상단, 2이면 하단입니다.
});

데스크탑 사용자 설치 링크 SMS 발송, 발송수 측정 및 설치 링크 SMS 기여도 분석

데스크탑 PC에서 앱 설치 버튼을 대체하여 가장 많이 사용중인 SMS 발송을 에어브릿지에서 지원합니다. SMS 발송 기능을 구축하기 위해서 들어가는 많은 시간과 노력 대신 단 하나의 매소드 호출만으로도 쉽게 해당 기능을 구현할 수 있습니다.

// 매소드 호출만으로 쉽게 SMS 발송하기
airbridge.sendSMS({
  phoneNum: document.getElementById("phone-number").value,   // 010-0000-0000
  message: 'ab180 블로그 앱을 다운받아보세요!'
});

웹사이트 조회수 측정 및 조회에 대한 앱 설치 기여도 분석 (TBD)

WEB SDK를 설치했다면, 별도 설정없이도 웹페이지 조회수를 측정할 수 있습니다. 또한 사용자가 모바일 웹사이트만 보고, 마켓에서 앱을 검색해서 설치했을 경우 핑거프린트 매칭을 통해 웹사이트 조회에 대한 기여도 분석도 가능합니다.

검색결과
keyboard_return 이전으로