Developer Guide
SDK Integration
Web SDK

Web SDK

Last updated 3 days ago

Install SDK

Install package

You can install the Airbridge Web SDK using the options below.

1. Install the SDK manually

Add the following code at the end of the <head> element.

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

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

The App Name and Web SDK Token can be found on the [Settings]>[Tokens] page in the Airbridge dashboard.

Protected Attribution Window setup
To measure web-to-app performance, you may need to configure the Protected Attribution Window (PAW). For details about configuring the PAW, refer to this section of the article.

2. Install the SDK using a package manager

1. Run the following command to install the airbridge-web-sdk-loader.

Shell

1
npm install airbridge-web-sdk-loader

2. Import airbridge and call the airbridge.init function.

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

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

3. Install the SDK using the Google Tag Manager

Go to Install SDK Using the Google Tag Manager for detailed instructions.

Supported browsers

The Airbridge Web SDK works on all browsers that support ES5.

Chrome	Firefox	Safari	Internet Explorer
✔️	✔️	✔️	IE 9 and later

Verify the installation

123
button.onclick = () => {
    console.log(airbridge.isSDKEnabled)
}

To verify the installation, visit the web page where the SDK is installed and open the developer console.

If airbridge.isSDKEnabled is true, you will find Open events on the [Raw Data]>[Web Real-time Log] page in the Airbridge dashboard.

Once the Web SDK has been loaded and initialized, the airbridge.isSDKEnabled function value will change from false to true.

User Data

Send user data upon initialization

Upon the SDK initialization, events collected from the website are sent to Airbridge. The user data is stored in the browser's local storage and sent along with the events until the signOut function is called.

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

Attribute	Type	Description
`user.externalUserID`	String	User ID
`user.externalUserEmail`	String	User Email
`user.externalUserPhone`	String	User phone number
`user.attributes`	Object	Custom user attribute (Custom key-value pair)
`user.alias`	Object	User alias

Set up User IDs

You can set up the SDK to collect the user identifier, as shown in the example below. The user data is stored in the browser's local storage and sent along with the events until the clearUser function is called.

12
airbridge.setUserID('654321')
airbridge.setUserEmail('user@example.com')

You may also set up user aliases like in the example below. The user alias data can be used for identity matching when integrating Airbridge with other third-party tools.

12
airbridge.setUserAlias('amplitude_id', '12345678')
airbridge.setUserAlias('braze_ext_id', '87654321')

Send additional user information

Refer to the example below to send user attributes.

123
airbridge.setUserAttribute('age', 45)
airbridge.setUserAttribute('gender', 'male')
airbridge.setUserAttribute('name', 'John Doe')

Verify the setup

Follow the steps below to verify that the user data you want to collect is sent to Airbridge as intended.

Set up User IDs.
Send an event using the SDK.
Navigate to [Raw Data]>[Web Real-time Logs] in the Airbridge dashboard and click the event you've sent.
Check if the user data is displayed as intended in the JSON.

Device Data

Set up device alias

Set up the SDK to send the device alias data. The alias is retained even after the website is closed unless it is deleted.

123
airbridge.setDeviceAlias('YOUR_KEY', 'YOUR_VALUE')
airbridge.removeDeviceAlias('YOUR_KEY')
airbridge.clearDeviceAlias()

Method	Description
`setDeviceAlias(key: string, value: string)`	Adds the key-value pair to the device identifier
`removeDeviceAlias(key: string)`	Deletes the device identifier corresponding to the provided Key. If no matching identifier exists, no action is taken.
`clearDeviceAlias()`	Deletes all device aliases

Attention
For iOS, the device alias data is retained for up to 7 days, due to the system's maximum cookie storage limit.

Events

The Airbridge SDK collects user actions per settings and sends them as web events.

Event parameters

The category parameter is required to send events to Airbridge.

Field Name	Type	Detailed Parameter Field Name	Subtype	Description
Category	String	-	-	Event Name (required)
Event Attribute	Object	label	String	Event sub-attribute 1
Event Attribute	Object	action	String	Event sub-attribute 2
Event Attribute	Object	value	Number	Custom event value
Event Attribute	Object	semanticAttributes	Object	Semantic event attributes
Event Attribute	Object	customAttributes	Object	Custom event attributes

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

Send Standard Events

View Home Screen

Name	Field	Type	Description
homeViewEvent	-	-	-

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

