개발자 가이드
SDK Integration
Web SDK

Web SDK

2025년 8월 13일에 업데이트됨

Web SDK 설치하기

에어브릿지 Web SDK는 아래 방법으로 패키지를 설치할 수 있습니다.

아래의 코드를 <head> 내부의 가장 하단에 추가하세요.

12345678
<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]){var n=function(){var c=i_.createElement(r_);c.onerror=function(){h.queue.filter(function(a){return 0<=_d.indexOf(a[0])}).forEach(function(a){a=a[1];a=a[a.length-1];"function"===typeof a&&a("error occur when load airbridge")})};c.async=1;c.src=_r;"complete"===i_.readyState?i_.head.appendChild(c):a_.addEventListener("load",function k(){a_.removeEventListener("load",k);i_.head.appendChild(c)})},h={queue:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(c){var a=c.split("."),k=a.pop();a.reduce(function(p,q){return p[q]=p[q]||{}},h)[k]=function(){h.queue.push([c,arguments])}});a_[_b]=h;"undefined"!==typeof i_.documentMode&&(_r=_r.replace(/^https:/,""));0<_g?(_b=new (a_.XDomainRequest||a_.XMLHttpRequest),_i=function(){},_b.open("GET",_r),_b.timeout=_g,_b.onload=function(){n()},_b.onerror=_i,_b.onprogress=_i,_b.ontimeout=_i,_b.send()):n()}})(window,document,"script","airbridge","https://static.airbridge.io/sdk/latest/airbridge.min.js","init startTracking stopTracking openBanner setBanner setDownload setDownloads openDeeplink setDeeplinks sendWeb setUserAgent setMobileAppData setUserID clearUserID setUserEmail clearUserEmail setUserPhone clearUserPhone setUserAttribute removeUserAttribute clearUserAttributes setUserAlias removeUserAlias clearUserAlias clearUser setUserId setUserAttributes addUserAlias setDeviceAlias removeDeviceAlias clearDeviceAlias setDeviceIFV setDeviceIFA setDeviceGAID events.send events.signIn events.signUp events.signOut events.purchased events.addedToCart events.productDetailsViewEvent events.homeViewEvent events.productListViewEvent events.searchResultViewEvent".split(" "),["events.wait","fetchResource","createTouchpoint","createTrackingLink"],0);

airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
})
</script>

아래의 명령어를 실행하여 airbridge-web-sdk-loader를 설치합니다.

1
npm install airbridge-web-sdk-loader

airbridge-web-sdk-loader 패키지를 설치했다면 다음과 같이 사용할 수 있습니다.

123456
import airbridge from 'airbridge-web-sdk-loader'

airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
})

app과 webToken은 에어브릿지 대시보드의 설정 → 토큰 관리에서 확인할 수 있습니다.

지원 브라우저

에어브릿지 Web SDK는 ES5를 지원하는 모든 브라우저에서 동작합니다.

브라우저	지원 여부
Chrome	✔️
Firefox	✔️
Safari	✔️
Internet Explorer	IE 9 이상

SDK 초기화하기

에어브릿지 Web SDK는 airbridge.init() 함수를 사용하여 초기화할 수 있습니다. 초기화 시 필수로 입력해야 하는 app과 webToken은 에어브릿지 대시보드의 설정 → 토큰 관리에서 확인할 수 있습니다. 필요에 따라 다양한 초기화 옵션을 추가로 설정할 수 있습니다.

아래 코드는 초기화 예시 코드입니다.

옵션	필수여부	타입	기본값	설명
`app`	필수	`string`	`-`	Web SDK 초기화시 필요한 고객사의 앱 이름입니다.
`webToken`	필수	`string`	`-`	Web SDK 초기화시 필요한 고객사의 웹 SDK 토큰입니다.
`autoStartTrackingEnabled`	옵션	`boolean`	`true`	옵트인을 명시적으로 해야하는 경우 이 값을 `false`로 설정하고 `startTracking`을 호출하세요 자세한 내용은 옵트인(Opt-In) 설정하기를 참고하세요.
`utmParsing`	선택	`boolean`	`false`	URL 파라미터의 UTM 값을 각각 Airbridge 캠페인 파라미터 값으로 자동 설정합니다. 자세한 내용은 캠페인 파라미터 설정하기를 참고하세요.
`utmParameterValueReplaceMap`	선택	`object`	`-`	utmParameterValueReplaceMap을 설정하면 `utmParsing`으로 수집한 UTM 파라미터 값을 원하는 값으로 지정할 수 있습니다. 자세한 내용은 캠페인 파라미터 설정하기를 참고하세요
`urlQueryMapping`	선택	`object`	`-`	`urlQueryMapping`을 쓰면 `utmParsing`은 무시됩니다. 자세한 내용은 캠페인 파라미터 설정하기를 참고하세요
`user`	선택	`object`	`-`	초기화 시 사용자 정보를 전달 할 수 있습니다. 자세한 내용은 초기화 시 유저 정보 설정하기를 참고하세요
`userHash`	선택	`boolean`	`true`	유저 이메일과 전화번호를 해시화하여 전송할 수 있습니다. 자세한 내용은 유저 속성 설정하기를 참고하세요
`cookieWindow`	선택	`number`	`3`	자세한 내용은 어트리뷰션 윈도우 수정하기를 참고하세요
`cookieWindowInMinutes`	선택	`number`	`-`	자세한 내용은 어트리뷰션 윈도우 수정하기를 참고하세요
`useProtectedAttributionWindow`	선택	`boolean`	`true`	자세한 내용은 웹 투 앱 어트리뷰션의 기여 기간 설정하기를 참고하세요.
`protectedAttributionWindowInMinutes`	선택	`number`	`30`	자세한 내용은 웹 투 앱 어트리뷰션의 기여 기간 설정하기를 참고하세요.
`shareCookieSubdomain`	선택	`boolean`	true	자세한 내용은 서브 도메인 간에 기여 정보 공유하기를 참고하세요.
`collectMolocoCookieID`	선택	`boolean`	`false`	몰로코 쿠키 ID 를 설정하기 위한 옵션입니다.
`useStoragePerApp`	선택	`boolean`	`false`	저장 공간을 분리하여 같은 루트 도메인을 공유하는 서브 도메인에서 사용 중인 여러 앱의 어트리뷰션 데이터를 앱 별로 확인하기 위한 옵션입니다. 자세한 내용은 앱 데이터 저장 공간 분리하기를 참고하세요.

옵트인(Opt-In) 설정하기

알립니다
필수 설정 기능이 아닙니다. 필요한 기능인지 확인한 후에 설정하세요.

옵트인(Opt-In)은 유저가 동의할 때에만 유저 정보를 사용하는 정책입니다.

autoStartTrackingEnabled 옵션을 false로 설정한 후에, 이벤트를 수집할 수 있는 시점에 startTracking 함수를 호출하세요. startTracking 함수가 호출된 시점부터 이벤트 수집을 시작합니다.
기본 설정은 true입니다.

autoStartTrackingEnabled 설정으로, 초기화를 마친 후에 자동으로 이벤트 추적이 시작되지 않도록 설정하세요.

123456
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    autoStartTrackingEnabled: false,
})

개인정보 수집 및 활용에 대한 유저 응답을 수집하세요. 유저가 개인정보 수집 및 활용에 동의하면 이벤트 추적을 시작합니다.
1
airbridge.startTracking()

옵트아웃(Opt-Out) 설정하기

알립니다
필수 설정 기능이 아닙니다. 필요한 기능인지 확인한 후에 설정하세요.

옵트아웃(Opt-Out)은 유저가 거부하기 전까지 유저 정보를 사용할 수 있는 정책입니다.

autoStartTrackingEnabled 옵션을 true로 설정한 후에, 이벤트를 수집할 수 없는 시점에 stopTracking 함수를 호출하세요. stopTracking 함수가 호출된 시점부터 이벤트 수집을 시작합니다.

