Web SDK - Airbridge Help Center

Web SDK 설치하기

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

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

<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){function q(b,a){function d(){var l=x(b,a);y(l)}if(0<_g){var e,f=new (null!=(e=a_.XDomainRequest)?e:a_.XMLHttpRequest);e=function(){};f.open("GET",a);f.timeout=_g;f.onload=d;f.onerror=e;f.onprogress=e;f.ontimeout=e;f.send()}else d()}function y(b){if("complete"===i_.readyState)i_.head.appendChild(b);else{var a=function(){a_.removeEventListener("load",a);i_.head.appendChild(b)};a_.addEventListener("load",a)}}function x(b,a){var d=i_.createElement(r_);d.async=!0;d.src=a;d.onerror=function(){return z(b)};return d}function z(b){b.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("Failed to load Airbridge SDK.")})}function r(b){var a={queue:null!=b?b:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(d){var e=d.split("."),f=e.pop();e.reduce(function(l,t){var u;return l[t]=null!=(u=l[t])?u:{}},a)[f]=function(){a.queue.push([d,arguments])}});return a}null!=a_.__AIRBRIDGE__||(a_.__AIRBRIDGE__={mocks:[]});"undefined"!==typeof i_.documentMode&&(_r=_r.replace(/^https:/,""));a_.createAirbridge=function(){var b=r(),a;null==(a=a_.__AIRBRIDGE__)||a.mocks.push(b);q(b,_r);return b};a_[_b]||(_e=r(_e),a_[_b]=_e,q(_e,_r))})(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를 설치합니다.

npm install airbridge-web-sdk-loader

yarn add airbridge-web-sdk-loader

pnpm i airbridge-web-sdk-loader

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

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은 에어브릿지 대시보드의 설정 → 토큰 관리에서 확인할 수 있습니다. 필요에 따라 다양한 초기화 옵션을 추가로 설정할 수 있습니다. 아래는 초기화에 필요한 설정의 타입입니다.

JavaScript

interface InitializeOptions {
    app: string
    webToken: string
    autoStartTrackingEnabled?: boolean
    utmParsing?: boolean
    utmParameterValueReplaceMap?: Record<string, Record<string, string>>
    urlQueryMapping?: Record<string, string>
    userHash?: boolean
    cookieWindow?: number
    cookieWindowInMinutes?: number
    useProtectedAttributionWindow?: boolean
    protectedAttributionWindowInMinutes?: number
    shareCookieSubdomain?: boolean
    collectMolocoCookieID?: boolean
}

SDK 초기화 옵션

유형	필수 여부	타입	기본값	설명
`app`	필수	`string`	`-`	Web SDK 초기화시 필요한 고객사의 앱 이름입니다.
`webToken`	필수	`string`	`-`	Web SDK 초기화시 필요한 고객사의 웹 SDK 토큰입니다.
`autoStartTrackingEnabled`	선택	`boolean`	`true`	옵트인을 명시적으로 해야하는 경우 이 값을 `false`로 설정하고 `startTracking`을 호출하세요. 자세한 내용은 가이드를 참고하세요.
`utmParsing`	선택	`boolean`	`false`	URL 파라미터의 UTM 값을 각각 Airbridge 캠페인 파라미터 값으로 자동 설정합니다. 자세한 내용은 가이드를 참고하세요.
`utmParameterValueReplaceMap`	선택	`object`	`-`	utmParameterValueReplaceMap을 설정하면 `utmParsing`으로 수집한 UTM 파라미터 값을 원하는 값으로 지정할 수 있습니다. 자세한 내용은 가이드를 참고하세요.
`urlQueryMapping`	선택	`object`	`-`	`urlQueryMapping`을 쓰면 `utmParsing`은 무시됩니다. 자세한 내용은 가이드를 참고하세요.
`userHash`	선택	`boolean`	`true`	유저 이메일과 전화번호를 해시화하여 전송할 수 있습니다. 자세한 내용은 가이드를 참고하세요.
`cookieWindow`	선택	`number`	`3`	자세한 내용은 가이드를 참고하세요.
`cookieWindowInMinutes`	선택	`number`	`-`	자세한 내용은 가이드를 참고하세요.
`useProtectedAttributionWindow`	선택	`boolean`	`true`	자세한 내용은 가이드를 참고하세요.
`protectedAttributionWindowInMinutes`	선택	`number`	`30`	자세한 내용은 가이드를 참고하세요.
`shareCookieSubdomain`	선택	`boolean`	true	자세한 내용은 가이드를 참고하세요.
`collectMolocoCookieID`	선택	`boolean`	`false`	몰로코 쿠키 ID 를 설정하기 위한 옵션입니다.

설치 확인하기

에어브릿지 Web SDK를 설치한 페이지로 이동하여 개발자 도구를 열고 다음 코드를 실행합니다.

console.log(airbridge.isSDKEnabled)

위 코드를 입력하고 실행했을 때 true 가 출력된다면 정상적으로 설치되고 초기화된 것입니다.

주의하세요airbridge.isSDKEnabled 는 최초에 false 입니다. Web SDK가 모두 로드되고 초기화가 성공적으로 완료되면 true 로 변경됩니다.네트워크 환경에 따라 로드가 지연될 수 있으며, 로드가 완료되기 전에 확인하면 false 가 출력될 수 있습니다.

네트워크 지연으로 인한 false 출력이 의심되는 경우, 개발자 도구에서 아래 코드를 실행하여 5초 후에 값을 확인하세요.

setTimeout(function () {
    console.log(airbridge.isSDKEnabled)
}, 5000)

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

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

옵트인(Opt-In)은 유저가 동의할 때에만 유저 정보를 사용하는 정책입니다. autoStartTrackingEnabled 옵션을 false로 설정한 후에, 이벤트를 수집할 수 있는 시점에 startTracking 함수를 호출하세요. startTracking 함수가 호출된 시점부터 이벤트 수집을 시작합니다. 기본 설정은 true입니다.

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

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

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

airbridge.startTracking()

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

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

옵트아웃(Opt-Out)은 유저가 거부하기 전까지 유저 정보를 사용할 수 있는 정책입니다. autoStartTrackingEnabled 옵션을 true로 설정한 후에, 이벤트를 수집할 수 없는 시점에 stopTracking 함수를 호출하세요. stopTracking 함수가 호출된 시점부터 이벤트 수집을 시작합니다.

autoStartTrackingEnabled 설정으로, 초기화를 마친 후에 자동으로 이벤트 추적이 시작되도록 설정하세요. autoStartTrackingEnabled 옵션의 기본값이 true이기 때문에 입력하지 않아도 자동으로 이벤트를 추적합니다.

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

개인정보 수집 및 활용에 대한 유저 응답을 수집하세요. 유저가 개인정보 수집 및 활용을 거부하면 이벤트 추적을 중단합니다.

airbridge.stopTracking()

웹 이벤트

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

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

웹 이벤트 전송하기

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

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`	이벤트의 커스텀 어트리뷰트

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

카테고리

에어브릿지에서는 스탠다드 이벤트를 제공합니다. 스탠다드 이벤트 목록을 확인하여 이벤트를 전송하세요.커스텀 이벤트는 이벤트 택소노미에서 정한 이벤트 이름을 사용하여 전송할 수 있습니다.

어트리뷰트

어트리뷰트로 이벤트의 추가 정보를 수집할 수 있습니다.

action, label: 에어브릿지 리포트에서 그룹바이로 활용할 수 있는 정보를 수집합니다.
value: 매출 분석에서 활용하는 정보를 수집합니다. 수집한 데이터는 자유롭게 사칙연산에 활용할 수 있습니다.
시맨틱 어트리뷰트: 에어브릿지가 미리 정의한 어트리뷰트입니다.
커스텀 어트리뷰트: 에어브릿지 사용자가 정의한 어트리뷰트입니다.

에어브릿지가 제공하는 시맨틱 어트리뷰트 목록은 아래에서 확인할 수 있습니다.

시맨틱 어트리뷰트 목록

웹 이벤트 추가 설정하기

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

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

디바이스 식별자 설정하기

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

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

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

이벤트 예시 코드

에어브릿지가 수집하는 주요 인앱 이벤트는 스탠다드 이벤트와 커스텀 이벤트입니다. 스탠다드 이벤트는 에어브릿지가 정의한 이벤트입니다. 아래 예시 코드를 참고하세요.

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

회원가입

// 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')

로그인

// 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')

로그아웃

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

// Initialize user information
airbridge.clearUser()

홈화면 조회

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

상품리스트 조회

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',
            },
        ],
    },
})

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

검색결과 조회

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',
            },
        ],
    },
})

상품상세페이지 조회

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',
        }],
    },
})

결제수단 등록

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

위시리스트 추가

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',
        }],
    },
})

장바구니 담기

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',
        }],
    },
})

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

결제 시작

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',
            },
        ],
    },
})

구매 완료

airbridge.events.send('airbridge.ecommerce.order.completed', {
    value: 11,
    semanticAttributes: {
        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가 서로 일치하지 않으면 구매취소 이벤트가 반영되지 않습니다.자세한 내용은 정확한 구매 성과 측정을 위한 구매 취소 이벤트 분석하기를 참고해 주세요.

airbridge.events.send('airbridge.ecommerce.order.canceled', {
    value: 11,
    semanticAttributes: {
        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',
            },
        ],
    },
})

체험판 시작

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',
        }],
    },
})

airbridge.events.send('airbridge.subscribe', {
    value: 15,
    semanticAttributes: {
        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',
        }],
    },
})

구독 취소

airbridge.events.send('airbridge.unsubscribe', {
    value: 15,
    semanticAttributes: {
        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',
        }],
    },
})

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

광고 노출

airbridge.events.send('airbridge.adImpression', {
    value: 0.01,
    semanticAttributes: {
        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',
        }],
    },
})

광고 클릭

airbridge.events.send('airbridge.adClick', {
    value: 0.1,
    semanticAttributes: {
        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',
        }],
    },
})

튜토리얼 완료

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

레벨 달성

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

과제 달성

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

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

평가

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',
        }],
    },
})

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

일정 예약

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',
        }],
    },
})

크레딧 사용

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',
        }],
    },
})

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

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',
    },
})

유저 정보

유저 정보를 설정하세요.

유저 ID 설정하기

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

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

아래 예시를 참고하세요.

// 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`	추가로 입력한 모든 유저 속성을 삭제합니다.

// 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를 해시화하여 값을 넣어주세요.

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

유저 정보 초기화하기

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

airbridge.clearUser()

웹투앱 설정

openDeeplink 함수를 웹 페이지에 있는 버튼에 적용해 유저를 앱으로 보낼 수 있습니다. 아래처럼 주로 버튼에 사용할 수 있습니다. 예시 코드 안의 <BUTTON_ID>에는 실제로 유저가 클릭하는 버튼의 ID를 입력하세요.

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

<button id="<BUTTON_ID>">앱으로 보기</button>
<script>
    document.getElementById('<BUTTON_ID>').onclick = function () {
        airbridge.openDeeplink({ ... })
    }
</script>

openDeeplink 함수에 대한 예시 코드입니다.

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',
    },
    ctaParams: {
        cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
        cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
        cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
    },
})