Field	Type	Description
userID	String	User's ID
userEmail	string	User's Email
userPhone	string	User's Phone
attributes	object	User's Attributes
alias	object	User's Alias

1234
airbridge.setUserID('ab180')
airbridge.setUserEmail('user@example.com')

airbridge.events.send('airbridge.user.signup')

Field	Type	Description
userID	String	User ID
userEmail	String	User Email
userPhone	String	User Phone
attributes	Object	User Attributes
alias	Object	User Alias

1234
airbridge.setUserID('ab180')
airbridge.setUserEmail('user@example.com')

airbridge.events.send('airbridge.user.signin')

Sign-out

Name	Field	Type	Description of Parameter
signOut	-	-	-

123
airbridge.events.send('airbridge.user.signout')

airbridge.clearUser()

View Product List

Field	Type	Detailed Parameter Field Name	Subtype	Description
productListID	string	-	-	product list ID
products	Array<Product>	-	-	product array
products	Array<Product>	productID	string	product ID
products	Array<Product>	name	string	product name
products	Array<Product>	price	number	product price
products	Array<Product>	currency	string	product currency
products	Array<Product>	quantity	number	product quantity
products	Array<Product>	position	number	product position

123456789101112131415161718192021
airbridge.events.send('airbridge.ecommerce.productList.viewed', {
    semanticAttributes: {
        productListID: 'food',
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                position: 2
            }
        ]
    }
})

View Product Details

Name: products

Type: Array<Object>

Field	Type	Description
-	-	Product object array
productID	string	product ID
name	string	product name
price	number	product price
currency	string	product currency
quantity	number	product quantity
position	number	product position

1234567891011
airbridge.events.send('airbridge.ecommerce.product.viewed', {
    semanticAttributes: {
        products: [{
            productID: 'coke_zero',
            name: 'Coke Zero',
            price: 1.99,
            currency: 'USD',
            position: 1
        }]
    }
})

View Search Results

Field	Type	Detailed Parameter Field Name	Subtype	Description
query	string	-	-	Search Query
products	Array<Product>	-	-	Product Array
products	Array<Product>	productID	string	Product ID
products	Array<Product>	name	string	Product Name
products	Array<Product>	price	number	Product Price
products	Array<Product>	currency	string	Product Currency
products	Array<Product>	quantity	number	Product Quantity
products	Array<Product>	Position	number	Product Position

123456789101112131415161718192021
airbridge.events.send('airbridge.ecommerce.searchResults.viewed', {
    semanticAttributes: {
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                position: 2
            }
        ],
        query: 'Search Query'
    }
})

Add To Cart

Field	Type	Detailed Parameter Field Name	Subtype	Description
cartID	string	-	-	Product Cart ID
currency	string	-	-	Product Currency
products	Array<Product>	-	-	Product Array
products	Array<Product>	productID	string	Product ID
products	Array<Product>	name	string	Product Name
products	Array<Product>	price	number	Product Price
products	Array<Product>	currency	string	Product Currency
products	Array<Product>	quantity	number	Product Quantity
products	Array<Product>	position	number	Product Position

12345678910111213141516171819202122232425
airbridge.events.send('airbridge.ecommerce.product.addedToCart', {
    value: 13.95,
    semanticAttributes: {
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                quantity: 3,
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                quantity: 2,
                position: 2
            }
        ],
        cartID: '73926365',
        currency: 'USD'
    }
})

Order Complete

Field	Type	Detailed Parameter Field Name	Subtype	Description
inAppPurchased	boolean	-	-	Product In-App Purchased
currency	string	-	-	Product Currency
transactionID	string	-	-	Transaction ID
products	Array<Product>	-	-	Product Array
products	Array<Product>	productID	string	Product ID
products	Array<Product>	name	string	Product Name
products	Array<Product>	price	number	Product Price
products	Array<Product>	currency	string	Product Currency
products	Array<Product>	quantity	number	Product Quantity
products	Array<Product>	position	number	Product Position

1234567891011121314151617181920212223242526
airbridge.events.send('airbridge.ecommerce.order.completed', {
    value: 13.95,
    semanticAttributes: {
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                quantity: 3,
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                quantity: 2,
                position: 2
            }
        ],
        inAppPurchased: true,
        currency: 'USD',
        transactionID: '16874326'
    }
})

Verify event transmission

Follow the steps below to verify that the event data you want to collect is sent to Airbridge as intended.

