Install the Airbridge Web SDK using one of the methods below.
Add the code below to the bottom of the <head>
section.
<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>
Run the commands below to install airbridge-web-sdk-loader
.
npm install airbridge-web-sdk-loader
yarn add airbridge-web-sdk-loader
pnpm i airbridge-web-sdk-loader
If you install the airbridge-web-sdk-loader
package, you can refer to the code below.
import airbridge from 'airbridge-web-sdk-loader'
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
})
The app
and webToken
can be found in the Airbridge dashboard under Settings → Tokens.
The Airbridge Web SDK works on all browsers that support ES5.
Browser | Supported |
---|---|
Chrome | ✔️ |
Firefox | ✔️ |
Safari | ✔️ |
Internet Explorer | IE 9 + |
Initialize the Airbridge Web SDK using the airbridge.init()
function. The app
and webToken
values required for initialization can be found in the Airbridge dashboard under Settings → Tokens. Additional initialization options can be configured as needed.
Below is an example code of how to initialize the SDK.
Option | Required or Optional | Type | Default value | Description |
---|---|---|---|---|
| Required |
|
| The app name that is required for the Web SDK initialization. |
| Required |
|
| The Web SDK token that is required for the Web SDK initialization. |
| Optional |
|
| If explicit opt-in is required, set this value to |
| Optional |
|
| Automatically maps UTM values from the URL parameters to the corresponding Airbridge campaign parameter values. |
| Optional |
|
| By configuring |
| Optional |
|
| When |
| Optional |
|
| You can pass user information during initialization. |
| Optional |
|
| You can send user email addresses and phone numbers in hashed form. |
| Optional |
|
| For more information, refer to Edit the attribution window. |
| Optional |
|
| For more information, refer to Edit the attribution window. |
| Optional |
|
| For more information, refer to Set the attribution window for web-to-app attribution. |
| Optional |
|
| For more information, refer to Set the attribution window for web-to-app attribution. |
| Optional |
|
| For more information, refer to Share attribution data across subdomains. |
| Optional |
|
| This is an option for configuring the Moloco cookie ID. For more details, refer to Collect Moloco cookie ID. |
| Optional |
|
| This option allows you to separate storage spaces so that attribution data for multiple apps using subdomains under the same root domain can be managed independently. |
Attention
Optional setting. Configure only if necessary.
The opt-in policy requires user consent before using user data.
After setting the autoStartTrackingEnabled
to false
, call the startTracking
function at the point where you can collect events. When the startTracking
function is called, the SDK will start collecting events.
The default setting is true
.
Prevent automatic event tracking after initialization through the autoStartTrackingEnabled
.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
autoStartTrackingEnabled: false,
})
Collect user responses to the collection and use of personal information. If the user agrees to the collection and use of personal information, start tracking events.
airbridge.startTracking()
Attention
Optional setting. Configure only if necessary.
The opt-out policy allows the use of user information until the user explicitly declines.
After setting the autoStartTrackingEnabled
option to true
, call the stopTracking
function at the point where you can no longer collect events. When the stopTracking
function is called, the SDK will stop collecting events.
Enable automatic event tracking after initialization through the autoStartTrackingEnabled
. Since the default value of the autoStartTrackingEnabled
option is true, events are tracked automatically event if this setting is omitted.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
autoStartTrackingEnabled: true,
})
Collect user responses to the collection and use of personal information. If the user refuses the collection and use of personal information, stop tracking events.
airbridge.stopTracking()
The Airbridge Web SDK collects user actions from the app as per settings and sends them as in-app events.
웹 이벤트를 전송하기 위해 airbridge.events.send
함수를 사용합니다. airbridge.events.send
함수를 사용하기 위해 아래 예시를 참고 바랍니다.
Use the airbridge.events.send
function to send events.
Refer to the example below.
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',
},
})
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| Name of the event |
| Optional |
| Subcategory of the event |
| Optional |
| Subcategory of the event |
| Optional |
| Subcategory of the event |
| Optional |
| Semantic attributed of the event |
| Optional |
| Custom attribute of the event |
Refer to the component definition and available strings below.
Airbridge provides Standard Events. Refer to the list of Standard Events and send events accordingly.
You can send a custom event by entering the event name set in the event taxonomy.
Additional information about the event can be collected using attributes.
action
, label
: Collect information that can be used as GroupBys in the Airbridge reports.
value
: Collect information that can be used for sales analysis. Airbridge can perform calculations using the collected data.
Semantic Attribute: Collect predefined attributes by Airbridge.
Custom Attribute: Collect attributes defined by Airbridge users.
The semantic attributes predefined by Airbridge can be found in the user guide below.
Attention
Optional setting. Configure only if necessary.
Configure additional settings for sending web events if necessary.
You can send additional user information when sending the events through the SDK.
Function | Description |
---|---|
| Adds device identifier |
| Delete specified device identifier |
| Delete all device identifiers |
airbridge.setDeviceAlias('<DEVICE_ALIAS_KEY>', '<DEVICE_ALIAS_VALUE>')
airbridge.removeDeviceAlias('<DEVICE_ALIAS_KEY>')
airbridge.clearDeviceAlias()
Airbridge collects in-app events that are classified as Standard Events and Custom Events. Standard Events. are events predefined by Airbridge.
Refer to the example codes below.
Sign-up
// 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')
Sign-in
// 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')
Sign-out
// Send event before clearing user information
airbridge.events.send('airbridge.user.signout')
// Initialize user information
airbridge.clearUser()
Home Screen
airbridge.events.send('airbridge.ecommerce.home.viewed')
Product Catalog
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',
},
],
},
})
Search Results
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',
},
],
},
})
Product View
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',
}],
},
})
Add Payment Info
airbridge.events.send('airbridge.addPaymentInfo', {
semanticAttributes: {
type: 'CreditCard',
},
})
Add to Wishlist
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',
}],
},
})
Add to Cart
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',
}],
},
})
Initiate Checkout
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',
},
],
},
})
Order Complete
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',
},
],
},
})
Order Cancel
Attention
For Order Cancel events, make sure to enter the
transactionID
of the Order Cancel event into thetransactionID
field.
If thetransactionID
values don't match, the Order Cancel event won't be processed properly.For more details, refer to the Collecting Order Cancel Events for Accurate Sales Performance Measurement.
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',
},
],
},
})
Start Trial
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',
}],
},
})
Subscribe
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',
}],
},
})
Unsubscribe
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',
}],
},
})
Ad Impression
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',
}],
},
})
Ad Click
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',
}],
},
})
Complete Tutorial
airbridge.events.send('airbridge.completeTutorial', {
semanticAttributes: {
description: 'Finish Initial Tutorial',
},
})
Achieve Level
airbridge.events.send('airbridge.achieveLevel', {
semanticAttributes: {
level: 13,
},
})
Unlock Achievement
airbridge.events.send('airbridge.unlockAchievement', {
semanticAttributes: {
achievementID: '36a0f0bb-b153-4be1-a3e0-3cb5b2b076c1'
description: 'Finish Initial Tutorial',
score: 80,
},
})
Rate
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',
}],
},
})
Share
airbridge.events.send('airbridge.share', {
semanticAttributes: {
description: 'Share Promotion',
sharedChannel: 'CopyLink',
},
})
Schedule
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',
}],
},
})
Spend Credits
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',
}],
},
})
Custom Events are events defined by Airbridge users to track user actions that are unique to their services.
Refer to the example code below.
airbridge.events.send('category', {
label: 'label',
action: 'action',
value: 10,
semanticAttributes: {
transactionID: 'transaction_123',
},
customAttributes: {
key: 'value',
}
})
User IDs refer to the user identifier used in a service. User IDs should be unique IDs that can unique users across websites and apps.
The user data you set is stored in the browser’s local storage and will be included in all events until it is cleared.
Function | Description |
---|---|
| Inputs user ID. |
| Deletes user ID. |
| Inputs additional user identifier. |
| Deletes specified user identifier from the list of additional user identifiers. |
| Deletes all additional user identifiers. |
Refer to the example below.
// ID
airbridge.setUserID('testID')
airbridge.clearUserID()
// alias
airbridge.setUserAlias('ADD_YOUR_KEY', 'value')
airbridge.removeUserAlias('DELETE_THIS_KEY')
airbridge.clearUserAlias()
Attention
Sensitive user information may be included. Send after a thorough review with a legal advisor.
By setting user properties, you can send additional user information.
Function | Description |
---|---|
| Inputs user’s email address that is hashed using SHA-256. |
| Deletes user email. |
| Inputs user’s phone number that is hashed using SHA-256. |
| Deletes user’s phone number. |
| Inputs additional user property. |
| Deletes specified user property from the list of additional user properties. |
| Deletes all additional user properties. |
// 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()
You can send user email addresses and phone numbers in hashed form.
The default setting is true
.
The user ID is not affected by the hash option, so if hashing is required, you must hash the user ID yourself before assigning its value.
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN?',
// ...
userHash: false, // Default true
})
Use the clearUser
function to clear user data.
airbridge.clearUser()
The Airbridge Web SDK supports deep linking, which allows you to pass attribution data from the web to the app. It also enables passing attribution data from one web session to another, without involving an app.
You can use the openBanner
function to display a smart banner that encourages web users to install your app. By implementing various options, you can customize the banner’s title, description, button color and text, and enable Web-to-App, Web-to-Store, or Web-to-Web tracking.
공통 옵션
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| Banner name |
| Required |
| Banner description |
| Required |
| The text to be displayed on the app download button in the banner |
| Optional |
| The color to be applied to the app download button in the banner. It can be set using a CSS color format. |
| Optional |
| Specifies the position of the banner.
: The banner will appear at the top of the screen
: The banner will appear at the bottom of the screen |
| Required |
| Specifies how the app download button in the banner behaves.
. |
| Optional |
| Custom styles to be applied to the banner |
If the type
of the destination
option is set to deeplink
, clicking the banner button will open the app.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| Cannot be changed from
|
| Optional |
| Deep link setting. For more details, refer to this article. |
| Optional |
| Deep link fallback setting. For more details, refer to this article. |
| Optional |
| Campagin parameter |
| Optional |
| CTA camapgin parameter |
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>',
},
})
If the type
of the destination
option is set to download
, clicking the banner button will open the app store.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| Cannot be changed from
|
| Optional |
| Campaign parameter |
| Optional |
| CTA campaign parameter |
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>',
},
})
If the type
of the destination
option is set to web
, clicking the banner button will navigate the user to a specified website.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| Cannot be changed from
|
| Required |
| Input the URL to redirect the user |
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>',
},
})
You can customize the banner's appearance by adding a styles
field to the options.
Each key should be specified using a CSS selector format, and each value should follow the CSSStyleDeclaration
(TypeScript) format.
See the example below, which changes the border-radius
of the icon area.
airbridge.openBanner({
...
styles: {
'#airbridge-banner-icon': {
borderRadius: '4px'
}
}
})
Below is a list of IDs that can be used to apply CSS styles. You can specify the CSS style using a CSS selector format (e.g., #airbridge-banner-icon
).
ID | Description |
---|---|
| Entire banner area |
| Banner icon |
| Banner title |
| Banner description |
| App dowload cTA button |
| Banner close button |
The Airbridge Web SDK offers features to support custom banner implementation. If you want to add deep linking to an existing banner or build a more advanced custom banner, refer to the following information.
You can use the openDeeplink
function to open the app via a deep link.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| The scheme URL of the app to be launched via deep link on Android. |
| Required |
| The scheme URL of the app to be launched via deep link on iOS. |
| Required |
| The URL of the website to redirect users to on desktop. |
| Required |
| The URL to redirect users to when the deep link fails on an Android device where the app is not installed. |
| Required |
| The URL to redirect users to when the deep link fails on an iOS device where the app is not installed. |
| Required |
| Select one of the following options depending on the user's interaction.
- |
| Required |
| Campaign parameter |
| Required |
| CTA campaign parameter |
Refer to the example below.
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>',
},
})
Attention
Make sure to use the deep link scheme URLs configured in the Airbridge dashboard for both
deeplinks.android
anddeeplinks.ios
.
<YOUR_SCHEME>://...
Never use the following types of URLs: Intent scheme URLs or HTTP/HTTPS URLs.
intent://...
market://...
https://www.example.com
Refer to the examples for tracking button-clicking events.
<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>
Attention
Make sure to replace
<BUTTON_ID>
in the example with the actual ID of the button that should trigger the deep link when the user clicks it.
If you don’t input the deeplinks
option in the openDeeplink
function and set the fallbacks
option to store
, the app store will open regardless of whether the app is installed.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| The destination to redirect users to on an Android device. Cannot be changed from |
| Required |
| The destination to redirect users to on an iOS device. Cannot be changed from |
| Optional |
| Campaign parameter |
| Optional |
| CTA campaign parameter |
Refer to the example below.
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>',
},
})
Refer to the examples for configuring buttons.
<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>
Attention
Make sure to replace
<BUTTON_ID>
in the example with the actual ID of the button that should trigger the deep link when the user clicks it.
If you don’t input the deeplinks
option in the openDeeplink
function and set the fallbacks
option to URL, the user will be redirected to the website regardless of whether the app is installed.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| The URL to redirect users to on an Android device. |
| Required |
| The destination to redirect users to on an iOS device. |
| Optional |
| Campaign parameter |
| Optional |
| CTA campaign parameter |
Refer to the example below.
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>',
},
})
Refer to the examples for configuring buttons.
<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>
Attention
Make sure to replace
<BUTTON_ID>
in the example with the actual ID of the button that should trigger the deep link when the user clicks it.
The
openDeeplink
function is a unified replacement for the existingsetDeeplinks
,setDownloads
, andsendWeb
functions. It is a pure function that can be used independently, without needing to bind it to a DOM element, such as a button.The
setDeeplinks
function will be maintained but no longer updated in future releases. Therefore, use theopenDeeplink
function to implement the features you need.
You can use the setDeeplinks
function to assign deep link functionality to a button.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| The |
| Required |
| The scheme URL of the app to be launched via deep link on Android. |
| Required |
| The scheme URL of the app to be launched via deep link on iOS. |
| Required |
| The URL of the website to redirect to on desktop. |
| Required |
| The URL to redirect users to when the deep link fails on an Android device where the app is not installed. |
| Required |
| The URL to redirect users to when the deep link fails on an iOS device where the app is not installed. |
| Optional |
| On desktop, the redirection will open in a new window. |
| Optional |
| Select one of the following options depending on the user's interaction.
- |
| Optional |
| Campaign parameter |
| Optional |
| CTA campaign parameter |
Refer to the example below.
<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>
Attention
When using the
setDeeplinks
function, the Web SDK manages the button behavior internally, so do not set anonclick
function on the button. Also, do not use theid
of an<a>
tag as the target element.
The
openDeeplink
function is a unified replacement for the existingsetDeeplinks
,setDownloads
, andsendWeb
functions. It is a pure function that can be used independently, without needing to bind it to a DOM element, such as a button.The
setDownloads
function will be maintained but no longer updated in future releases. Therefore, use theopenDeeplink
function to implement the features you need.
You can use the setDownloads
function to configure the store redirection functionality to a button.
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| The |
| Optional |
| Campaign parameter |
| Optional |
| CTA campaign parameter |
<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>
Attention
When using the
setDownloads
function, the Web SDK manages the button behavior internally, so do not set anonclick
function on the button. Also, do not use theid
of an<a>
tag as the target element.
Attention
The
openDeeplink
function is a unified replacement for the existingsetDeeplinks
,setDownloads
, andsendWeb
functions. It is a pure function that can be used independently, without needing to bind it to a DOM element, such as a button.The
sendWeb
function will be maintained but no longer updated in future releases. Therefore, use theopenDeeplink
function to implement the features you need.
You can use the sendWeb
function to send users to a website on a different domain. In this case, attribution data can be passed across the websites.
airbridge.sendWeb('https://other.example.com')
If you input a callback function, users are not sent to the website immediately. The URL sent through the callback function can be used freely.
<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>
You can pass user data during initialization so that all subsequent events include the user data.
The user data you set is stored in the browser’s local storage and will be included in all events until it is cleared.
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',
},
},
})
Option | Type | Description |
---|---|---|
|
| User ID |
|
| User email |
|
| User’s phone number |
|
| User attribute (Custom Key Value Pair) |
| Obj | User identifier |
When users land on your website through an ad, you can append parameters to the URL to enable web traffic attribution based on that information.
When the utmParsing
option is set to true
, UTM-related parameters included in the URL are automatically extracted and attached to events. The default event is false
.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
utmParsing: true,
})
Attention
The URL must contain the
utm_source
parameter. Even if theutmParsing
option is set totrue
, other UTM parameters are ignored when theutm_source
parameter is not in the URL.
The utmParameterValueReplaceMap
option allows you to replace the values of UTM parameters collected through the utmParsing
option. Supported parameters include utm_source
, utm_campaign
, utm_medium
, utm_term
, and utm_content
.
By using utmParameterValueReplaceMap
, you can align UTM parameter values collected from various sources, making it easier to analyze data consistently in a single dashboard.
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
// ...
utmParsing: true,
utmParameterValueReplaceMap: {
utm_source: {
'before_replace': 'after_replace',
},
},
})
In the example above, if the utm_source
in the URL is before_replace
(e.g., https://www.example.com/?utm_source=before_replace
), the value will be replaced with after_replace
and sent with the event.
By configuring the urlQueryMapping
option, you can include non-UTM parameters as campaign parameters and send them with events.
Option | Required or Optional | Description |
---|---|---|
| Required | Channel |
| Optional | Camaign |
| Optional | Ad group |
| Optional | Ad creative |
| Optional | Content |
| Optional | Search keyword |
| Optional | Sub-publisher |
| Optional | Sub-sub publisher1 |
| Optional | Sub-sub publisher2 |
| Optional | Sub-sub publisher3 |
| Optional | Campaign ID |
| Optional | Ag group ID |
| Optional | Ad creative ID |
| Optional | Keyword ID |
Let’s say, the following URL contains the utm_source
, utm_campaign
parameters and the my_sub_id
parameter that is used within your service.
https://www.example.com/path?utm_source=my_channel&utm_campaign=my_campaign&my_sub_id=example
In this case, you can view sub_id_1
as my_sub_id
in the Airbridge dashboard, along with utm_source
and utm_parameter
.
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
// ...
urlQueryMapping: {
channel: 'utm_source',
campaign: 'utm_campaign',
sub_id_1: 'my_sub_id',
},
})
Attention
Input
channel
in theurlQueryMapping
option. If not, all other options are also ignored.
You can manually parse the parameters and pass the information when calling the init
function.
Option | Required or Optional | Description |
---|---|---|
| Optional | Ad channel name |
| Optional | Campaign name |
| Optional | Medium name |
| Optional | Search keywor |
| Optional | Ad content |
Refer to the following example.
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'],
},
})
You can use the events.wait
function to ensure that all event transmissions are completed before the user navigates away.
If a page is navigated away before the events are fully transmitted, there is a risk of event data loss. For example, when transmitting event data on an intermediate page that quickly redirects, use events.wait
and minimize the risk of data loss.
Option | Type | Description |
---|---|---|
|
| Maximum delay time (milliseconds) |
|
| Event sending complete 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>'
})
You can set the attribution window in days using the cookieWindow
option.
The default setting is 3 days.
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
// ...
cookieWindowInMinutes: <MINUTES>,
})
You can also set the attribution window in minutes using the cookieWindowInMinutes
option. If both cookieWindow
option and cookieWindowInMinutes
option are configured, the cookieWindowInMinutes
option takes precedence.
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
// ...
cookieWindow: <DAYS>,
})
You can configure the Protected Attribution Window (PAW) using the useProtectedAttributionWindow
option.
The default setting is true
.
When useProtectedAttributionWindow
is set to true
, PAW is applied.
For more details, refer to the User Guide.
When useProtectedAttributionWindow
is set to false
, PAW is not applied.
For more details, refer to the User Guide.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
useProtectedAttributionWindow: true,
})
You can set the Protected Attribution Window (PAW) in minutes using the protectedAttributionWindowInMinutes
option.
The default value is 30 minutes, and it can be set up to a maximum of 3 days (4320 minutes).
This option is only enabled when useProtectedAttributionWindow
is set to true
.
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
// ...
useProtectedAttributionWindow: true,
protectedAttributionWindowInMinutes: 60,
});
By default, the Airbridge Web SDK stores attribution data in cookies and uses the root domain's cookie storage. This allows attribution data to be shared across subdomains.
If you're using multiple subdomains, you can configure whether to share cookies between them using the shareCookieSubdomain
option.
When shareCookieSubdomain
is set to false
, data will not be shared between subdomains.
The default setting is true
.
// initialize
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
// ...
shareCookieSubdomain: false,
})
Note
Configure the setting based on the following scenarios:
Set to
true
if you are operating a single service across multiple subdomains.Set to
false
if you are operating different services on each subdomain.
Let’s assume the following scenario:
A user clicks a tracking link for Campaign A and lands on https://www.airbridge.io
.
The user then clicks a link on the site and is redirected to https://blog.airbridge.io
.
In this case, the attribution result will differ depending on the shareCookieSubdomain
setting:
true
https://www.airbridge.io
→ Attributed to Campaign A
https://blog.airbridge.io
→ Attributed to Campaign A
false
https://www.airbridge.io
→ Attributed to Campaign A
https://blog.airbridge.io
→ Unattributed
The unattributed case assumes that the Web SDK is installed on https://blog.airbridge.io
, and that no specific campaign parameter options were added to the init
function.
Attribution is determined by the internal logic of the Web SDK based on the options set in the init
function.
By default, the Airbridge Web SDK is designed to store attribution data for only one app per domain.
When the useStoragePerApp
option is set to true
, data storage is separated, allowing multiple apps using subdomains under the same root domain to manage attribution data independently.
The default setting is false
.
For example, if multiple apps are used on subdomains that share the same root domain, such as a.example.com and b.example.com under example.com, you can separate the storage by enabling the useStoragePerApp
option as shown below.
// 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,
})
Attention
If you change the
useStoragePerApp
option, the first event triggered in each browser immediately after the change may be unattributed.
You can create a tracking link using the createTrackingLink
function. A tracking link is a URL created to transmit touchpoint data generated by users to Airbridge.
With tracking links, you can direct users who have viewed or clicked on an ad to a desired destination. In the Airbridge dashboard, you can use the touchpoint data collected from these tracking links to analyze which channels contributed to conversions.
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
}
Option | Required or Optional | Type | Description |
---|---|---|---|
| Required |
| Advertising channel to use with the tracking link |
| Required |
| Option for creating tracking links |
| Required |
| Success callback |
| Optional |
| Failure callback |
You can configure options
using the following parameters.
Parameter | Type | Description |
---|---|---|
|
| Campaign name |
|
| Ad group |
|
| Ad creative |
|
| Ad content |
|
| Search keyword |
|
| An ID that represents a sub-network or affiliate media partner |
|
| An additional sub-network ID (sub-sub publisher). |
|
| An additional sub-network ID (sub-sub publisher). |
|
| An additional sub-network ID (sub-sub publisher). |
|
| Deeplink URL |
|
| Whether to enable the Stopover Airpage for the deep link |
|
| ios fallback for devices without the app |
|
| Android fallback for devices without the app |
|
| Desktop fallback for devices without the app |
|
| The |
|
| The |
|
|
|
|
|
|
|
|
|
|
| The specified desktop Open Graph is crawled and used. |
|
| Link Short ID for the tracking link when creating a link for a custom channel. |
|
| Re-engagement parameter
|
Tracking links created using the createTrackingLink
function are passed via the onSuccess
callback.
interface TrackingLink {
shortURL: string
qrcodeURL: string
}
이름 | 타입 | 설명 |
---|---|---|
|
| 트래킹 링크의 단축 URL |
|
| 트래킹 링크의 QR Code 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
}
)
When collectMolocoCookieID
is set to true
, the SDK automatically collects the cookie ID from events driven by Moloco web campaigns, enabling campaign optimization.
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
// ...
collectMolocoCookieID: true,
})
Was this helpful?