딥링킹 경로 (필수)

deeplinks 옵션을 사용해 운영체제와 데스크톱별로 유저를 딥링킹할 경로를 입력하세요. 모두 필수사항입니다.

옵션	타입	설명
deeplinks.android	string	안드로이드 환경에서 유저를 딥링킹할 앱 페이지의 URL 스킴 딥링크를 입력하세요.
deeplinks.ios	string	iOS 환경에서 유저를 딥링킹할 앱 페이지의 URL 스킴 딥링크를 입력하세요.
deeplinks.desktop	string	데스크톱 환경에서 유저를 보낼 웹사이트 URL을 입력하세요.

주의하세요deeplinks.android와 deeplinks.ios에 반드시 appScheme://host/path 형식의 URL 스킴 딥링크를 입력하세요. 인텐트 스킴 URL이나 http(s) URL을 사용하지 마세요.

폴백 경로 (필수)

fallbacks 옵션을 사용해 딥링킹이 실패했을 때 운영체제별로 유저를 보낼 폴백 경로를 입력하세요. 모두 필수사항입니다.

옵션	타입	설명	비고
fallbacks.android	string	안드로이드 환경에서 딥링킹이 실패했을 때 유저를 보낼 대안 경로를 입력하세요. - 구글 플레이 스토어: `‘google-play’`를 그대로 입력하세요. - 웹 페이지: 유저를 보낼 웹 페이지 URL을 입력하세요.	`deeplinks`를 입력하지 않고 `fallbacks`만 입력하면 유저는 앱 설치 여부와 상관 없이 구글 플레이 스토어나 웹 페이지로 이동됩니다.
fallbacks.ios	string	iOS 환경에서 딥링킹이 실패했을 때 유저를 보낼 대안 경로를 입력하세요. - 애플 앱 스토어: `‘itunes-appstore'`를 그대로 입력하세요. - 웹 페이지: 유저를 보낼 웹 페이지 URL을 입력하세요.	`deeplinks`를 입력하지 않고 `fallbacks`만 입력하면 유저는 앱 설치 여부와 상관 없이 애플 앱 스토어나 웹 페이지로 이동됩니다.