Send an event using the SDK.
Navigate to [Raw Data]>[Web Real-time Logs] in the Airbridge dashboard and find the event you've sent.

Web-to -App

Add an app download button

Use the ID of your button tags written in HTML for app download and track performance.

12345678910111213141516171819
// html
<button id="app_download">Go to app</button>

// javascript
airbridge.setDownloads({
    buttonID: "app_download",
    // or ["app_download_1", "app_download_2", ...]
    defaultParams: {
        campaign: 'example_campaign',
        medium: 'example_medium',
        term: 'example_term',
        content: 'example_content'
    },
    ctaParams: {
        cta_param_1: '1',
        cta_param_2: '2',
        cta_param_3: '3',
    }
});

Required

buttonID: The ID of the button tag. It can be an array made of IDs.

Optional

defaultParams: Campaign parameters
ctaParams: CTA Campaign parameters

defaultParams will be sent when the button is clicked.

Attention
User redirection is performed by the SDK. Therefore, <a> tags or the onclick function should not be used.

Add an "Open in app" button

Use the ID of your button tags written in HTML to embed deep links and track performance. Set up the deep link as shown below.

123456789101112131415161718192021222324252627282930313233
airbridge.setDeeplinks({
    buttonID: 'deeplinking-button-1',
    // or ['deeplink-button-1', 'deeplink-button-2', ...]
    deeplinks: {
        // Please use the custom scheme URL like `<YOUR_SCHEME>://...`
        // Don't use the `intent://...`, `market://...` or `https://...`
        ios: '<YOUR_SCHEME>://detail?id=1',
        // Please use the custom scheme URL like `<YOUR_SCHEME>://...`
        // Don't use the `intent://...`, `market://...` or `https://...`
        android: '<YOUR_SCHEME>://detail?id=1',
        desktop: 'https://www.example.com/detail?id=1'
    },
    fallbacks: {
        // 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',
        // 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'
    },
    defaultParams: {
        campaign: 'example_campaign',
        medium: 'example_medium',
        term: 'example_term',
        content: 'example_content'
    },
    ctaParams: {
        cta_param_1: '1',
        cta_param_2: '2',
        cta_param_3: '3',
    },
    desktopPopUp: true
});

Required

deeplinks.ios: Enter the deep link that opens when the button is clicked on an iOS device where the app is installed. Only deep links using schemes are allowed.
deeplinks.android: Enter the deep link that opens when the button is clicked on an Android device where the app is installed. Only deep links using schemes are allowed.
deeplinks.desktop: Enter the deep link that opens when the button is clicked on a desktop.
fallbacks.ios: Enter the fallback destination for users on an iOS device with no app installed.
fallbacks.android: Enter the fallback destination for users on an Android device with no app installed.
- itunes-appstore: The App Store page of the app
- google-play: The Google PlayStore page of the app
- url: A http/https scheme URL
buttonID: The ID of the button tag where you want to add the deep link.

Optional

defaultParams: Campaign parameters
ctaParams: CTA Campaign parameters
desktopPopUp: If set to true, the deep link will open in a new window on the desktop browser.

Attention
User redirection is performed by the SDK. Therefore, <a> tags or the onclick function should not be used.

Attention
The deep links you enter for deeplinks.android and deeplinks.ios must use the URL scheme that is set on the [Tracking Link]>[Deep Links] page in the Airbridge dashboard.
e.g. <YOUR_SCHEME>://...
DON'T use deep links in the following format.
intent://...
market://...
https://www.example.com

Add a bridge page

When calling the setDeeplinks function, add the optionredirect: true to perform deep linking for all requests accessing the webpage.

Using this feature, you can add a bridge page that is displayed when transitioning from web to app.

123456789101112131415
airbridge.setDeeplinks({
    buttonID: "deeplinking-button-1",
    deeplinks: {
        ios: "example://detail?id=1",
        android: "example://detail?id=1",
        desktop: "https://example.com/detail?id=1"
    },
    fallbacks: {
        // itunes-appstore(default), google-play, url
        ios: "itunes-appstore",
        // google-play(default), itunes-appstore, url
        android: "google-play"
    },
    redirect: true
});

redirect: If set to true, deep linking is performed for all requests accessing the webpage.

Open app via function call

The app can be opened by calling the openDeeplink function.