autoStartTrackingEnabled 설정으로, 초기화를 마친 후에 자동으로 이벤트 추적이 시작되도록 설정하세요. autoStartTrackingEnabled 옵션의 기본값이 true이기 때문에 입력하지 않아도 자동으로 이벤트를 추적합니다.
123456
airbridge.init({ app: 'YOUR_APP_NAME', webToken: 'YOUR_WEB_TOKEN', // ... autoStartTrackingEnabled: true, })
개인정보 수집 및 활용에 대한 유저 응답을 수집하세요. 유저가 개인정보 수집 및 활용을 거부하면 이벤트 추적을 중단합니다.
1
airbridge.stopTracking()

웹 이벤트

에어브릿지 SDK가 서비스에서 발생한 유저의 특정 행동을 설정에 따라 수집한 후에 이벤트로 전송합니다.

에어브릿지 이벤트 살펴보기

웹 이벤트 전송하기

웹 이벤트를 전송하기 위해 airbridge.events.send 함수를 사용합니다.
아래 예시를 참고하세요.

123456789101112131415161718
airbridge.events.send('category', {
    label: 'Tool',
    action: 'Hammer',
    value: 10,
    semanticAttributes: {
        currency: 'USD',
        transactionID: 'transaction_123',
        products: [
            {
                productID: 'coke_zero',
                name: 'PlasticHammer',
            },
        ],
    },
    customAttributes: {
        promotion: 'FirstPurchasePromotion',
    },
})

옵션	필수여부	타입	설명
`category`	필수	`string`	이벤트의 이름
`action`	선택	`string`	이벤트 하위 분류
`label`	선택	`string`	이벤트 하위 분류
`value`	선택	`number`	이벤트 하위 분류
`semanticAttributes`	선택	`object`	이벤트의 시맨틱 어트리뷰트
`customAttributes`	선택	`object`	이벤트의 커스텀 어트리뷰트

각 구성요소의 정의와 사용할 수 있는 문자열을 아래에서 확인하세요.

웹 이벤트 추가 설정하기

알립니다
필수 설정 기능이 아닙니다. 필요한 기능인지 확인한 후에 설정하세요.

전송하는 웹 이벤트에 필요한 설정을 추가할 수 있습니다.

에어브릿지 SDK는 디바이스 식별자를 모든 이벤트에 포함해 전송하는 기능을 지원합니다.

함수	설명
`airbridge.setDeviceAlias`	디바이스 식별자를 추가로 입력합니다.
`airbridge.removeDeviceAlias`	디바이스 식별자 중에서 지정한 디바이스 식별자를 삭제합니다.
`airbridge.clearDeviceAlias`	디바이스 식별자를 모두 삭제합니다.

123
airbridge.setDeviceAlias('<DEVICE_ALIAS_KEY>', '<DEVICE_ALIAS_VALUE>')
airbridge.removeDeviceAlias('<DEVICE_ALIAS_KEY>')
airbridge.clearDeviceAlias()

이벤트 예시 코드

에어브릿지가 수집하는 주요 인앱 이벤트는 스탠다드 이벤트와 커스텀 이벤트입니다.

스탠다드 이벤트는 에어브릿지가 정의한 이벤트입니다.
아래 예시 코드를 참고하세요.

회원가입

123456789
// Make sure to set user information before sending the event
airbridge.setUserID('string')
airbridge.setUserPhone('string')
airbridge.setUserEmail('string')
airbridge.setUserAttribute('string', 'string')
airbridge.setUserAlias('string', 'string')

// Send event
airbridge.events.send('airbridge.user.signup')

로그인

123456789
// Make sure to set user information before sending the event
airbridge.setUserID('string')
airbridge.setUserPhone('string')
airbridge.setUserEmail('string')
airbridge.setUserAttribute('string', 'string')
airbridge.setUserAlias('string', 'string')

// Send event
airbridge.events.send('airbridge.user.signin')

로그아웃

12345
// Send event before clearing user information
airbridge.events.send('airbridge.user.signout')

// Initialize user information
airbridge.clearUser()

홈화면 조회

1
airbridge.events.send('airbridge.ecommerce.home.viewed')

상품리스트 조회

12345678910111213141516171819202122
airbridge.events.send('airbridge.ecommerce.product.viewed', {
    semanticAttributes: {
        listID: '84e6e236-38c4-48db-9b49-16e4cc064386',
        currency: 'USD',
        products: [
            {
                productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
                name: 'PlasticHammer',
                price: 10,
                quantity: 1,
                currency: 'USD',
            },
            {
                productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
                name: 'PlasticFork',
                price: 1,
                quantity: 1,
                currency: 'USD',
            },
        ],
    },
})

검색결과 조회

12345678910111213141516171819202122
airbridge.events.send('airbridge.ecommerce.searchResults.viewed', {
    semanticAttributes: {
        query: 'Plastic',
        currency: 'USD',
        products: [
            {
                productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
                name: 'PlasticHammer',
                price: 10,
                quantity: 1,
                currency: 'USD',
            },
            {
                productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
                name: 'PlasticFork',
                price: 1,
                quantity: 1,
                currency: 'USD',
            },
        ],
    },
})

상품상세페이지 조회

123456789101112131415161718
airbridge.setUserID('string')
airbridge.setUserPhone('string')
airbridge.setUserEmail('string')
airbridge.setUserAttribute('string', 'string')
airbridge.setUserAlias('string', 'string')

airbridge.events.send('airbridge.ecommerce.product.viewed', {
    semanticAttributes: {
        currency: 'USD',
        products: [{
            productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
            name: 'PlasticHammer',
            price: 10,
            quantity: 1,
            currency: 'USD',
        }],
    },
})

결제수단 등록

12345
airbridge.events.send('airbridge.addPaymentInfo', {
    semanticAttributes: {
        type: 'CreditCard',
    },
})

위시리스트 추가

12345678910111213
airbridge.events.send('airbridge.addToWishlist', {
    semanticAttributes: {
        listID: '189a2f8b-83ee-4074-8158-726be54e57d4',
        currency: 'USD',
        products: [{
            productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
            name: 'PlasticHammer',
            price: 10,
            quantity: 1,
            currency: 'USD',
        }],
    },
})

장바구니 담기

12345678910111213
airbridge.events.send('airbridge.ecommerce.product.addedToCart', {
    semanticAttributes: {
        cartID: '421eaeb7-6e80-4694-933e-f2e1a55e9cbd',
        currency: 'USD',
        products: [{
            productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
            name: 'PlasticHammer',
            price: 10,
            quantity: 1,
            currency: 'USD',
        }],
    },
})

결제 시작

12345678910111213141516171819202122
airbridge.events.send('airbridge.initiateCheckout', {
    semanticAttributes: {
        transactionID: '0a7ee1ec-33da-4ffb-b775-89e80e75978a',
        currency: 'USD',
        products: [
            {
                productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
                name: 'PlasticHammer',
                price: 10,
                quantity: 1,
                currency: 'USD',
            },
            {
                productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
                name: 'PlasticFork',
                price: 1,
                quantity: 1,
                currency: 'USD',
            },
        ],
    },
})

구매 완료

123456789101112131415161718192021222324
airbridge.events.send('airbridge.ecommerce.order.completed'{
    semanticAttributes: {
        value: 11,
        transactionID: '8065ef16-162b-4a82-b683-e51aefdda7d5',
        currency: 'USD',
        inAppPurchased: true,
        products: [
            {
                productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
                name: 'PlasticHammer',
                price: 10,
                quantity: 1,
                currency: 'USD',
            },
            {
                productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
                name: 'PlasticFork',
                price: 1,
                quantity: 1,
                currency: 'USD',
            },
        ],
    },
})

구매 취소

주의하세요
구매 취소 이벤트의 경우, 반드시 구매 완료 이벤트의 transactionID를 구매 취소 이벤트의 transactionID에 입력해 주세요. transactionID가 서로 일치하지 않으면 구매취소 이벤트가 반영되지 않습니다.
자세한 내용은 정확한 구매 성과 측정을 위한 구매 취소 이벤트 분석하기를 참고해 주세요.

123456789101112131415161718192021222324
airbridge.events.send('airbridge.ecommerce.order.canceled', {
    semanticAttributes: {
        value: 11,
        transactionID: '8065ef16-162b-4a82-b683-e51aefdda7d5',
        currency: 'USD',
        inAppPurchased: true,
        products: [
            {
                productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
                name: 'PlasticHammer',
                price: 10,
                quantity: 1,
                currency: 'USD',
            },
            {
                productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
                name: 'PlasticFork',
                price: 1,
                quantity: 1,
                currency: 'USD',
            },
        ],
    },
})

체험판 시작

12345678910111213
airbridge.events.send('airbridge.startTrial', {
    semanticAttributes: {
        transactionID: 'ef1e5271-0370-407c-b1e9-669a8df1dc2c',
        currency: 'USD',
        period: 'P1M',
        products: [{
            productID: '306a57cb-f653-4220-a208-8405d8e4d506',
            name: 'MusicStreamingMembership',
            price: 15,
            currency: 'USD',
        }],
    },
})

123456789101112131415
airbridge.events.send('airbridge.subscribe', {
    semanticAttributes: {
        value: 15,
        currency: 'USD',
        transactionID: 'cbe718c7-e44e-4707-b5cd-4a6a29f29649',
        period: 'P1M',
        isRenewal: true,
        products: [{
            productID: '306a57cb-f653-4220-a208-8405d8e4d506',
            name: 'MusicStreamingMembership',
            price: 15,
            currency: 'USD',
        }],
    },
})

구독 취소

123456789101112131415
airbridge.events.send('airbridge.unsubscribe', {
    semanticAttributes: {
        value: 15,
        currency: 'USD',
        transactionID: 'cbe718c7-e44e-4707-b5cd-4a6a29f29649',
        period: 'P1M',
        isRenewal: true,
        products: [{
            productID: '306a57cb-f653-4220-a208-8405d8e4d506',
            name: 'MusicStreamingMembership',
            price: 15,
            currency: 'USD',
        }],
    },
})

광고 노출

1234567891011121314151617181920212223
airbridge.events.send('airbridge.adImpression', {
    semanticAttributes: {
        value: 0.01,
        adPartners: [{
            app_version: '5.18.0',
            adunit_id: '12345',
            adunit_name: '12345',
            adunit_format: 'Banner',
            id: '12345',
            currency: 'USD',
            publisher_revenue: 12345.123,
            adgroup_id: '12345',
            adgroup_name: '12345',
            adgroup_type: '12345',
            adgroup_priority: '12345',
            country: 'kr',
            precision: 'publisher_defined',
            network_name: '12345',
            network_placement_id: '12345',
            demand_partner_data: '12345',
        }],
    },
})

광고 클릭

1234567891011121314151617181920212223
airbridge.events.send('airbridge.adClick', {
    semanticAttributes: {
        value: 0.1,
        adPartners: [{
            app_version: '5.18.0',
            adunit_id: '12345',
            adunit_name: '12345',
            adunit_format: 'Banner',
            id: '12345',
            currency: 'USD',
            publisher_revenue: 12345.123,
            adgroup_id: '12345',
            adgroup_name: '12345',
            adgroup_type: '12345',
            adgroup_priority: '12345',
            country: 'kr',
            precision: 'publisher_defined',
            network_name: '12345',
            network_placement_id: '12345',
            demand_partner_data: '12345',
        }],
    },
})

튜토리얼 완료

12345
airbridge.events.send('airbridge.completeTutorial', {
    semanticAttributes: {
        description: 'Finish Initial Tutorial',
    },
})

레벨 달성

12345
airbridge.events.send('airbridge.achieveLevel', {
    semanticAttributes: {
        level: 13,
    },
})

과제 달성

1234567
airbridge.events.send('airbridge.unlockAchievement', {
    semanticAttributes: {
        achievementID: '36a0f0bb-b153-4be1-a3e0-3cb5b2b076c1'
        description: 'Finish Initial Tutorial',
        score: 80,
    },
})

평가

1234567891011121314
airbridge.events.send('airbridge.rate', {
    semanticAttributes: {
        rateID: '531c64b3-4704-4780-a306-89014ec18daf',
        rate: 4.5,
        maxRate: 5,
        currency: 'USD',
        products: [{
            productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
            name: 'PlasticHammer',
            price: 10,
            currency: 'USD',
        }],
    },
})

123456
airbridge.events.send('airbridge.share', {
    semanticAttributes: {
        description: 'Share Promotion',
        sharedChannel: 'CopyLink',
    },
})

일정 예약

1234567891011
airbridge.events.send('airbridge.schedule', {
    semanticAttributes: {
        scheduleID: '75712915-2cd9-4e42-a85e-8d42f356f4c6',
        datetime: '2024-01-01T00:00:00+00:00',
        place: 'ConferenceRoom',
        products: [{
            productID: 'abb3e65d-17bc-4b28-89e3-5e356c0ea697',
            name: 'ConferenceRoom',
        }],
    },
})

크레딧 사용

123456789101112
airbridge.events.send('airbridge.spendCredits', {
    semanticAttributes: {
        transactionID: '22eb193d-be11-4fe4-95da-c91a196faf1c',
        currency: 'USD',
        products: [{
            productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
            name: 'PlasticHammer',
            price: 10,
            currency: 'USD',
        }],
    },
})

커스텀 이벤트는 앱 서비스에 맞는 광고 성과를 추적하기 위해 스탠다드 이벤트에 해당하지 않는 유저의 행동을 새로 정의한 이벤트입니다.
아래 예시 코드를 참고하세요.

1234567891011
airbridge.events.send('category', {
    label: 'label',
    action: 'action',
    value: 10,
    semanticAttributes: {
        transactionID: 'transaction_123',
    },
    customAttributes: {
        key: 'value',
    }
})

유저 정보

유저 ID 설정하기

유저 ID는 서비스에서 활용하는 유저 식별자입니다. 유저 ID는 유저를 웹과 앱에서 하나의 유저로 특정할 수 있는 고유한 ID이어야 합니다.
설정한 유저 정보는 브라우저의 Local Storage에 남아 유저 정보를 초기화하기 전까지 모든 이벤트에 함께 전송됩니다.

함수	설명
`airbridge.setUserID`	유저 ID를 입력합니다.
`airbridge.clearUserID`	유저 ID를 삭제합니다.
`airbridge.setUserAlias`	유저 식별자를 추가로 입력합니다.
`airbridge.removeUserAlias`	추가로 입력한 유저 식별자 중에서 지정한 식별자를 삭제합니다.
`Airbridge.clearUserAlias`	추가로 입력한 모든 유저 식별자를 삭제합니다.

아래 예시를 참고하세요.

12345678
// ID
airbridge.setUserID('testID')
airbridge.clearUserID()

// alias
airbridge.setUserAlias('ADD_YOUR_KEY', 'value')
airbridge.removeUserAlias('DELETE_THIS_KEY')
airbridge.clearUserAlias()

유저 속성 설정하기

주의하세요
민감한 유저 정보가 포함될 수 있습니다. 법률 자문사와 충분히 검토한 후에 전송하세요.

유저 속성을 설정하면 추가 유저 정보를 전송할 수 있습니다.

함수	설명
`airbridge.setUserEmail`	유저 이메일을 입력합니다. SHA-256으로 해시(Hash)화되어 있습니다.
`airbridge.clearUserEmail`	유저 이메일을 삭제합니다.
`airbridge.setUserPhone`	유저 전화 번호를 입력합니다. SHA-256으로 해시화되어 있습니다.
`airbridge.clearUserPhone`	유저 전화 번호를 삭제합니다.
`airbridge.setUserAttribute`	유저 속성을 추가로 입력합니다.
`airbridge.removeUserAttribute`	추가로 입력한 유저 속성 중에서 지정한 속성을 삭제합니다.
`airbridge.clearUserAttributes`	추가로 입력한 모든 유저 속성을 삭제합니다.

123456789101112
// Automatically hashed on client side using SHA256
// Can turn off hashing feature with special flag
airbridge.setUserEmail('testID@ab180.co')
airbridge.setUserPhone('821012341234')

// attributes
airbridge.setUserAttribute('ADD_YOUR_KEY', 1)
airbridge.setUserAttribute('ADD_YOUR_KEY', 1.0)
airbridge.setUserAttribute('ADD_YOUR_KEY', '1')
airbridge.setUserAttribute('ADD_YOUR_KEY', true)
airbridge.removeUserAttribute('DELETE_THIS_KEY')
airbridge.clearUserAttributes()

유저 이메일과 전화번호를 해시화하여 전송할 수 있습니다.
기본 설정은 true입니다.

유저 ID는 해시 옵션 적용을 받지 않으므로, 해시화가 필요한 경우에는 직접 유저 ID를 해시화하여 값을 넣어주세요.

123456
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN?',
    // ...
    userHash: false, // Default true
})