주의하세요경로를 앱마켓으로 하려면 fallbacks.android와 fallback.ios에 각각 ‘google-play’와 ‘itunes-appstore’를 그대로 입력하세요. 다르게 입력하면 정상 동작하지 않습니다.

타입 (필수)

type 옵션을 사용해 웹 페이지 안에 버튼같은 CTA 요소가 있는지에 따라 값을 입력하세요. 필수사항입니다.

옵션	타입	설명
type	string	- `‘redirect'`: CTA 요소가 없는 등 웹 페이지 안에서 유저와 상호작용 없이 앱으로 딥링킹할 때 이 값을 그대로 입력하세요. - `‘click’`: CTA 요소가 있는 등 웹 페이지 안에 유저와 상호작용 후에 앱으로 딥링킹할 때 이 값을 그대로 입력하세요.

CTA 버튼 정보 (권장)

ctaParams를 사용해 리포트에서 조회할 CTA 버튼 정보를 입력하세요. 모두 선택사항입니다. 입력할 정보는 마케터에게 요청하세요. openDeeplink 함수 1개당 최대 3개를 입력할 수 있습니다. 정확한 성과 분석을 위해 모두 입력하는 것을 권장합니다.

그룹바이	설명	필드
CTA Param 1	해당 캠페인에 사용한 버튼 정보 1	ctaParams.cta_param_1
CTA Param 2	해당 캠페인에 사용한 버튼 정보 2	ctaParams.cta_param_2
CTA Param 3	해당 캠페인에 사용한 버튼 정보 3	ctaParams.cta_param_3