123456789101112
airbridge.openDeeplink({
    type: "redirect",
    deeplinks: {
        ios: "example://detail?id=1",
        android: "example://detail?id=1",
        desktop: "https://example.com/detail?id=1"
    },
    fallbacks: {
        ios: "itunes-appstore",
        android: "google-play"
    },
});

When calling the function within another function that is triggered by user actions, such as onclick, use type: "click". For cases where the app is opened directly without user actions, use type: "redirect".

You can use a web-to-app banner to encourage web users to install the app.

Code Examples

You can set the title, description, button text and color, and the behavior of the banner by configuring options.

Move to web

1234567891011
airbridge.openBanner({
    title: 'AB180 블로그',
    description: '최신 마테크 정보를 실시간으로 받아볼 수 있습니다.',
    buttonText: '설치',
    color: '#0a69ff',
    position: 'top',
    destination: {
        type: 'web',
        url: 'https://blog.ab180.co'
    }
})

Move to App Store

123456789101112131415161718192021
airbridge.openBanner({
    title: 'AB180 블로그',
    description: '최신 마테크 정보를 실시간으로 받아볼 수 있습니다.',
    buttonText: '설치',
    color: '#0a69ff',
    position: 'top',
    destination: {
        type: 'download',
        defaultParams: {
            campaign: 'example_campaign',
            medium: 'example_medium',
            term: 'example_term',
            content: 'example_content'
        },
        ctaParams: {
            cta_param_1: '1',
            cta_param_2: '2',
            cta_param_3: '3',
        }
    }
})

Open deep link

123456789101112131415161718192021222324252627282930
airbridge.openBanner({
    title: 'AB180 블로그',
    description: '최신 마테크 정보를 실시간으로 받아볼 수 있습니다.',
    buttonText: '설치',
    color: '#0a69ff',
    position: 'top',
    destination: {
        type: 'deeplink',
        deeplinks: {
            ios: '<YOUR_SCHEME>://...',
            android: '<YOUR_SCHEME>://...',
            desktop: 'https://www.example.com/'
        },
        fallbacks: {
            ios: 'itunes-appstore',
            android: 'google-play'
        },
        defaultParams: {
            campaign: 'example_campaign',
            medium: 'example_medium',
            term: 'example_term',
            content: 'example_content'
        },
        ctaParams: {
            cta_param_1: '1',
            cta_param_2: '2',
            cta_param_3: '3',
        }
    }
})

Option description - Applies to all

Name	Description	Required	Default
`title`	Banner title	O
`description`	Banner description	O
`buttonText`	The button text on the banner	O
`color`	The button color	X	`#0082FF`
`position`	The location of the banner. - Select '`top`' to place the banner at the top of the screen. - Select '`bottom`' to place the banner at the bottom of the screen.	X	`top`
`destination`	The behavior of the button on the banner. The behavior varies depending on the `type`.	O
`styles`	Custom style to set on the banner.	X

Option description - `destination` (Move to web)

Name	Description	Required
`destination.type`	Fixed to `web`.	O
`destination.url`	Enter the URL to redirect the user.	O

Option description - `destination` (Move to App Store)

Name	Description	Required
`destination.type`	Fixed to `download`.	O
`destination.defaultParams`	Campaign parameters	X
`destination.ctaParams`	CTA Campaign parameters	X

Option Description - `destination` (Open deep link)

Name	Description	Required
`destination.type`	Fixed to `deeplink`.	O
`destination.deeplinks`	Deep link settings. Refer to this section.	X
`destination.fallbacks`	Deep link fallback setting. Refer to this section.	X
`destination.defaultParams`	Campaign parameters	X
`destination.ctaParams`	CTA Campaign parameters	X

Airbridge provides the following features regarding web-to-app banners.

You can add a styles field to the option to specify custom styles. The Key is specified in CSS Selector form, and the Value is specified in CSSStyleDeclaration (TypeScript) form.

Please refer to the example below. We are changing the border-radius style of the icon area.

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

We provide the id you can use to specify CSS styles. You can specify it in CSS Selector form, like #airbridge-banner-icon.

ID	Description
`airbridge-banner`	Entire banner area
`airbridge-banner-icon`	Banner icon
`airbridge-banner-title`	Banner title
`airbridge-banner-description`	Banner description
`airbridge-banner-open`	App download button
`airbridge-banner-close`	Banner close button

You can migrate the existing setBanner function to the openBanner function. Please refer to the options for each function below.