유저 정보 초기화하기

clearUser 함수로 유저 정보를 초기화할 수 있습니다.

1
airbridge.clearUser()

웹 투 앱 연동 설정

에어브릿지 Web SDK는 웹에서의 기여 정보를 앱으로 전달할 수 있는 딥링크 기능을 지원합니다.
또한, 앱이 아니더라도 웹에서 웹으로 기여 정보를 전달할 수 있습니다.

스마트 앱 배너 만들기

openBanner 함수를 통해 웹 유저들에게 앱 설치를 유도하는 스마트 배너를 만들 수 있습니다. 다양한 옵션을 통해 배너의 제목, 설명, 버튼의 색깔과 텍스트 등을 변경할 수 있고, 웹 투 앱 또는 웹 투 스토어 및 웹 투 웹 기능을 구현할 수 있습니다.

공통 옵션

옵션	필수여부	타입	설명
`title`	필수	`string`	배너 제목입니다.
`description`	필수	`string`	배너 설명입니다.
`buttonText`	필수	`string`	배너의 앱 다운로드 유도 버튼에 입력할 텍스트입니다.
`color`	선택	`string`	배너의 앱 다운로드 유도 버튼에 설정할 색상입니다. CSS 색상 형식으로 설정할 수 있습니다.
`position`	선택	`'top' \| 'bottom'`	배너의 위치입니다. - `top`을 선택하면 배너가 화면 위에 위치합니다. - `bottom`을 선택하면 배너가 화면 아래에 위치합니다.
`destination`	필수	`object`	배너의 앱 다운로드 유도 버튼이 동작하는 방식입니다. `type`에 따라 동작 방식이 다릅니다.
`styles`	선택	`object`	배너의 설정할 커스텀 스타일입니다.