CTA Param에는 버튼과 관련된 정보를 자유롭게 정의할 수 있습니다. 아래 예시를 참고하세요. 항목에 포함되지 않은 다른 사항도 정의할 수 있습니다.

항목	예시
웹 랜딩 페이지 유형	product_detail, search_result, category_list, promo_landing, event_landing, brand_landing
콘텐츠 유형	blog_article, video_page, guide_page
버튼 위치	top, bottom, floating, mid
버튼 문구	앱으로 열기, 앱 다운로드하기, 앱에서 보기
버튼 배치 형태	inline_cta, popup_banner, exit_intent

캠페인 정보 (선택)

알립니다유저가 아래와 같은 방법을 통해 웹 랜딩 페이지로 이동됐을 때는 터치포인트 정보가 수집되지 않습니다. 이러한 경우에는 리포트에서 터치포인트 그룹바이를 선택했을 때 defaultChannel과 defaultParams에 입력된 캠페인 정보가 조회됩니다.

유저가 트래킹 링크나 UTM 파라미터가 적용되지 않은 광고 클릭
유저가 직접 웹 랜딩 페이지 URL 입력

defaultChannel과 defaultParams를 사용해 에어브릿지 리포트에서 조회할 캠페인 정보를 입력하세요. 입력할 정보는 마케터에게 요청하세요. 자세한 내용은 가이드를 참고하세요.

airbridge.openDeeplink({
    deeplinks: { ... },
    fallbacks: { ... },
    ctaParams: { ... },
    defaultChannel: '<EXAMPLE_DEFAULT_CHANNEL>',
    defaultParams: {
        campaign: '<EXAMPLE_CAMPAIGN>',
        medium: '<EXAMPLE_MEDIUM>',
        term: '<EXAMPLE_TERM>',
        content: '<EXAMPLE_CONTENT>',
    },
})

커스텀 스토어 페이지 정보 (선택)

options.androidStoreListing 또는 options.iosStoreProductPage를 사용해 스토어 폴백에 대한 커스텀 스토어 페이지를 설정할 수 있습니다. 커스텀 스토어 페이지에 대한 자세한 내용은 공식 문서 (Google Play Store, Apple App Store)를 참고하세요.

옵션	타입	설명
options.androidStoreListing	string	구글 플레이 스토어에 사용하는 listing 옵션입니다.
options.iosStoreProductPage	string	애플 앱 스토어에 사용하는 ppid 옵션입니다. UUID 형식입니다.

주의하세요fallbacks.android의 값을 "google-play"로 지정하지 않으면 options.androidStoreListing 옵션은 동작하지 않습니다.fallbacks.ios의 값을 "itunes-appstore"로 지정하지 않으면 options.iosStoreProductPage 옵션은 동작하지 않습니다.

airbridge.openDeeplink({
    deeplinks: { ... },
    fallbacks: {
        android: 'google-play', // MUST BE `google-play`
        ios: 'itunes-appstore', // MUST BE `itunes-appstore`
    },
    ctaParams: { ... },
    options: {
        androidStoreListing: '<YOUR_LISTING_PARAMETER>',
        iosStoreProductPage: '<YOUR_PRODUCT_PAGE_ID>',
    },
})

기존 함수 참고사항

알립니다openDeeplink 함수는 기존의 setDeeplinks, setDownloads, sendWeb 함수를 대체해 DOM 연결 없이 독립적으로 사용할 수 있는 함수입니다. 기존 함수는 추후 업데이트하지 않을 예정입니다. 따라서 openDeeplink 함수를 강력히 권장하며, 이미 기존 함수를 사용 중인 고객사만 아래 내용을 참고하세요.

setDeeplinks 함수

setDeeplinks 함수를 사용해 유저를 앱으로 딥링킹할 수 있습니다.

