• Developer Guide
  • SDK Integration
  • Web SDK

Web SDK

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.

  1. Set up User IDs.

  2. Send an event using the SDK.

  3. Navigate to [Raw Data]>[Web Real-time Logs] in the Airbridge dashboard and click the event you've sent.

  4. 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')

Sign-up

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

Sign-in

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.

  1. Send an event using the SDK.

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

If set, 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".

Web-to-app banner

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

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

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.

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.

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

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

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: true, // Default false
})

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.

Sharing cookies with subdomains

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

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

  1. Click New Tag in "Workspace Overview," or select [Tag]> [New] in the container.

  2. Select Custom HTML at [Tag Configuration]>[Custom Settings].

  3. Insert the Airbridge SDK code in the "HTML" section as shown in the image below.

  4. Go to [Tag Configuration]> [Advanced Settings]>[Tag firing priority] and enter a number greater than 0 (e.g., 9999).

  5. Select Once per page at [Tag Configuration]>[Advanced Settings]>[Tag firing options].

  6. Set "Trigger" to "Pageview - DOM Ready".

  7. Complete the tag creation and click Submit.

  8. Navigate to [Raw Data]>[Web Real-time Log] in the Airbridge dashboard and verify that the SDK logs are logged correctly.

Event Tracking

  1. Click New Tag in "Workspace Overview," or select [Tag]> [New] in the container.

  2. Select Custom HTML at [Tag Configuration]>[Custom Settings].

  3. Insert the code for the events you want to track in the "HTML" section, as shown in the image below.

  4. Depending on the event, select Unlimited, Once per event, or Once per page at [Tag Configuration]>[Advanced Settings]>[Tag firing options].

  5. Set the appropriate trigger for the event.

  6. Complete the tag creation and click Submit.

  7. 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 page helpful?

Have any questions or suggestions?