웹 투 앱 설정

destination 옵션의 type을 deeplink로 설정하면, 배너 버튼 클릭 시 앱을 열 수 있습니다.

옵션	필수여부	타입	설명
`destination.type`	필수	`'deeplink'`	`deeplink`입니다. 변경할 수 없습니다.
`destination.deeplinks`	선택	`object`	딥링크 설정입니다. 자세한 내용은 딥링크 설정 가이드를 참고하세요.
`destination.fallbacks`	선택	`object`	딥링크 폴백 설정입니다. 자세한 내용은 딥링크 설정 가이드를 참고하세요.
`destination.defaultParams`	선택	`object`	캠페인 파라미터입니다.
`destination.ctaParams`	선택	`object`	CTA 캠페인 파라미터입니다.

123456789101112131415161718192021222324252627282930
airbridge.openBanner({
    title: '<BANNER_TITLE>',
    description: '<BANNER_DESCRIPTION>',
    buttonText: '<BANNER_BUTTON_TEXT>',
    color: '<BANNER_BUTTON_COLOR>',
    position: '<BANNER_POSITION>', // 'top' or 'bottom'
    destination: {
        type: 'deeplink',
        deeplinks: {
            android: '<YOUR_SCHEME>://...',
            ios: '<YOUR_SCHEME>://...',
            desktop: 'https://www.example.com/'
        },
        fallbacks: {
            android: 'google-play',
            ios: 'itunes-appstore',
        },
    },
    defaultParams: {
        campaign: '<EXAMPLE_CAMPAIGN>',
        medium: '<EXAMPLE_MEDIUM>',
        term: '<EXAMPLE_TERM>',
        content: '<EXAMPLE_CONTENT>',
    },
    ctaParams: {
        cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
        cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
        cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
    },
})

웹 투 스토어 설정

destination 옵션의 type을 download로 설정하면, 배너 버튼 클릭 시 스토어를 열 수 있습니다.

옵션	필수여부	타입	설명
`destination.type`	필수	`'download'`	`download`입니다. 변경할 수 없습니다.
`destination.defaultParams`	선택	`object`	캠페인 파라미터입니다.
`destination.ctaParams`	선택	`object`	CTA 캠페인 파라미터입니다.

123456789101112131415161718192021
airbridge.openBanner({
    title: '<BANNER_TITLE>',
    description: '<BANNER_DESCRIPTION>',
    buttonText: '<BANNER_BUTTON_TEXT>',
    color: '<BANNER_BUTTON_COLOR>',
    position: '<BANNER_POSITION>', // 'top' or 'bottom'
    destination: {
        type: 'download',
    },
    defaultParams: {
        campaign: '<EXAMPLE_CAMPAIGN>',
        medium: '<EXAMPLE_MEDIUM>',
        term: '<EXAMPLE_TERM>',
        content: '<EXAMPLE_CONTENT>',
    },
    ctaParams: {
        cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
        cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
        cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
    },
})

웹 투 웹 설정

destination 옵션의 type을 web으로 설정하면, 배너 버튼 클릭시 웹 사이트로 이동할 수 있습니다.

옵션	필수여부	타입	설명
`destination.type`	필수	`'web'`	`web`입니다. 변경할 수 없습니다.
`destination.url`	필수	`string`	유저를 이동시킬 URL을 입력합니다.

12345678910111213141516171819202122
airbridge.openBanner({
    title: '<BANNER_TITLE>',
    description: '<BANNER_DESCRIPTION>',
    buttonText: '<BANNER_BUTTON_TEXT>',
    color: '<BANNER_BUTTON_COLOR>',
    position: '<BANNER_POSITION>', // 'top' or 'bottom'
    destination: {
        type: 'web',
        url: 'https://www.example.com',
    },
    defaultParams: {
        campaign: '<EXAMPLE_CAMPAIGN>',
        medium: '<EXAMPLE_MEDIUM>',
        term: '<EXAMPLE_TERM>',
        content: '<EXAMPLE_CONTENT>',
    },
    ctaParams: {
        cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
        cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
        cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
    },
})

커스텀 스타일

옵션에 styles 필드를 추가하여 커스텀 스타일을 지정할 수 있습니다.

Key 에는 CSS Selector 형식으로 지정합니다. Value 에는 CSSStyleDeclaration (TypeScript) 형식으로 지정합니다.

아래 예시를 참고하세요. 아이콘 영역의 border-radius 스타일을 변경합니다.

12345678
airbridge.openBanner({
    ...
    styles: {
        '#airbridge-banner-icon': {
            borderRadius: '4px'
        }
    }
})

CSS 스타일을 지정할 수 있는 id 를 제공합니다. #airbridge-banner-icon 와 같이 CSS Selector 형식으로 지정할 수 있습니다.

ID	설명
`airbridge-banner`	배너 전체 영역
`airbridge-banner-icon`	배너 아이콘
`airbridge-banner-title`	배너 제목
`airbridge-banner-description`	배너 설명
`airbridge-banner-open`	앱 다운로드 유도 버튼
`airbridge-banner-close`	배너 닫기 버튼

커스텀 배너 직접 구현하기

이미 관리하고 있는 배너에 딥링크 기능을 추가하거나, 더 복잡한 구성으로 커스텀 배너를 직접 구현하려는 경우, 에어브릿지 Web SDK에서 제공하는 기능을 활용하여 구현할 수 있습니다.

웹 투 앱 설정

openDeeplink 함수를 통해 딥링크로 앱을 열 수 있습니다.

옵션	필수여부	타입	설명
`deeplinks.android`	필수	`string`	Android에서 딥링크로 실행할 앱의 Scheme URL입니다.
`deeplinks.ios`	필수	`string`	iOS에서 딥링크로 실행할 앱의 Scheme URL입니다.
`deeplinks.desktop`	필수	`string`	Desktop에서 이동할 웹 사이트 URL입니다.
`fallbacks.android`	필수	`'google-play' \| string`	Android에서 앱 미설치로 인한 딥링크 실패 시 이동할 스토어 혹은 웹 사이트 URL입니다. - `google-play`: 에어브릿지 대시보드에 등록한 앱의 Google Play Store로 이동합니다. - URL: 이동할 웹 사이트 URL입니다.
`fallbacks.ios`	필수	`'itunes-appstore' \| string`	iOS에서 앱 미설치로 인한 딥링크 실패 시 이동할 스토어 혹은 웹 사이트 URL입니다. - `itune-appstore`: 에어브릿지 대시보드에 등록한 앱의 App Store로 이동합니다. - URL: 이동할 웹 사이트 URL 입니다.
`type`	선택	`'redirect' \| 'click'`	유저의 상호작용 여부에 따라 아래 옵션 중 하나를 선택하세요. - `redirect`: 유저의 상호작용이 없는 상황에서 사용합니다. - `click`: 버튼 클릭 등 유저의 상호작용을 보장할 수 있는 상황에서 사용합니다.
`defaultParams`	선택	`object`	캠페인 파리미터입니다.
`ctaParams`	선택	`object`	CTA 캠페인 파라미터입니다.

