Web SDK

    Install SDK

    Install the Airbridge Web SDK using one of the methods below.

    Supported browser

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

    Browser

    Supported

    Chrome

    ✔️

    Firefox

    ✔️

    Safari

    ✔️

    Internet Explorer

    IE 9 +

    SDK initialization

    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.

    Opt-in setup

    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.

    1. Prevent automatic event tracking after initialization through the autoStartTrackingEnabled.

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

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

      1
      airbridge.startTracking()

    Opt-out setup

    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.

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

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

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

      1
      airbridge.stopTracking()

    Web Event

    The Airbridge Web SDK collects user actions from the app as per settings and sends them as in-app events.

    Send web events

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

    Use the airbridge.events.send function to send events.
    Refer to the example below.

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

    Option

    Required or Optional

    Type

    Description

    category

    Required

    string

    Name of the event

    action

    Optional

    string

    Subcategory of the event

    label

    Optional

    string

    Subcategory of the event

    value

    Optional

    number

    Subcategory of the event

    semanticAttributes

    Optional

    object

    Semantic attributed of the event

    customAttributes

    Optional

    object

    Custom attribute of the event

    Refer to the component definition and available strings below.

    Additional web event settings

    Attention

    Optional setting. Configure only if necessary.

    Configure additional settings for sending web events if necessary.

    Example codes

    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.

    Custom Events are events defined by Airbridge users to track user actions that are unique to their services.
    Refer to the example code below.

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

    User Data

    Set up User ID

    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

    airbridge.setUserID

    Inputs user ID.

    airbridge.clearUserID

    Deletes user ID.

    airbridge.setUserAlias

    Inputs additional user identifier.

    airbridge.removeUserAlias

    Deletes specified user identifier from the list of additional user identifiers.

    Airbridge.clearUserAlias

    Deletes all additional user identifiers.

    Refer to the example below.

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

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

    Set up user properties

    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

    airbridge.setUserEmail

    Inputs user’s email address that is hashed using SHA-256.

    airbridge.clearUserEmail

    Deletes user email.

    airbridge.setUserPhone

    Inputs user’s phone number that is hashed using SHA-256.

    airbridge.clearUserPhone

    Deletes user’s phone number.

    airbridge.setUserAttribute

    Inputs additional user property.

    airbridge.removeUserAttribute

    Deletes specified user property from the list of additional user properties.

    airbridge.clearUserAttributes

    Deletes all additional user properties.

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

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

    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.

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

    Clear user data

    Use the clearUser function to clear user data.

    1
    airbridge.clearUser()

    Web-to-App Setup

    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.

    Create smart app banners

    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

    title

    Required

    string

    Banner name

    description

    Required

    string

    Banner description

    buttonText

    Required

    string

    The text to be displayed on the app download button in the banner

    color

    Optional

    string

    The color to be applied to the app download button in the banner. It can be set using a CSS color format.

    position

    Optional

    'top' | 'bottom'

    Specifies the position of the banner.
    -

    top

    : The banner will appear at the top of the screen
    -

    bottom

    : The banner will appear at the bottom of the screen

    destination

    Required

    object

    Specifies how the app download button in the banner behaves.
    The behavior varies depending on the selected

    type

    .

    styles

    Optional

    object

    Custom styles to be applied to the banner

    Web-to-App setup

    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

    destination.type

    Required

    'deeplink'

    Cannot be changed from

    deeplink

    destination.deeplinks

    Optional

    object

    Deep link setting. For more details, refer to this article.

    destination.fallbacks

    Optional

    object

    Deep link fallback setting. For more details, refer to this article.

    destination.defaultParams

    Optional

    object

    Campagin parameter

    destination.ctaParams

    Optional

    object

    CTA camapgin parameter

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

    Web-to-Store setup

    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

    destination.type

    Required

    'download'

    Cannot be changed from

    download

    destination.defaultParams

    Optional

    object

    Campaign parameter

    destination.ctaParams

    Optional

    object

    CTA campaign parameter

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

    Web-to-Web setup

    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

    destination.type

    Required

    'web'

    Cannot be changed from

    web

    destination.url

    Required

    string

    Input the URL to redirect the user

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

    Custom style setup

    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.

    12345678
    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

    airbridge-banner

    Entire banner area

    airbridge-banner-icon

    Banner icon

    airbridge-banner-title

    Banner title

    airbridge-banner-description

    Banner description

    airbridge-banner-open

    App dowload cTA button

    airbridge-banner-close

    Banner close button

    Implement a custom banner

    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.

    Web-to-App setup

    You can use the openDeeplink function to open the app via a deep link.

    Option

    Required or Optional

    Type

    Description

    deeplinks.android

    Required

    string

    The scheme URL of the app to be launched via deep link on Android.

    deeplinks.ios

    Required

    string

    The scheme URL of the app to be launched via deep link on iOS.

    deeplinks.desktop

    Required

    string

    The URL of the website to redirect users to on desktop.

    fallbacks.android

    Required

    'google-play' | string

    The URL to redirect users to when the deep link fails on an Android device where the app is not installed.
    - google-play: Redirects to the app's Google Play Store page as registered in the Airbridge dashboard.
    - URL: Redirects to the specified website URL.

    fallbacks.ios

    Required

    'itunes-appstore' | string

    The URL to redirect users to when the deep link fails on an iOS device where the app is not installed.
    - itune-appstore: Redirects to the app's App Store page as registered in the Airbridge dashboard.
    - URL: Redirects to the specified website URL.

    type

    Required

    'redirect' | 'click'

    Select one of the following options depending on the user's interaction. - redirect: Use when there is no user interaction.
    - click: Use when user interaction is guaranteed (e.g., button click).

    defaultParams

    Required

    object

    Campaign parameter

    ctaParams

    Required

    object

    CTA campaign parameter

    Refer to the example below.

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

    Attention

    Make sure to use the deep link scheme URLs configured in the Airbridge dashboard for both deeplinks.android and deeplinks.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.

    123456
    <button id="<BUTTON_ID>">앱으로 보기</button>
