menu 이용가이드
close
Advanced features chevron_right WEB SDK
WEB SDK 기능
에어브릿지 WEB SDK는 웹페이지에 접속한 사용자들의 행동을 추적하고, 웹사이트에 랜딩한 사용자가 모바일 앱으로 이동할 수 있도록 도와줍니다.

웹사이트 광고 성과 측정

WEB SDK를 통해 웹사이트의 광고 성과를 측정할 수 있습니다. 광고를 통해 웹사이트 URL 뒤에 query parameter가 붙어오면, 이 javascript 코드를 통해 query parameter를 파싱하고, airbridge.init시 defaultChannel과 defaultParams에 정보로 넣어주면 됩니다.

위의 URL처럼 query parameter가 들어왔다면, 아래의 소스 코드를 사용하여 광고 성과를 측정할 수 있습니다.

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: 'yourapp',                        
  appToken: 'yourapptoken',                  
  defaultChannel: params['utm_source']
  defaultParams: {
    campaign: params['utm_campaign'],
    medium: params['utm_medium'],
    term: params['utm_term']
  }
});

에어브릿지에서 네이버 광고 연동을 통해 추적 경유 사이트를 등록하였다면, WEB SDK에서 위의 설정을 별도로 해주지 않아도 됩니다. (추적 경유 사이트 사용시 URL에 airbridge_sid 파라미터가 추가되고, WEB SDK에선 defaultChannel, defaultParams에 보다 airbridge sid를 우선으로 적용)

딥링크

에어브릿지 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이면 하단입니다.
});

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

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

앱 다운로드 버튼 클릭수 측정 및 앱 다운로드 버튼 클릭에 대한 기여도 분석

WEB SDK에서 제공하는 setDownload 메소드 호출로 어떤 디자인의 앱 설치 버튼을 통해서도 앱 설치를 유도 및 추적할 수 있습니다.

// 원하는 버튼을 다운로드 버튼으로 설정하여 설치 추적하기 (이 경우 버튼 element ID가 'download-button')
// 통계는 채널(init시 지정한 defaultChannel)과 content(버튼 ID)값이 들어가게 됩니다.
airbridge.setDownload({
  buttonId: "download-button"
});

만약 사용자를 웹사이트 랜딩 후 곧바로 마켓으로 보내고 싶거나, 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);
    }
});

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

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

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

웹사이트 내 웹 전환 성과 측정

에어브릿지 WEB SDK를 통해 사용자의 웹사이트 내 웹 전환 성과를 측정할 수 있습니다. 일반적으로 많이 사용하는 “회원가입”, “로그인”, “장바구니 담기”, “결제 완료”는 기본 전환이벤트로 별도 매소드가 기본 제공되며, 그 외에도 원하는 전환이벤트를 커스텀하게 등록하여 성과를 측정할 수 있습니다.
인앱이벤트 API에 들어가는 모든 파라미터는 Optional입니다.

사용자 ID 설정

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

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

사용자 Email 설정

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

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

회원가입

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.addToCart({
    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.purchase({
    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
        }
    ],
    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',
    }
});
검색결과
keyboard_return이전으로