아래 예시를 참고하세요.

123456789101112131415161718192021222324252627282930
airbridge.openDeeplink({
    deeplinks: {
        // Please use the custom scheme URL like `<YOUR_SCHEME>://...`
        // Don't use the `intent://...`, `market://...` or `https://...`
        android: '<YOUR_SCHEME>://path?key=value',
        // Please use the custom scheme URL like `<YOUR_SCHEME>://...`
        // Don't use the `intent://...`, `market://...` or `https://...`
        ios: '<YOUR_SCHEME>://path?key=value',
        desktop: 'https://www.example.com/path?key=value',
    },
    fallbacks: {
        // Please use `google-play` or website URL like `https://www.example.com/...`.
        // Don't use the store URL like `https://play.google.com/...`
        android: 'google-play',
        // Please use `itunes-appstore` or website URL like `https://www.example.com/...`.
        // Don't use the store URL like `https://apps.apple.com/...`
        ios: 'itunes-appstore',
    },
    defaultParams: {
        campaign: '<EXAMPLE_CAMPAIGN>',
        medium: '<EXAMPLE_MEDIUM>',
        term: '<EXAMPLE_TERM>',
        content: '<EXAMPLE_CONTENT>',
    },
    ctaParams: {
        cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
        cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
        cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
    },
})

주의하세요
반드시 deeplinks.android 와 deeplinks.ios 에 에어브릿지 대시보드에서 설정한 딥링크 Scheme URL을 사용하세요.
예) <YOUR_SCHEME>://...
다음과 같은 Intent Scheme URL 혹은 HTTP/HTTPS URL 을 사용하지 마세요.
예) intent://...
예) market://...
예) https://www.example.com

다음과 같이 버튼 이벤트에 사용할 수 있습니다.

123456
<button id="<BUTTON_ID>">앱으로 보기</button>
<script>
    document.querySelector('#<BUTTON_ID>').addEventListener('click', () => {
        airbridge.openDeeplink({ ... })
    })
</script>

주의하세요
반드시 예시에 적혀있는 <BUTTON_ID> 를 실제로 유저 클릭 시 딥링크 기능이 동작해야 할 버튼의 ID 를 입력해 주세요.

웹 투 스토어 설정

openDeeplink 함수에 deeplinks 옵션을 입력하지 않고, fallbacks 옵션을 스토어로 설정하면, 앱 설치 여부와 상관 없이 스토어를 열 수 있습니다.

옵션	필수 여부	타입	설명
`fallbacks.android`	필수	`'google-play'`	Android에서 이동할 스토어입니다. `google-play`이며, 변경할 수 없습니다. - `google-play`: 에어브릿지 대시보드에 등록한 앱의 Google Play Store로 이동합니다.
`fallbacks.ios`	필수	`'itunes-appstore'`	iOS에서 이동할 스토어입니다. `itune-appstore`이며, 변경할 수 없습니다. - `itune-appstore`: 에어브릿지 대시보드에 등록한 앱의 App Store로 이동합니다.
`defaultParams`	선택	`object`	캠페인 파리미터입니다.
`ctaParams`	선택	`object`	CTA 캠페인 파라미터입니다.

아래 예시를 참고하세요.

1234567891011121314151617
airbridge.openDeeplink({
    fallbacks: {
        android: 'google-play',
        ios: 'itunes-appstore',
    },
    defaultParams: {
        campaign: '<EXAMPLE_CAMPAIGN>',
        medium: '<EXAMPLE_MEDIUM>',
        term: '<EXAMPLE_TERM>',
        content: '<EXAMPLE_CONTENT>',
    },
    ctaParams: {
        cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
        cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
        cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
    },
})

다음과 같이 버튼 이벤트에 사용할 수 있습니다.

123456
<button id="<BUTTON_ID>">앱 다운로드하기</button>
<script>
    document.querySelector('#<BUTTON_ID>').addEventListener('click', () => {
        airbridge.openDeeplink({ ... })
    })
</script>

주의하세요
반드시 예시에 적혀있는 <BUTTON_ID> 를 실제로 유저 클릭 시 딥링크 기능이 동작해야 할 버튼의 ID 를 입력해 주세요.

웹 투 웹 설정

openDeeplink 함수에 deeplinks 옵션을 입력하지 않고, fallbacks 옵션을 웹 URL로 설정하면, 앱 설치 여부와 상관 없이 웹 사이트로 이동할 수 있습니다.

옵션	필수 여부	타입	설명
`fallbacks.android`	필수	`string`	Android에서 이동할 웹 사이트 URL입니다. - URL: 이동할 웹 사이트 URL입니다.
`fallbacks.ios`	필수	`string`	iOS에서 이동할 웹 사이트 URL입니다. - URL: 이동할 웹 사이트 URL입니다.
`defaultParams`	선택	`object`	캠페인 파리미터입니다.
`ctaParams`	선택	`object`	CTA 캠페인 파라미터입니다.

아래 예시를 참고하세요.

1234567891011121314151617
airbridge.openDeeplink({
    fallbacks: {
        android: 'https://www.example.com',
        ios: 'https://www.example.com',
    },
    defaultParams: {
        campaign: '<EXAMPLE_CAMPAIGN>',
        medium: '<EXAMPLE_MEDIUM>',
        term: '<EXAMPLE_TERM>',
        content: '<EXAMPLE_CONTENT>',
    },
    ctaParams: {
        cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
        cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
        cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
    },
})

다음과 같이 버튼 이벤트에 사용할 수 있습니다.

123456
<button id="<BUTTON_ID>">웹으로 이동하기</button>
<script>
    document.querySelector('#<BUTTON_ID>').addEventListener('click', () => {
        airbridge.openDeeplink({ ... })
    })
</script>

주의하세요
반드시 예시에 적혀있는 <BUTTON_ID> 를 실제로 유저 클릭 시 딥링크 기능이 동작해야 할 버튼의 ID 를 입력해 주세요.

딥링크를 통한 앱 열기 버튼 만들기

openDeeplink 함수는 기존의 setDeeplinks, setDownloads, sendWeb 함수를 대체하는 통합 함수로, 버튼과 같은 DOM 요소와의 연결 없이 독립적으로 사용할 수 있는 순수 함수입니다.
setDeeplinks함수는 향후 업데이트 없이 유지보수만 제공될 예정입니다. openDeeplink 함수를 사용하여 구현해 주세요.

setDeeplinks 함수를 통해 버튼에 딥링크 기능을 설정할 수 있습니다.

옵션	필수 여부	타입	설명
`buttonID`	필수	`string \| string[]`	딥링크 기능을 설정할 `<button>` 태그의 `id` 속성 값입니다. Array 로 여러 값을 입력할 수도 있습니다.
`deeplinks.android`	필수	`string`	Android에서 딥링크로 실행할 앱의 Scheme URL입니다.
`deeplinks.ios`	필수	`string`	iOS에서 딥링크로 실행할 앱의 Scheme URL입니다.
`deeplinks.desktop`	필수	`string`	Desktop에서 이동할 웹 사이트 URL입니다.
`fallbacks.android`	필수	`'google-play' \| string`	Android에서 앱 미설치로 인한 딥링크 실패 시 이동할 스토어 혹은 웹 사이트 URL입니다. - `google-play`: 에어브릿지 대시보드에 등록한 앱의 Google Play Store로 이동합니다. - URL: 이동할 웹 사이트 URL입니다.
`fallbacks.ios`	필수	`'itunes-appstore' \| string`	iOS에서 앱 미설치로 인한 딥링크 실패 시 이동할 스토어 혹은 웹 사이트 URL입니다. - `itune-appstore`: 에어브릿지 대시보드에 등록한 앱의 App Store로 이동합니다. - URL: 이동할 웹 사이트 URL 입니다.
`desktopPopUp`	선택	`boolean`	Desktop에서 새 창으로 동작합니다.
`redirect`	선택	`boolean`	주석 - `true`: 사용자의 상호작용이 없는 상황에서 사용합니다. - `false`: 버튼 클릭 등 사용자의 상호작용을 보장할 수 있는 상황에서 사용합니다.
`defaultParams`	선택	`object`	캠페인 파리미터입니다.
`ctaParams`	선택	`object`	CTA 캠페인 파라미터입니다.

아래 예시를 참고하세요.