옵션	필수 여부	타입	설명
buttonID	필수	string	딥링킹 기능을 적용할`<button>` 태그의 `id` 속성값입니다. Array로 여러 값을 입력할 수 있습니다.
deeplinks.android	필수	string	안드로이드 환경에서 유저를 딥링킹할 앱 페이지의 URL 스킴 딥링크를 입력하세요.
deeplinks.ios	필수	string	iOS 환경에서 유저를 딥링킹할 앱 페이지의 URL 스킴 딥링크를 입력하세요.
deeplinks.desktop	필수	string	데스크톱 환경에서 유저를 보낼 웹사이트 URL을 입력하세요.
fallbacks.android	필수	string	안드로이드 환경에서 딥링킹이 실패했을 때 유저를 보낼 대안 경로를 입력하세요. - 구글 플레이 스토어: `‘google-play’`를 그대로 입력하세요. - 웹 페이지: 유저를 보낼 웹 URL을 입력하세요.
fallbacks.ios	필수	string	iOS 환경에서 딥링킹이 실패했을 때 유저를 보낼 대안 경로를 입력하세요. - 애플 앱 스토어: `‘itunes-appstore'`를 그대로 입력하세요. - 웹 페이지: 유저를 보낼 웹 URL을 입력하세요.
desktopPopUp	선택	boolean	- true: 데스크톱에서 새 창이 열립니다. - false: 데스크톱에서 새 창이 열리지 않습니다.
redirect	선택	boolean	- true: CTA 요소가 없는 등 웹 페이지 안에서 유저와 상호작용 없이 앱으로 딥링킹할 때 이 값을 그대로 입력하세요. - false: CTA 요소가 있는 등 웹 페이지 안에 유저와 상호작용 후에 앱으로 딥링킹할 때 이 값을 그대로 입력하세요.
ctaParams	선택	object	리포트에서 조회할 CTA 버튼 정보를 입력하세요.
defaultParams	선택	object	리포트에서 조회할 캠페인 정보를 입력하세요.

아래 예시를 참고하세요.

<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 를 사용하지 마세요.

setDownloads 함수

setDeeplinks 함수를 사용해 유저를 앱마켓으로 보낼 수 있습니다. 이는 앱 설치 여부와 관계 없습니다.

옵션	필수 여부	타입	설명
buttonID	필수	string	딥링킹 기능을 적용할 `<button>` 태그의 `id` 속성값입니다. Array로 여러 값을 입력할 수 있습니다.
ctaParams	선택	object	리포트에서 조회할 CTA 버튼 정보를 입력하세요.
defaultParams	선택	object	리포트에서 조회할 캠페인 정보를 입력하세요.

예시 코드입니다.

JavaScript

<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 를 사용하지 마세요.

sendWeb 함수

sendWeb 함수를 사용해 유저를 다른 웹 페이지로 보낼 수 있습니다. 이때 웹 페이지 간의 기여 정보가 전달됩니다.

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

아래처럼 주로 버튼에 사용할 수 있습니다. 콜백 함수를 설정하면 즉시 웹 사이트로 이동하지 않으며 콜백 함수로 전달되는 URL을 사용할 수 있습니다.

<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>

<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>

스마트 배너 만들기

openBanner 함수를 사용해 웹 페이지에 스마트 배너를 만들 수 있습니다. 에어브릿지에서 제공하는 스마트 배너를 활용해 웹 랜딩 페이지에 간단하게 스마트 배너를 만들 수 있습니다. 아래 이미지는 스마트 배너의 기본 형식이며 제목, 설명, 버튼 이름 등을 변경할 수 있습니다.

배너 정보

아래 필드를 입력해 배너를 구성할 수 있습니다.

옵션	필수 여부	타입	설명
title	필수	string	가장 위에 표시되는 제목입니다.
description	필수	string	제목 바로 아래에 표시되는 설명입니다.
buttonText	필수	string	버튼에 표시되는 이름입니다.
destination	필수	object	버튼을 클릭한 유저를 리다이렉션하는 경로입니다. 앱, 앱마켓, 웹에 따라 `type`을 다르게 입력해야 합니다.
color	선택	string	버튼에 적용할 색상입니다. CSS 색상 형식으로 설정합니다.
position	선택	string	화면에서 배너가 나타나는 위치입니다. - `top`: 화면 위에 나타납니다. - `bottom`: 화면 아래에 나타납니다.
styles	선택	object	배너에 적용할 스타일입니다.

리다이렉션 정보

배너 정보 중 destination 필드를 입력해 버튼을 클릭한 유저를 어디로 리다이렉션할지 설정할 수 있습니다. 앱으로 딥링킹하기 유저를 앱으로 딥링킹하려면 아래처럼 설정하세요.

옵션	필수 여부	타입	설명
destination.type	필수	string	`'deeplink'`를 그대로 입력하세요.
destination.deeplinks	필수	object	운영체제별로 유저를 딥링킹할 경로를 입력하세요.
destination.fallbacks	필수	object	딥링킹이 실패했을 때 운영체제별로 유저를 보낼 폴백 경로를 입력하세요.
destination.ctaParams	권장	object	리포트에서 조회할 CTA 버튼 정보를 입력하세요.
destination.defaultParams	선택	object	리포트에서 조회할 캠페인 정보를 입력하세요.

예시 코드입니다.

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',
        },
        ctaParams: {
            cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
            cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
            cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
        },
        defaultParams: {
            campaign: '<EXAMPLE_CAMPAIGN>',
            medium: '<EXAMPLE_MEDIUM>',
            term: '<EXAMPLE_TERM>',
            content: '<EXAMPLE_CONTENT>',
        },
    },
})