<script>
    document.querySelector('#<BUTTON_ID>').addEventListener('click', () => {
        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.

    Web-to-Store setup

    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

    fallbacks.android

    Required

    'google-play'

    The destination to redirect users to on an Android device. Cannot be changed from google-play.
    - google-play: Redirects to the app's Google Play Store page as registered in the Airbridge dashboard.

    fallbacks.ios

    Required

    'itunes-appstore'

    The destination to redirect users to on an iOS device. Cannot be changed from itune-appstore.
    - itune-appstore: Redirects to the app's App Store page as registered in the Airbridge dashboard.

    defaultParams

    Optional

    object

    Campaign parameter

    ctaParams

    Optional

    object

    CTA campaign parameter

    Refer to the example below.

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

    Refer to the examples for configuring buttons.

    123456
    <button id="<BUTTON_ID>">앱 다운로드하기</button>
<script>
    document.querySelector('#<BUTTON_ID>').addEventListener('click', () => {
        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.

    Web-to-Web setup

    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

    fallbacks.android

    Required

    string

    The URL to redirect users to on an Android device.
    - URL: Redirects to the specified website URL.

    fallbacks.ios

    Required

    string

    The destination to redirect users to on an iOS device.
    - URL: Redirects to the specified website URL.

    defaultParams

    Optional

    object

    Campaign parameter

    ctaParams

    Optional

    object

    CTA campaign parameter

    Refer to the example below.

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

    Refer to the examples for configuring buttons.

    123456
    <button id="<BUTTON_ID>">웹으로 이동하기</button>
<script>
    document.querySelector('#<BUTTON_ID>').addEventListener('click', () => {
        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 existing setDeeplinks, setDownloads, and sendWeb 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 the openDeeplink 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

    buttonID

    Required

    string | string[]

    The id attribute of the <button> tag to which you want to apply deep link functionality.
    You can pass multiple values as an array.

    deeplinks.android

    Required

    string

    The scheme URL of the app to be launched via deep link on Android.

    deeplinks.ios

    Required

    string

    The scheme URL of the app to be launched via deep link on iOS.

    deeplinks.desktop

    Required

    string

    The URL of the website to redirect to on desktop.

    fallbacks.android

    Required

    'google-play' | string

    The URL to redirect users to when the deep link fails on an Android device where the app is not installed.
    - google-play: Redirects to the app's Google Play Store page as registered in the Airbridge dashboard.
    - URL: Redirects to the specified website URL.

    fallbacks.ios

    Required

    'itunes-appstore' | string

    The URL to redirect users to when the deep link fails on an iOS device where the app is not installed.
    - itune-appstore: Redirects to the app's App Store page as registered in the Airbridge dashboard.
    - URL: Redirects to the specified website URL.

    desktopPopUp

    Optional

    boolean

    On desktop, the redirection will open in a new window.

    redirect

    Optional

    boolean

    Select one of the following options depending on the user's interaction. - true: Use when there is no user interaction.
    - false: Use when user interaction is guaranteed (e.g., button click).

    defaultParams

    Optional

    object

    Campaign parameter

    ctaParams

    Optional

    object

    CTA campaign parameter

    Refer to the example below.

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

    Attention

    When using the setDeeplinks function, the Web SDK manages the button behavior internally, so do not set an onclick function on the button. Also, do not use the id of an <a> tag as the target element.

    The openDeeplink function is a unified replacement for the existing setDeeplinks, setDownloads, and sendWeb 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 the openDeeplink 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

    buttonID

    Required

    string | string[]

    The id attribute of the <button> tag to which you want to apply deep link functionality.
    You can pass multiple values as an array.

    defaultParams

    Optional

    object

    Campaign parameter

    ctaParams

    Optional

    object

    CTA campaign parameter

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

    Attention

    When using the setDownloads function, the Web SDK manages the button behavior internally, so do not set an onclick function on the button. Also, do not use the id of an <a> tag as the target element.

    Pass attribution data to another website before redirecting

    Attention

    The openDeeplink function is a unified replacement for the existing setDeeplinks, setDownloads, and sendWeb 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 the openDeeplink 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.

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

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

    Additional settings

    Pass user data during initialization

    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.

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

    Option

    Type

    Description

    user.externalUserID

    string

    User ID

    user.externalUserEmail

    string

    User email

    user.externalUserPhone

    string

    User’s phone number

    user.attributes

    object

    User attribute (Custom Key Value Pair)

    user.alias

    Objobjectect

    User identifier

    Set up campaign parameters

    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.

    Set delay time to ensure event transmission

    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

    timeout

    number

    Maximum delay time (milliseconds)

    callback

    function

    Event sending complete callback

    12345
    airbridge.events.send('category')

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

    Edit the attribution window

    You can set the attribution window in days using the cookieWindow option.
    The default setting is 3 days.

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

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

    Set the attribution window for web-to-app attribution

    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.

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

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

    Share attribution data across subdomains

    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.

    1234567
    // 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.

    Separate storage by app

    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.

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

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

    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.

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

    Option

    Required or Optional

    Type

    Description

    channel

    Required

    string

    Advertising channel to use with the tracking link

    options

    Required

    string

    Option for creating tracking links

    onSuccess

    Required

    function

    Success callback

    onError

    Optional

    function

    Failure callback

    Tracking links created using the createTrackingLink function are passed via the onSuccess callback.

    1234
    interface TrackingLink {
    shortURL: string
    qrcodeURL: string
}

    이름

    타입

    설명

    shortURL

    string

    트래킹 링크의 단축 URL

    qrcodeURL

    string

    트래킹 링크의 QR Code URL

    When collectMolocoCookieID is set to true, the SDK automatically collects the cookie ID from events driven by Moloco web campaigns, enabling campaign optimization.

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

    Was this helpful?

    Any questions or suggestions?