1234567891011121314151617181920212223242526
<button id="<BUTTON_ID>">앱으로 보기</button>
<script>
    airbridge.setDeeplinks({
        buttonID: '<BUTTON_ID>', // or ['<BUTTON_ID_1>', '<BUTTON_ID_2>', ...]
        deeplinks: {
            android: '<YOUR_SCHEME>://path?key=value',
            ios: '<YOUR_SCHEME>://path?key=value',
            desktop: 'https://www.example.com/path?key=value',
        },
        fallbacks: {
            android: 'google-play',
            ios: 'itunes-appstore',
        },
        defaultParams: {
            campaign: '<EXAMPLE_CAMPAIGN>',
            medium: '<EXAMPLE_MEDIUM>',
            term: '<EXAMPLE_TERM>',
            content: '<EXAMPLE_CONTENT>',
        },
        ctaParams: {
            cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
            cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
            cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
        },
    })
</script>

주의하세요
setDeeplinks 함수를 사용하면, Web SDK에서 버튼을 관리하기 때문에 절대로 버튼의 onclick 함수를 설정하지 마세요. 또한 <a> 태그의 id 를 사용하지 마세요.

딥링크를 통한 스토어 열기 버튼 만들기

openDeeplink 함수는 기존의 setDeeplinks, setDownloads, sendWeb 함수를 대체하는 통합 함수로, 버튼과 같은 DOM 요소와의 연결 없이 독립적으로 사용할 수 있는 순수 함수입니다.
setDownloads 함수는 향후 업데이트 없이 유지보수만 제공될 예정입니다. openDeeplink 함수를 사용하여 구현해 주세요.

setDownloads 함수를 통해 버튼에 스토어 열기 기능을 설정할 수 있습니다.

옵션	필수 여부	타입	설명
`buttonID`	필수	`string \| string[]`	딥링크 기능을 설정할 `<button>` 태그의 `id` 속성 값입니다. Array 로 여러 값을 입력할 수도 있습니다.
`defaultParams`	선택	`object`	캠페인 파리미터입니다.
`ctaParams`	선택	`object`	CTA 캠페인 파라미터입니다.

JavaScript

1234567891011121314151617
<button id="<BUTTON_ID>">앱 다운로드하기</button>
<script>
    airbridge.setDownloads({
        buttonID: '<BUTTON_ID>', // or ['<BUTTON_ID_1>', '<BUTTON_ID_2>', ...]
        defaultParams: {
            campaign: '<EXAMPLE_CAMPAIGN>',
            medium: '<EXAMPLE_MEDIUM>',
            term: '<EXAMPLE_TERM>',
            content: '<EXAMPLE_CONTENT>',
        },
        ctaParams: {
            cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
            cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
            cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
        },
    })
</script>

주의하세요
setDownloads 함수를 사용하면, Web SDK에서 버튼을 관리하기 때문에 절대로 버튼의 onclick 함수를 설정하지 마세요. 또한 <a> 태그의 id 를 사용하지 마세요.

다른 웹 사이트로 기여 정보 전달하여 이동하기

openDeeplink 함수는 기존의 setDeeplinks, setDownloads, sendWeb 함수를 대체하는 통합 함수로, 버튼과 같은 DOM 요소와의 연결 없이 독립적으로 사용할 수 있는 순수 함수입니다.
sendWeb 함수는 향후 업데이트 없이 유지보수만 제공될 예정입니다. openDeeplink 함수를 사용하여 구현해 주세요.

sendWeb 함수를 통해 다른 도메인의 웹 사이트로 이동할 수 있습니다. 이 때 웹 사이트 간의 기여 정보가 전달됩니다.

1
airbridge.sendWeb('https://other.example.com')

콜백 함수를 입력하면 즉시 웹 사이트로 이동하지 않고, 콜백 함수로 전달되는 URL을 자유롭게 사용 가능합니다. 다음과 같이 버튼 이벤트에 사용할 수 있습니다.

123456789
<button id="<BUTTON_ID>">웹으로 이동하기</button>
<script>
    document.querySelector('#<BUTTON_ID>').addEventListener('click', () => {
        airbridge.sendWeb('https://other.example.com', (error, { targetUrl }) => {
            // Open the link with new window or tab.
            window.open(targetUrl)
        })
    })
</script>

123456789
<button id="<BUTTON_ID>">웹으로 이동하기</button>
<script>
    document.getElementById('<BUTTON_ID>').onclick = function () {
        airbridge.sendWeb('https://other.example.com', function (error, response) {
            // Open the link with new window or tab.
            window.open(response.targetUrl)
        })
    }
</script>

추가 설정하기

초기화 시 유저 정보 설정하기

초기화 시 유저 정보를 전달하여, 발생하는 모든 이벤트에 유저 정보를 담을 수 있습니다.
설정한 유저 정보는 브라우저의 Local Storage에 남아 유저 정보를 초기화하기 전까지 모든 이벤트에 함께 전송됩니다.

1234567891011121314151617
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    user: {
        externalUserID: 'personID',
        externalUserEmail: 'persondoe@airbridge.io',
        externalUserPhone: '1(123)123-1234',
        attributes: {
            age_group: 30,
            gender: 'Female'
        },
        alias: {
            custom_id: '83587901-2726-4E29-ACEB-A90B0F7E75F6',
        },
    },
})

옵션	타입	설명
`user.externalUserID`	`string`	유저 ID
`user.externalUserEmail`	`string`	유저 이메일
`user.externalUserPhone`	`string`	유저 전화 번호
`user.attributes`	`object`	유저 속성 (커스텀 Key Value Pair)
`user.alias`	`object`	유저 식별자

캠페인 파라미터 설정하기

광고를 통해 웹 사이트에 랜딩한 경우, 웹 사이트 주소에 관련 정보를 파라미터로 붙이면, 그 정보를 토대로 웹 사이트 유입에 대한 트래킹이 가능합니다.

utmParsing 옵션을 true로 설정하면, URL에 포함된 UTM 관련 파라미터를 자동으로 추출하고 이벤트에 포함하여 전송합니다. 기본값은 false입니다.

123456
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    utmParsing: true,
})

주의하세요
반드시 utm_source 파라미터가 URL에 포함되어 있어야 합니다. utmParsing 옵션을 true로 설정해도, URL에 utm_source가 없으면 다른 UTM 파라미터들도 무시됩니다.

utmParameterValueReplaceMap 옵션을 설정하면, utmParsing 옵션으로 수집한 UTM 파라미터의 값을 교체할 수 있습니다. 지원하는 파라미터는 utm_source, utm_campaign, utm_medium, utm_term, utm_content 입니다.

utmParameterValueReplaceMap 옵션을 활용하면, 여러 솔루션을 통해 수집하는 UTM 파라미터를 같은 값으로 통일하여 하나의 대시보드에서 분석할 수 있습니다.

1234567891011
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    utmParsing: true,
    utmParameterValueReplaceMap: {
        utm_source: {
            'before_replace': 'after_replace',
        },
    },
})

위의 예제는 https://www.example.com/?utm_source=before_replace와 같이 utm_source가 before_replace인 경우, 이벤트에 after_replace로 변환하여 전송하는 예제입니다.

urlQueryMapping 옵션을 설정하면, UTM 파라미터가 아닌 일반 파라미터도 캠페인 파라미터로 포함하여 이벤트에 전송할 수 있습니다.

옵션	필수 여부	설명
`channel`	필수	채널
`campaign`	선택	캠페인
`ad_group`	선택	광고 그룹
`ad_creative`	선택	광고 소재
`content`	선택	콘텐츠
`term`	선택	키워드
`sub_id`	선택	하위매체
`sub_id_1`	선택	하하위매체1
`sub_id_2`	선택	하하위매체2
`sub_id_3`	선택	하하위매체3
`campaign_id`	선택	캠페인 ID
`ad_group_id`	선택	광고 그룹 ID
`ad_creative_id`	선택	광고 소재 ID
`term_id`	선택	키워드 ID

예를 들어, 다음은 utm_source , utm_campaign 파라미터와 함께 서비스 내부에서 사용하는 파라미터가 my_sub_id인 URL입니다.

https://www.example.com/path?utm_source=my_channel&utm_campaign=my_campaign&my_sub_id=example

이 때, 아래와 같이 설정하면, 에어브릿지 대시보드에서 utm_source , utm_parameter와 함께 sub_id_1을 my_sub_id로 확인할 수 있습니다.