앱마켓으로 보내기 웹 페이지에 있는 유저를 앱마켓으로 보내려면 아래처럼 설정하세요.

옵션	필수 여부	타입	설명
destination.type	필수	string	`'download'`를 그대로 입력하세요.
destination.ctaParams	선택	object	리포트에서 조회할 CTA 버튼 정보를 입력하세요.
destination.defaultParams	선택	object	리포트에서 조회할 캠페인 정보를 입력하세요.

예시 코드입니다.

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',
        ctaParams: {
            cta_param_1: '<EXAMPLE_CTA_PARAM_1>',
            cta_param_2: '<EXAMPLE_CTA_PARAM_2>',
            cta_param_3: '<EXAMPLE_CTA_PARAM_3>',
        },
        defaultParams: {
            campaign: '<EXAMPLE_CAMPAIGN>',
            medium: '<EXAMPLE_MEDIUM>',
            term: '<EXAMPLE_TERM>',
            content: '<EXAMPLE_CONTENT>',
        },
    },
})

웹 페이지로 보내기 웹 페이지에 있는 유저를 다른 웹 페이지로 보내려면 아래처럼 설정하세요.

옵션	필수 여부	타입	설명
destination.type	필수	string	`'web'` 을 그대로 입력하세요.
destination.url	필수	string	유저를 보낼 웹 페이지 URL을 입력하세요.

예시 코드입니다.

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',
    },
})

스타일 정보

배너 정보 중 styles 필드를 입력해 배너 스타일을 변경할 수 있습니다. 키는 CSS 선택자(Selector) 형식이며, 에어브릿지에서 제공하는 아래 id를 사용해 스타일을 변경할 부분을 지정하세요. 변경할 값은 CSSStyleDeclaration (TypeScript) 형식을 참고해 지정하세요.

ID	설명
airbridge-banner	전체 배너 형식
airbridge-banner-icon	가장 왼쪽에 표시되는 아이콘
airbridge-banner-title	가장 위에 표시되는 제목
airbridge-banner-description	제목 바로 아래에 표시되는 설명
airbridge-banner-open	열기 버튼
airbridge-banner-close	닫기 버튼

아래는 예시 코드입니다.

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

추가 설정하기

구글 디지털 시장법(DMA) 준수

구글 디지털 시장법을 준수하기 위해서는 유저 동의 정보(User Consent)를 에어브릿지에 전달해야 합니다. 구글 디지털 시장법과 적용 대상 등에 대한 자세한 내용은 에어브릿지 가이드를 참고해 주세요.

주의하세요2024년 3월 6일부터 EEA 지역에 있는 기존 유저와 신규 유저에 대한 유저 동의 정보를 최소 1회 수집해야 합니다.

에어브릿지 SDK로 유저 동의 정보를 수집하려면 다음 방법을 참고하세요.

airbridge.setDeviceAlias 함수를 사용하여 유저 동의 정보 수집

알립니다에어브릿지는 유저 동의 정보 저장과 프롬프트 구현 방식 등에 관해 도움을 드릴 수 없습니다. 법률 자문사와 함께 검토해 주세요.

앱을 실행한 유저의 지역 정보를 확인하세요. 유저가 앱을 실행한 지역이 EEA(eea=1)라면 기존에 수집한 유저 동의 정보가 있는지 확인하세요. 유저가 앱을 실행한 지역이 EEA가 아니라면 유저 동의 정보를 수집하지 않아도 됩니다.

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

기존에 수집한 유저 동의 정보가 없다면 프롬프트 등으로 유저 동의 정보를 수집해야 합니다. 수집해야 하는 유저 동의 정보는 adPersonalization, adUserData입니다.

에어브릿지 SDK를 초기화한 후, airbridge.setDeviceAlias 함수를 통해 유저의 지역 정보와 수집한 유저 동의 정보를 에어브릿지 SDK에 전달하세요.

// Based on actual region
airbridge.setDeviceAlias('eea', '0' or '1')

// Based on actual user consent
airbridge.setDeviceAlias('adPersonalization', '0' or '1')
airbridge.setDeviceAlias('adUserData', '0' or '1')

수집한 유저 동의 정보를 전달할 때, 반드시 에어브릿지에서 지정한 필드명과 값을 사용해야 합니다. 에어브릿지 SDK에 전달해야하는 유저 동의 정보에 대한 자세한 내용은 아래를 참고하세요.