`setBanner` options	`openBanner` options	Notes
`title`	`title`
`description`	`description`
N/A	`buttonText`	This is a new option. The existing option is "`Install`" or "`설치`"
`keyColor`	`color`
N/A	`styles`	This is a new option.
N/A	`destination`	This is a new option. The existing option is moving to the store.

Please refer to the example code.

123456
airbridge.setBanner({
    title: 'AirStyle',
    description: 'Find your perfect style!!',
    keyColor: '#00a0c6',
    position: 1
})

12345678910
airbridge.openBanner({
    title: 'AirStyle',
    description: 'Find your perfect style!!',
    buttonText: navigator.language === 'ko-KR' ? '설치' : 'Install',
    color: '#00a0c6',
    position: 'top',
    destination: {
        type: 'download'
    }
})

Advanced Settings

Set up campaign parameters

You can add parameters to your ad's landing website URL to track traffic sources. Automatic and manual parsing is supported.

Automatic parsing - utmParsing

When the airbridge.init function is called with the utmParsing: true option, the UTM values are automatically stored as Airbridge campaign parameters and can be viewed in the Airbridge reports.

URL Parameter	Airbridge Campaign Parameter
utm_source	Channel (`channel`)
utm_campaign	Campaign (`campaign`)
utm_medium	Sub Publisher (`sub_id`)
utm_term	Term (`term`)
utm_content	Content (`content`)

The utm_source parameter is mandatory. If the utm_source parameter is absent, other utm parameters won't be parsed.

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

The URL is the window.location.href value.

Automatic parsing - utmParameterValueReplaceMap

By using utmParameterValueReplaceMap, the UTM parameter values can be mapped to a desired value. This allows you to set UTM parameter values collected through various methods to the same value for a consistent and clear report view in Airbridge. The parameters supported by utmParameterValueReplaceMap are utm_source, utm_campaign, utm_medium, utm_term, and utm_content.

For example, when using utm_source=blog, the source variable, the channel (the name of the traffic source) is collected as "blog" in Airbridge. By using utmParameterValueReplaceMap as shown below, the channel name will be collected as my_blog.

1234567891011
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    utmParsing: true,
    utmParameterValueReplaceMap: {
        utm_source: {
            blog: 'my_blog',
        },
    },
})

Automatic parsing - urlQueryMapping

By using urlQueryMapping, you can custom map other parameters to Airbridge campaign parameters to view the data in Airbridge reports. When calling the airbridge.init function, add urlQueryMapping and input key (Airbridge parameter) : value (Non-Airbridge parameter) pairs. The table below lists the Airbridge parameters that can be used as keys.

Parameter Name	Description
channel	Channel
campaign	Campaign
ad_group	Advertising group
ad_creative	Advertising creative
content	Content
term	Keyword
sub_id	Sub publisher
sub_id_1	Sub sub publisher 1
sub_id_2	Sub sub publisher 2
sub_id_3	Sub sub publisher 3
campaign_id	Campaign ID
ad_group_id	Advertising group ID
ad_creative_id	Advertising creative ID
term_id	Keyword ID

Let's say the landing page of your ad looks like the following.

https://mybrand.com/?utm_source=google&utm_campaign=jan_ua_campaign&internal_code=ABC

The parameter values can be mapped to Airbridge parameters using urlQueryMapping so that the data can be viewed in the Airbridge reports, as shown in the example below.

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

For example, if a conversion happens, the internal_code parameter value will be available in the Airbridge report by setting the GRoupBy as "Sub Sub Publisher 1."

Attention
When using URLQueryMapping, the channel value must be configured. If not, URLQueryMapping won't work as intended.

Manual parsing

Below is an example of how you can manually parse parameters.

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

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

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

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

Name	Description
defaultChannel	Ad channel name
defaultParams.campaign	Campaign mae
defaultParams.medium	Ad type
defaultParams.content	Ad content
defaultParams.term	The keyword term the website visitor came from

Clear user data

Use the clearUser function to delete the User ID, email, phone, alias, and other user attributes.

1
airbridge.clearUser()

Encrypt user data

The user.externalUserEmail and user.externalUserPhone data is hashed (SHA256) at the Client Level before transmission. The user.externalUserID is not subject to the hash option, so if hashing is required, you need to hash it and input the value manually.

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

Ensure event transmission

A user may be redirected before the event data is fully transmitted. Such scenarios can involve situations where event data is sent from an intermediate page. In these cases, the event data might be lost. To avoid this, you can use events.wait to ensure that all event data is transmitted before redirecting the user.