12345678910
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    urlQueryMapping: {
        channel: 'utm_source',
        campaign: 'utm_campaign',
        sub_id_1: 'my_sub_id',
    },
})

주의하세요
urlQueryMapping 옵션에 반드시 channel 을 입력해 주세요. channel 을 입력 하지 않으면 다른 옵션 들도 무시됩니다.

직접 파라미터를 분석하여 init 함수 호출 시에 정보를 입력할 수 있습니다.

옵션	필수 여부	설명
`defaultChannel`	선택	매체 이름
`defaultChannel.campaign`	선택	광고 이름
`defaultChannel.medium`	선택	광고 매체
`defaultChannel.term`	선택	광고 검색어
`defaultChannel.content`	선택	광고 내용

아래 예시를 참고해 주세요.

123456789101112131415161718192021
const queryStringToJSON = (url = '') => {
    const { searchParams } = new URL(url)
    return Object.fromEntries(searchParams.entries())
}

const url = window.location.href
const params = queryStringToJSON(url)

// initialize
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    defaultChannel: params['utm_source'],
    defaultParams: {
        campaign: params['utm_campaign'],
        medium: params['utm_medium'],
        content: params['utm_content'],
        term: params['utm_term'],
    },
})

12345678910111213141516171819202122232425262728293031323334
function queryStringToJSON(url) {
    url = url || ''
    var index = url.indexOf('?')
    if (index < 0) {
        index = url.length - 1
    }
    var pairs = url.slice(index + 1).split('&')
    var object = {}
    pairs.forEach(function (string) {
        if (string.length === 0) {
            return
        }
        var pair = string.split('=')
        object[pair[0]] = decodeURIComponent(pair[1] || '')
    })
    return object
}

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

// initialize
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    defaultChannel: params['utm_source'],
    defaultParams: {
        campaign: params['utm_campaign'],
        medium: params['utm_medium'],
        content: params['utm_content'],
        term: params['utm_term'],
    },
})

이벤트 전송 완료 대기하기

events.wait 함수를 통해 모든 이벤트 전송이 끝난 후의 동작을 보장할 수 있습니다.

이벤트 전송을 완료하기 전에 페이지를 이동하면 (예를 들어, 페이지를 빠르게 전환하는 중계 페이지에서 이벤트를 전송하는 경우 등) 이벤트가 유실될 수 있습니다. 이런 경우 events.wait 함수로 이벤트 전송을 완료할 때까지 대기한 후에 페이지를 이동하면 이벤트 유실을 최소화할 수 있습니다.

옵션	타입	설명
`timeout`	`number`	최대 대기시간 (milliseconds)
`callback`	`function`	이벤트 전송완료 Callback

12345
airbridge.events.send('category')

airbridge.events.wait(3000, () => {
    location.href = '<TARGET_URL>'
})

어트리뷰션 윈도우 수정하기

cookieWindow 옵션을 통해 일 단위로 어트리뷰션 윈도우를 설정할 수 있습니다.
기본 설정은 3일입니다.

123456
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    cookieWindowInMinutes: <MINUTES>,
})

cookieWindowInMinutes 옵션을 통해 분 단위로 어트리뷰션 윈도우를 설정할 수도 있습니다. cookieWindow 옵션과 중복 설정하면 cookieWindowInMinutes 옵션을 우선합니다.

123456
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    cookieWindow: <DAYS>,
})

웹 투 앱 어트리뷰션의 기여 기간 설정하기

useProtectedAttributionWindow 옵션을 통해 기여의 프로텍티드 어트리뷰션 윈도우(Protected Attribution Window, PAW)를 설정할 수 있습니다.
기본 설정은 true입니다.

useProtectedAttribution 옵션을 true로 설정하면, PAW를 적용합니다. 자세한 내용은 유저가이드를 참고하세요.
useProtectedAttribution 옵션을 false로 설정하면, PAW를 적용하지 않습니다. 자세한 내용은 유저가이드를 참고하세요.

123456
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    useProtectedAttributionWindow: true,
})

protectedAttributionWindowInMinutes 옵션을 통해 분 단위로 PAW를 설정할 수 있습니다.
기본 설정은 30분입니다. 최대 3일(4320분) 까지 설정할 수 있습니다.

protectedAttributionWindowInMinutes 옵션은 useProtectedAttributionWindow 옵션을 true 로 설정했을 경우에만 작동합니다.

1234567
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    useProtectedAttributionWindow: true,
    protectedAttributionWindowInMinutes: 60,
});

서브 도메인 간에 기여 정보 공유하기

에어브릿지 Web SDK는 기본적으로 기여 정보를 쿠키에 저장하고 있으며, 루트 도메인의 쿠키를 저장 공간으로 사용하고 있기 때문에, 서브 도메인 간에 기여 정보를 공유할 수 있습니다.
여러 서브 도메인을 사용한다면 shareCookieSubdomain 옵션을 통해 쿠키를 공유할 지 설정할 수 있습니다.

shareCookieSubdomain 옵션은 false로 설정하면, 서브 도메인 사이에 데이터를 공유하지 않습니다.
기본 설정은 true입니다.

1234567
// initialize 
airbridge.init({ 
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    shareCookieSubdomain: false,
})

알립니다
다음과 같은 상황을 고려하여 설정하세요.
여러 서브 도메인에서 하나의 같은 서비스를 운영하는 경우에는 true로 설정하세요.
여러 서브 도메인에서 각각 다른 서비스를 운영하는 경우에는 false로 설정하세요.

앱 데이터 저장 공간 분리하기

에어브릿지 Web SDK는 기본적으로 도메인 1개당 앱 1개의 어트리뷰션 데이터만 저장할 수 있도록 설계되었습니다. useStoragePerApp 옵션을 true 로 설정하면, 저장 공간을 분리하여 같은 루트 도메인을 공유하는 서브 도메인에서 사용 중인 여러 앱의 어트리뷰션 데이터를 각 앱 별로 확인할 수 있습니다.
기본 설정은 false 입니다.

example.com의 루트 도메인을 공유하는 서브 도메인 a.example.com과 b.example.com에서 여러 앱을 사용할 경우, 아래 예시와 같이 useStoragePerApp 옵션을 사용하여 데이터 저장 공간을 분리할 수 있습니다.

123456789101112131415
// Subdomain #1: a.example.com
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    useStoragePerApp: true,
})

// Subdomain #2: b.example.com
airbridge.init({
    app: '<YOUR_ANOTHER_APP_NAME>',
    webToken: '<YOUR_ANOTHER_WEB_TOKEN>',
    // ...
    useStoragePerApp: true,
})

주의하세요
useStoragePerApp 옵션을 변경하면 변경 직후에 유저가 사용하는 각 브라우저에서 발생한 첫 번째 이벤트가 미기여(unattributed)로 처리될 수 있습니다.

웹에서 트래킹 링크 생성하기

createTrackingLink 함수를 통해 트래킹 링크를 생성할 수 있습니다. 트래킹 링크란 유저가 발생시킨 터치포인트 데이터를 에어브릿지에 전달하기 위해 만드는 링크입니다.

트래킹 링크를 활용하여, 광고를 보거나 광고를 클릭한 유저를 원하는 목적지로 이동시킬 수 있습니다. 에어브릿지 대시보드에서는 트래킹 링크로 수집한 터치포인트 데이터를 활용하여, 전환에 기여한 채널을 분석할 수 있습니다.

12345678910111213
interface Airbridge {
    createTrackingLink(
        channel: string,
        options: Record<string, boolean | number | string>,
        onSuccess: (trackingLink: TrackingLink) => void
    ): void
    createTrackingLink(
        channel: string,
        options: Record<string, boolean | number | string>,
        onSuccess: (trackingLink: TrackingLink) => void,
        onError: (error: Error) => void
    ): void
}

옵션	필수여부	타입	설명
`channel`	필수	`string`	트래킹 링크를 사용할 광고 채널
`options`	필수	`string`	트래킹 링크 생성 옵션
`onSuccess`	필수	`function`	성공 콜백
`onError`	선택	`function`	실패 콜백

다음과 같은 파라미터를 통해 options를 설정할 수 있습니다.