에어브릿지 필드 이름	타입	구글 필드 이름	설명
`eea`	`string`	`eea`	디지털 시장법 준수 지역 여부. - `0`: 디지털 시장법 준수와 관계 없는 지역. EEA 지역에 해당하지 않음. - `1`: 디지털 시장법 준수 지역. EEA 지역에 해당함.
`adPersonalization`	`string`	`ad_personalization`	개인 맞춤형 광고 제공을 위한 정보 수집에 대한 동의 여부. - `0`: 유저가 정보 수집에 동의하지 않음. - `1`: 유저가 정보 수집에 동의함.
`adUserData`	`string`	`ad_user_data`	유저 데이터를 구글에 전송하는 것에 대한 동의 여부. - `0`: 유저가 전송에 동의하지 않음. - `1`: 유저가 전송에 동의함.

에어브릿지 SDK에 유저 동의 정보를 전달한 이후에 startTracking 함수를 호출하세요.

airbridge.startTracking()

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

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

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`	유저 식별자

캠페인 파라미터 설정하기

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

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

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

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

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

UTM 파라미터 값 변경하기

utmParameterValueReplaceMap 옵션을 설정하면, utmParsing 옵션으로 수집한 UTM 파라미터의 값을 교체할 수 있습니다. 지원하는 파라미터는 utm_source, utm_campaign, utm_medium, utm_term, utm_content 입니다.utmParameterValueReplaceMap 옵션을 활용하면, 여러 솔루션을 통해 수집하는 UTM 파라미터를 같은 값으로 통일하여 하나의 대시보드에서 분석할 수 있습니다.

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로 확인할 수 있습니다.

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 을 입력 하지 않으면 다른 옵션 들도 무시됩니다.

기본 캠페인 파라미터 설정하기

기본 캠페인 파라미터는 트래킹 링크, UTM 파라미터 등에서 터치포인트 정보가 수집되지 않았을 때 어트리뷰션에서 가장 낮은 우선순위로 사용되는 값입니다. 기본 캠페인 파라미터를 설정해서 init 함수 호출 시에 정보를 입력할 수 있으며 선택사항입니다.

옵션	설명	예시	참고
`defaultChannel`	캠페인을 운영한 광고 채널 이름	website, website_organic, website_direct	- defaultParams에 포함되지 않습니다. - 해당 값을 입력하지 않을 시 airbridge.websdk가 표시됩니다.
`defaultParams.campaign`	캠페인을 구분하는 이름	summer_sale, spring_promo, content_marketing	-
`defaultParams.medium`	캠페인과 관련된 추가 정보	web_pdp, landing_page, blog	-
`defaultParams.term`	검색어나 키워드 정보	jeju_travel, 일본_프로모션, 중고_전자기기	-
`defaultParams.content`	콘텐츠 정보	product_detail, 프로모션_CTA, electronics_guide	-

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

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'],
    },
})

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

airbridge.events.send('category')

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

airbridge.events.send('category')

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

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

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

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

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

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

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

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

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

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

protectedAttributionWindowInMinutes 옵션을 통해 분 단위로 PAW를 설정할 수 있습니다. 기본 설정은 30분입니다. 최대 3일(4320분) 까지 설정할 수 있습니다. protectedAttributionWindowInMinutes 옵션은 useProtectedAttributionWindow 옵션을 true 로 설정했을 경우에만 작동합니다.

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

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

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

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

알립니다다음과 같은 상황을 고려하여 설정하세요.

여러 서브 도메인에서 하나의 같은 서비스를 운영하는 경우에는 true로 설정하세요.
여러 서브 도메인에서 각각 다른 서비스를 운영하는 경우에는 false로 설정하세요.

예제 시나리오

다음과 같은 상황을 가정하겠습니다.

캠페인 A에 대한 트래킹 링크를 클릭하여 https://www.airbridge.io 접속
이후, https://www.airbridge.io 웹 사이트 내의 다른 링크를 클릭하여 https://blog.airbridge.io 접속

위와 같은 경우, shareCookieSubdomain 설정에 따라 다르게 기여됩니다.

true
- https://www.airbridge.io → 캠페인 A에 기여
- https://blog.airbridge.io → 캠페인 A에 기여
false
- https://www.airbridge.io → 캠페인 A에 기여
- https://blog.airbridge.io → Unattributed

Unattributed 처리되는 상황은 https://blog.airbridge.io 에 Web SDK를 설치하고, init 함수에 특정한 캠페인 파라미터 관련 옵션을 입력하지 않았다고 가정했을 경우입니다.init 함수의 옵션에 따라 Web SDK의 내부 로직에 의하여 기여가 결정됩니다.

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

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

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'`	트래킹 링크가 소셜 미디어에 공유될 때 소셜 미디어가 fallbackPaths에 지정된 desktop URL의 Open Graph 태그를 직접 크롤링해 소셜 쉐어 프리뷰에 사용합니다. 동적(Dynamic) URL도 지원하며, 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 콜백을 통해 전달됩니다.

interface TrackingLink {
    shortURL: string
    qrcodeURL: string
}