Parameter	Type	Description
timeout	Number	Maximum wait time (milliseconds)
callback	(error: string) => void	Callback for when the event is sent

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

airbridge.events.send('category')

airbridge.events.wait(3000, function (error) {
    location.href = 'url'
})

Adjust the attribution window

Configure cookieWindow to adjust the attribution window.

123456789101112131415
// Set attribution window to 1 day
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    cookieWindow: 1,
})

// Set attribution window to 720 minutes (12 hours)
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    cookieWindowInMinutes: 720,
})

If both cookieWindow and cookieWindowInMinutes are set, cookieWindowInMinutes takes precedence.

Browser cookies are used for user tracking, and they are shared across subdomains.
If you want to stop sharing cookies with subdomains, set the shareCookieSubdomain to false.

The default value of shareCookieSubdomain is true.

If you are running 1 service using several subdomains, true is recommended.
If you are running several services using several subdomains, false is recommended.

Use case

Let's say a user clicks on the Campaign A Tracking Link and is redirected to https://mybrand.com and then to https://shop.mybrand.com.

If shareCookieSubdomain: true
- Event on https://mybrand.com is attributed to Campaign A
- Event on https://shop.mybrand.com is also attributed to Campaign A
If shareCookieSubdomain: false
- Event on https://mybrand.com is attributed to Campaign A
- Event on https://shop.mybrand.com is attributed to the default setup value

You can collect the cookie IDs from Moloco campaigns through the SDK and send it through web postbacks for campaign optimization. Set the collectMolocoCookieID of the init function to true.

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

Set up SDK opt-in

Attention
Optional setting. Configure only if necessary.

The opt-in policy requires user consent before using user data.

After setting the autoStartTrackingEnabled function to false, call the startTracking function at the point of time when you can collect events. The SDK will start collecting events when the startTracking function is called.

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

airbridge.startTracking()

The default value of autoStartTrackingEnabled is true.

Set up SDK opt-out

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 function to true, call the stopTracking function at the point of time when you can no longer collect events. When the stopTracking function is called, the SDK will stop collecting events.

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

airbridge.stopTracking()

Set up Protected Attribution Window

Attention
If you want to include a custom channel tracking link to a CTA button, you cannot use the setDeeplinks function. Conversely, if you use the setDeeplinks function to create a CTA button, you cannot embed a custom channel tracking link to it.

If you are using the setDeeplinks function to implement web-to-app tracking via CTA buttons like "Open in app" buttons, you can configure the attribution window as the Protected Attribution Window (PAW). The PAW is the timeframe in which the touchpoints collected by the Airbridge Web SDK are excluded from the attribution starting from the website launch. To learn more about the attribution process with different PAW configurations, refer to this article.

The default PAW is 30 minutes. If you want to adjust it, set the useProtectedAttributionWindow in the airbridge.init() to true and input the value you want in minutes. The useProtectedAttributionWindow can be set to a maximum of 4320 minutes (3 days).

If you don’t want to use the PAW, set the useProtectedAttributionWindow to false.

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

Add a CTA parameter

You can add a parameter to the touchpoints attributed with PAW to track the CTA button performance.

When configuring the airbridge.setDeeplinks for the "Open in app" button, add ctaParams.

`#{"style": { "minWidth":"240px" }}` User Action	`#{"style": { "minWidth":"160px" }}` Attributed to (Default)	Attributed to (With PAW)	Attributed Parameter (With PAW)
1. Ad click	`naver.searchad`	`naver.searchad`	`{ keyword: 'app' }`
2. Web Open	`naver.searchad`	`naver.searchad`	`{ keyword: 'app' }`
3. Click "Open in app" button (Using `airbridge.setDeeplinks`)	`airbridge.websdk`	`airbridge.websdk`	`{ cta_param_1: 'page1' }`
4. App Deeplink Open	`airbridge.websdk`	`naver.searchad`	`{ keyword: 'app', cta_param_1: 'page1' }`

Only the following keys are allowed as ctaParams.

cta_param_1
cta_param_2
cta_param_3

Track user journeys to another website

Use sendWeb when the user is moving to another website. If the user moves to a website that has the Airbridge Web SDK installed, the user journey won't be interrupted for attribution in Airbridge.