파라미터	타입	설명
`campaign`	`string`	캠페인 이름
`ad_group`	`string`	광고 그룹
`ad_creative`	`string`	광고 소재
`content`	`string`	광고 콘텐츠
`term`	`string`	검색 광고 키워드
`sub_id`	`string`	하위 네트워크 혹은 제휴 매체사 등을 나타내는 아이디.
`sub_id_1`	`string`	하위 네트워크 또다른 하위 네트워크 아이디. (sub-sub publisher) 하위 매체 순서(계층)에 맞게 사용해야합니다. (`sub_id_1` > `sub_id_2` > `sub_id_3`)
`sub_id_2`	`string`	하위 네트워크 또다른 하위 네트워크 아이디. (sub-sub publisher) 하위 매체 순서(계층)에 맞게 사용해야합니다. (`sub_id_1` > `sub_id_2` > `sub_id_3`)
`sub_id_3`	`string`	하위 네트워크 또다른 하위 네트워크 아이디. (sub-sub publisher) 하위 매체 순서(계층)에 맞게 사용해야합니다. (`sub_id_1` > `sub_id_2` > `sub_id_3`)
`deeplink_url`	`string` (Custom Scheme URL)	Deeplink URL
`deeplink_stopover`	`boolean`	Deeplink 의 스탑오버 기능 활성화 여부 - `true` : 활성화 - `false` : 비활성화
`fallback_ios`	`'store' \| string`	App 미설치시 ios fallback
`fallback_android`	`'store' \| string`	App 미설치시 android fallback
`fallback_desktop`	`string`	App 미설치시 desktop fallback
`fallback_ios_store_ppid`	`string`	애플 앱 스토어의 맞춤형 제품 페이지(Custom Product Page)의 ppid. 앱 스토어로 랜딩할 경우 맞춤형 제품 페이지를 보여줄 수 있도록 설정합니다.
`fallback_android_store_listing`	`string`	구글 플레이 스토어의 맞춤 스토어 등록정보(Custom Store Listing) listing 값. 구글 플레이 스토어로 랜딩할 경우 맞춤 스토어 등록정보를 보여줄 수 있도록 설정합니다.
`ogtag_title`	`string`	트래킹 링크의 `og:title`
`ogtag_description`	`string`	트래킹 링크의 `og:description`
`ogtag_image_url`	`string`	트래킹 링크의 `og:image`
`ogtag_website_crawl`	`'desktop'`	지정된 desktop의 Open Graph를 크롤링해서 사용합니다. `title`, `description`, `imageUrl`으로 설정한 값은 무시됩니다.
`custom_short_id`	`string`	Custom 채널의 트래킹 링크 생성시 축약된 링크 숏 아이디. 커스텀 도메인 설정을 해야 사용할 수 있습니다. 입력하지 않으면 랜덤 아이디가 생성되며, 트래킹 링크 생성 완료 후에는 변경할 수 없습니다.
`is_reengagement`	`'off' \| 'on_true' \| 'on_false'`	Re-engagement 파라미터. `off`: 해당 트래킹 링크에 발생한 터치포인트로 설치 및 인앱 이벤트를 기여합니다. `on_true`: 딥링크 오픈 및 그에 기인한 이벤트만 기여됩니다. Re-engagement 캠페인에 활용 가능합니다. `on_false`: 설치 이벤트 및 그에 기인한 인앱 이벤트만 기여됩니다. UA 캠페인에 활용 가능합니다.

createTrackingLink 함수로 생성된 트래킹 링크는 onSuccess 콜백을 통해 전달됩니다.

1234
interface TrackingLink {
    shortURL: string
    qrcodeURL: string
}

Option	Type	Description
`shortURL`	`string`	Short URL of the tracking link
`qrcodeURL`	`string`	QR code URL of the tracking link

12345678910111213141516
airbridge.createTrackingLink(
    'test_channel',
    {
        campaign: 'test_campaign',
        deeplink_url: '<YOUR_SCHEME>://...',
        fallback_ios: 'store',
        fallback_android: 'store',
        fallback_desktop: 'https://www.example.com/'
    },
    ({ shortURL, qrcodeURL }) => {
        // Handling created tracking-link
    },
    (error) => {
        // Handling error
    }
)

12345678910111213141516
airbridge.createTrackingLink(
    'test_channel',
    {
        campaign: 'test_campaign',
        deeplink_url: '<YOUR_SCHEME>://...',
        fallback_ios: 'https://www.example.com/',
        fallback_android: 'https://www.example.com/',
        fallback_desktop: 'https://www.example.com/'
    },
    ({ shortURL, qrcodeURL }) => {
        // Handling created tracking-link
    },
    (error) => {
        // Handling error
    }
)

123456789101112131415
airbridge.createTrackingLink(
    'test_channel',
    {
        campaign: 'test_campaign',
        fallback_ios: 'store',
        fallback_android: 'store',
        fallback_desktop: 'https://www.example.com/'
    },
    ({ shortURL, qrcodeURL }) => {
        // Handling created tracking-link
    },
    (error) => {
        // Handling error
    }
)

123456789101112131415
airbridge.createTrackingLink(
    'test_channel',
    {
        campaign: 'test_campaign',
        fallback_ios: 'https://www.example.com/',
        fallback_android: 'https://www.example.com/',
        fallback_desktop: 'https://www.example.com/'
    },
    ({ shortURL, qrcodeURL }) => {
        // Handling created tracking-link
    },
    (error) => {
        // Handling error
    }
)

몰로코 쿠키 ID 수집하기

collectMolocoCookieID를 true로 설정하면, 몰로코 웹 캠페인을 통해 발생한 이벤트의 쿠키 ID를 자동으로 수집하여 캠페인을 최적화합니다.

123456
airbridge.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
    // ...
    collectMolocoCookieID: true,
})

도움이 되었나요?

더 필요한 내용이 있나요?

Web SDKself.__wrap_n!=1&&self.__wrap_b(":R96fnkvcupkvecq:",0.5)

Web SDK 설치하기

브라우저에서 직접 로드하기

패키지 매니저를 통해 설치하기

지원 브라우저

SDK 초기화하기

SDK 초기화 옵션

옵트인(Opt-In) 설정하기

알립니다

옵트아웃(Opt-Out) 설정하기

알립니다

웹 이벤트

웹 이벤트 전송하기

카테고리

어트리뷰트

웹 이벤트 추가 설정하기

알립니다

디바이스 식별자 설정하기

이벤트 예시 코드

회원가입, 로그인, 로그아웃, 홈화면 조회, 상품리스트 조회

검색결과 조회, 상품상세페이지 조회, 결제수단 등록, 위시리스트 추가, 장바구니 담기

결제 시작, 구매 완료, 구매 취소, 체험판 시작, 구독, 구독 취소

주의하세요

광고 노출, 광고 클릭, 튜토리얼 완료, 레벨 달성, 과제 달성

평가, 공유, 일정 예약, 크레딧 사용

유저 정보

유저 ID 설정하기

유저 속성 설정하기

주의하세요

유저 정보 초기화하기

웹 투 앱 연동 설정

스마트 앱 배너 만들기

웹 투 앱 설정

웹 투 스토어 설정

웹 투 웹 설정

커스텀 스타일

커스텀 배너 직접 구현하기

웹 투 앱 설정

주의하세요

주의하세요

웹 투 스토어 설정

주의하세요

웹 투 웹 설정

주의하세요

딥링크를 통한 앱 열기 버튼 만들기

주의하세요

딥링크를 통한 스토어 열기 버튼 만들기

주의하세요

다른 웹 사이트로 기여 정보 전달하여 이동하기

추가 설정하기

초기화 시 유저 정보 설정하기

캠페인 파라미터 설정하기

UTM 파라미터 자동으로 설정하기

주의하세요

UTM 파라미터 값 변경하기

다른 파라미터를 캠페인 파라미터로 설정하기

주의하세요

직접 파라미터 분석하기

이벤트 전송 완료 대기하기

어트리뷰션 윈도우 수정하기

웹 투 앱 어트리뷰션의 기여 기간 설정하기

서브 도메인 간에 기여 정보 공유하기

알립니다

예제 시나리오

앱 데이터 저장 공간 분리하기

주의하세요

웹에서 트래킹 링크 생성하기

트래킹 링크 생성 옵션

앱이 열리거나 스토어로 이동하는 트래킹 링크 생성하기

앱이 열리거나 웹페이지로 이동하는 트래킹 링크 생성

스토어로만 이동하는 트래킹 링크 생성하기

웹페이지로만 이동하는 트래킹 링크 생성하기

몰로코 쿠키 ID 수집하기

Web SDK