필드	유형	설명
`shortURL`	`string`	트래킹 링크의 짧은 형식 URL
`qrcodeURL`	`string`	트래킹 링크의 QR URL

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

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
    }
)

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

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
    }
)

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

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
    }
)

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

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를 자동으로 수집하여 캠페인을 최적화합니다.

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

멀티 앱 사용하기

기본적으로 에어브릿지 Web SDK는 전역 airbridge 객체를 통해 사용할 수 있습니다. 하지만 특정 상황에서는 독립적인 SDK 인스턴스가 필요할 수 있습니다. 에어브릿지 Web SDK는 하나의 서비스에서 여러 Airbridge 앱을 동시에 사용할 수 있도록 지원합니다. createAirbridge 함수를 통해 새로운 인스턴스를 생성할 수 있습니다.

인스턴스 생성 및 초기화

브라우저 스크립트를 통해 생성하기

<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){function q(b,a){function d(){var l=x(b,a);y(l)}if(0<_g){var e,f=new (null!=(e=a_.XDomainRequest)?e:a_.XMLHttpRequest);e=function(){};f.open("GET",a);f.timeout=_g;f.onload=d;f.onerror=e;f.onprogress=e;f.ontimeout=e;f.send()}else d()}function y(b){if("complete"===i_.readyState)i_.head.appendChild(b);else{var a=function(){a_.removeEventListener("load",a);i_.head.appendChild(b)};a_.addEventListener("load",a)}}function x(b,a){var d=i_.createElement(r_);d.async=!0;d.src=a;d.onerror=function(){return z(b)};return d}function z(b){b.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("Failed to load Airbridge SDK.")})}function r(b){var a={queue:null!=b?b:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(d){var e=d.split("."),f=e.pop();e.reduce(function(l,t){var u;return l[t]=null!=(u=l[t])?u:{}},a)[f]=function(){a.queue.push([d,arguments])}});return a}null!=a_.__AIRBRIDGE__||(a_.__AIRBRIDGE__={mocks:[]});"undefined"!==typeof i_.documentMode&&(_r=_r.replace(/^https:/,""));a_.createAirbridge=function(){var b=r(),a;null==(a=a_.__AIRBRIDGE__)||a.mocks.push(b);q(b,_r);return b};a_[_b]||(_e=r(_e),a_[_b]=_e,q(_e,_r))})(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);

const customInstance = createAirbridge()
customInstance.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
})
</script>

패키지 제공 함수를 통해 생성하기

import { createAirbridge } from 'airbridge-web-sdk-loader'

const customInstance = createAirbridge()
customInstance.init({
    app: '<YOUR_APP_NAME>',
    webToken: '<YOUR_WEB_TOKEN>',
})

전역 airbridge 객체 및 createAirbridge로 생성한 인스턴스들 모두 서로 독립적으로 동작하며, 초기화를 포함한 모든 SDK 기능을 독립적으로 사용할 수 있습니다.

웹 이벤트 전송하기

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

​Web SDK 설치하기

​지원 브라우저

​SDK 초기화하기

​설치 확인하기

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

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

​웹 이벤트

​웹 이벤트 전송하기

​웹 이벤트 추가 설정하기

​이벤트 예시 코드

​유저 정보

​유저 ID 설정하기

​유저 속성 설정하기

​유저 정보 초기화하기

​웹투앱 설정

​딥링킹 경로 (필수)

​폴백 경로 (필수)

​타입 (필수)

​CTA 버튼 정보 (권장)

​캠페인 정보 (선택)

​커스텀 스토어 페이지 정보 (선택)

​기존 함수 참고사항

​스마트 배너 만들기

​배너 정보

​

​리다이렉션 정보

​스타일 정보

​추가 설정하기

​구글 디지털 시장법(DMA) 준수

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

​캠페인 파라미터 설정하기

​이벤트 전송 완료 대기하기

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

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

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

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

​몰로코 쿠키 ID 수집하기

​멀티 앱 사용하기

​인스턴스 생성 및 초기화

​웹 이벤트 전송하기

Web SDK 설치하기

지원 브라우저

SDK 초기화하기

설치 확인하기

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

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

웹 이벤트

웹 이벤트 전송하기

웹 이벤트 추가 설정하기

이벤트 예시 코드

유저 정보

유저 ID 설정하기

유저 속성 설정하기

유저 정보 초기화하기

웹투앱 설정

딥링킹 경로 (필수)

폴백 경로 (필수)

타입 (필수)

CTA 버튼 정보 (권장)

캠페인 정보 (선택)

커스텀 스토어 페이지 정보 (선택)

기존 함수 참고사항

스마트 배너 만들기

배너 정보

리다이렉션 정보

스타일 정보

추가 설정하기

구글 디지털 시장법(DMA) 준수

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

캠페인 파라미터 설정하기

이벤트 전송 완료 대기하기

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

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

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

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

몰로코 쿠키 ID 수집하기

멀티 앱 사용하기

인스턴스 생성 및 초기화

웹 이벤트 전송하기