useProtectedAttributionWindow must be set as true when initializing the Airbridge SDK to connect the attributions. To learn more, refer to this section.

1234567
// Open in same window
airbridge.sendWeb("https://www.airbridge.io/blog")

// Open in new window
airbridge.sendWeb("https://www.airbridge.io/blog", function(err, res) {
  window.open(res.targetUrl)
})

Install the SDK using the Google Tag Manager

The Airbridge SDK can be installed using the Google Tag Manager.

Install the SDK

Click New Tag in "Workspace Overview," or select [Tag]> [New] in the container.
Select Custom HTML at [Tag Configuration]>[Custom Settings].
Insert the Airbridge SDK code in the "HTML" section as shown in the image below.
Go to [Tag Configuration]> [Advanced Settings]>[Tag firing priority] and enter a number greater than 0 (e.g., 9999).
Select Once per page at [Tag Configuration]>[Advanced Settings]>[Tag firing options].
Set "Trigger" to "Pageview - DOM Ready".
Complete the tag creation and click Submit.
Navigate to [Raw Data]>[Web Real-time Log] in the Airbridge dashboard and verify that the SDK logs are logged correctly.

Set up event tracking

Click New Tag in "Workspace Overview," or select [Tag]> [New] in the container.
Select Custom HTML at [Tag Configuration]>[Custom Settings].
Insert the code for the events you want to track in the "HTML" section, as shown in the image below.
Depending on the event, select Unlimited, Once per event, or Once per page at [Tag Configuration]>[Advanced Settings]>[Tag firing options].
Set the appropriate trigger for the event.
Complete the tag creation and click Submit.
Navigate to [Raw Data]>[Web Real-time Log] in the Airbridge dashboard and verify that the SDK logs are logged correctly.

Separate app data storage for Web SDK

The Airbridge Web SDK is designed to store attribution data for only one app per domain. By using useStoragePerApp, you can separate the data storage to view attribution data per app of you have multiple apps on subdomains that share the same root domain.

For example, if you have multiple apps on subdomains, such as a.example.com and b.example.com, that share the root domain example.com, you can separate the data storage using useStoragePerApp.

123456789101112131415
// 서브 도메인 #1: a.example.com
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    useStoragePerApp: true,
})

// 서브 도메인 #2: b.example.com
airbridge.init({
    app: 'YOUR_ANOTHER_APP_NAME',
    webToken: 'YOUR_ANOTHER_WEB_TOKEN',
    // ...
    useStoragePerApp: true,
})

The default value of useStoragePerApp is false.

Attention
When you change the useStoragePerApp option, the first event in each browser the user uses immediately after the change can be processed as an unattributed event.

Was this helpful?

Any questions or suggestions?

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

Install SDK

Install package

1. Install the SDK manually

Protected Attribution Window setup

2. Install the SDK using a package manager

3. Install the SDK using the Google Tag Manager

Supported browsers

Verify the installation

User Data

Send user data upon initialization

Set up User IDs

Send additional user information

Verify the setup

Device Data

Set up device alias

Attention

Events

Event parameters

Send Standard Events

View Home Screen

Sign-up

Sign-in

Sign-out

View Product List

View Product Details

View Search Results

Add To Cart

Order Complete

Verify event transmission

Web-to -App

Add an app download button

Attention

Add an "Open in app" button

Attention

Attention

Add a bridge page

Open app via function call

Web-to-app banner

Code Examples

Move to web

Move to App Store

Open deep link

Option description - Applies to all

Option description - destination (Move to web)

Option description - destination (Move to App Store)

Option Description - destination (Open deep link)

Custom Style Option

Migration Guide

Advanced Settings

Set up campaign parameters

Automatic parsing - utmParsing

Automatic parsing - utmParameterValueReplaceMap

Automatic parsing - urlQueryMapping

Attention

Manual parsing

Clear user data

Encrypt user data

Ensure event transmission

Adjust the attribution window

Sharing cookies with subdomains

Use case

Collecting Moloco Cookie IDs

Set up SDK opt-in

Attention

Set up SDK opt-out

Attention

Set up Protected Attribution Window

Attention

Add a CTA parameter

Track user journeys to another website

Install the SDK using the Google Tag Manager

Install the SDK

Set up event tracking

Separate app data storage for Web SDK

Attention

Web SDK

Verify the installation

Option description - `destination` (Move to web)

Option description - `destination` (Move to App Store)

Option Description - `destination` (Open deep link)