Browser Specific Support

These are the supported Browsers for Airbridge Web SDK integration.

ChromeFirefoxSafariInternet Explorer
✔️✔️✔️IE 9 and above

Install

Select one of the two options below and install airbridge.

Install with load function (Option 1)

Input the following script codes at the end of the head tag.

<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]){var d={queue:[]};_r.concat(_i).forEach(function(a){var i_=a.split("."),a_=i_.pop();i_.reduce(function(a,i_){return a[i_]=a[i_]||{}},d)[a_]=function(){d.queue.push([a,arguments])}});a_[_b]=d;a_=i_.getElementsByTagName(r_)[0];i_=i_.createElement(r_);i_.onerror=function(){d.queue.filter(function(a){return 0<=_i.indexOf(a[0])}).forEach(function(a){a=a[1];a=a[a.length-1];"function"===typeof a&&a("error occur when load airbridge")})};i_.async=1;i_.src="//static.airbridge.io/sdk/latest/airbridge.min.js";a_.parentNode.insertBefore(i_,a_)}})(window,document,"script","airbridge","init setBanner setDownload setDownloads setDeeplinks sendSMS sendWeb setUserAgent setUserAlias addUserAlias setMobileAppData setUserId setUserEmail setUserPhone setUserAttributes 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"]);

airbridge.init({
    app: 'App name',
    webToken: 'Web token'
});
</script>

Install with NPM module (Option 2)

Install NPM module by executing the command below.

npm install airbridge-web-sdk-loader

import airbridge and execute init method.

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

airbridge.init({
    app: 'App name',
    webToken: 'Web token',
})

"App name" can be found in "App Setting> App basics" on the dashboard.

"Web Token" can be found in "App Setting> Token Management" on the dashboard.

WEB SDK can also be configured with Google Tag Manager.

Google Tag Manager setting process

Install - Campaign Parameter Tracking

If your ad's landing page is on a website, you can add additional information to the website address through parameters to track the user journey activity events of the website based on that information.

Parameter analysis supports automatic and manual functions.

Automatic functions - utmParsing

When call init method with utmParsing: true option, UTM values of URL Paramter are set to values of Airbridge.

URL Parameter
utm_source utm_campaign utm_medium utm_term utm_content
Airbridge
channel campaign medium term content
airbridge.init({
    app: 'app name',
    webToken: 'web token',
    utmParsing: true
});

The URL is the window.location.href value.

Automatic functions - urlQueryMapping

When call init method with urlQueryMapping: {...} option, values of URL Paramter are set to values of Airbridge.

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
Example
airbridge.init({
    app: "...",
    webToken: "...",
    urlQueryMapping: {
      channel: '__channel',
      campaign: '__campaign',
      sub_id_1: '__code',
    },
});

When call init method like above code.

When user connect to website with ?__channel=test1&__campaign=test2&__code=test3 URL parameter, events are attributed to { channel: 'test1', campaign: 'test2', sub_id_1: 'test3' }

Manual functions

You can parse the parameters with the following code.

Extract information from the params object and register the information when calling the init function.

// 파라미터 파싱 함수
function queryStringToJSON(url) {
    if (url.search.slice !== undefined) {
        var pairs = url.search.slice(1).split('&');
    } else {
        var pairs = url.split('?')[1].split('&');
    }

    var result = {};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    });

    return JSON.parse(JSON.stringify(result));
}

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

// initialize
airbridge.init({
    app: '앱 이름',
    webToken: '웹 토큰',
    defaultChannel: params['utm_source'],
    defaultParams: {
        campaign: params['utm_campaign'],
        medium: params['utm_medium'],
        content: params['utm_content'],
        term: params['utm_term']
    }
});
  • defaultChannel : Name of the advertiser to be recorded in all events on the web page
  • defaultParams.campaign : The name of the ad to be recorded in all events occurring on the web page
  • defaultParams.medium : Advertising media to be recorded in all events occurring on web pages
  • defaultParams.content : The content of the ad to be recorded in all events occurring on the web page
  • defaultParams.term : The ad query that will be recorded for all events on the webpage.

Install - App Conversion

Add Download Button

You can insert an app download feature using the id value of the button tag.

// html
<button id="app_download_en">Move to app</button>

// javascript
airbridge.setDownload({
    buttonID: "app_download",
    // or ["app_download_1", "app_download_2", ...]
    defaultParams: {
        channel: 'example_channel',
        campaign: 'example_campaign',
        medium: 'example_medium',
        term: 'example_term',
        content: 'example_content',
    }
});

Required

  • buttonID : An array of id or id's of button tags to insert download functionality

Optional

  • defaultParams : Event parameter

When the button is clicked, send the event with defaultParams.

Caution : Do not use the <a> tag or onclick function, which is sent to the app store by the download button
because the SDK is responsible for sending the user to the app store.

Add DeepLink Button

You can insert the deep link function into a button by entering the id of the button tags created in html.

Please configure the deep link as shown below.

airbridge.setDeeplinks({
    buttonID: "deeplinking-button-1",
    // or ["deeplink-button-1", "deeplink-button-2", ...]
    deeplinks: {
        ios: "ablog://main",
        android: "ablog://main",
        desktop: "http://blog.ab180.co"
    },
    fallbacks: {
        ios: "itunes-appstore",
        // itunes-appstore(default), google-play, url
        android: "google-play"
        // google-play(default), itunes-appstore, url
    },
    defaultParams: {
        campaign: 'example_campaign',
        medium: 'example_medium',
        term: 'example_term',
        content: 'example_content'
    },
    desktopPopUp: true
});

Required

  • deeplinks.ios : This is the deeplink to run when the button is clicked on iOS. (Only Scheme Deeplink is allowed.)
  • deeplinks.android : This is the deep link to run when the button is clicked on Android. (Only Scheme Deeplink is allowed.)
  • deeplinks.desktop : This is the deep link to run when the button is clicked on Desktop.
  • fallbacks.ios : This is the URL to move when the deep link fails in iOS.
  • fallbacks.android : This is the URL to move when the deep link fails in Android.
    • itunes-appstore : App's Apple AppStore page
    • google-play : App's Android PlayStore page
    • url : http or https scheme's url
  • buttonID : An array of id or id's of button tags to insert download functionality

Optional

  • defaultParams : Campagin parameter.
  • desktopPopUp : If set to true, the desktop will work in a new window when you run the deep link.

Caution : Do not use the <a> tag or onclick function, which is sent to the app store by the download button because the SDK is responsible for sending the user to the app store.

Use setDeeplinks as a relay page for apps

You can implement the ability to navigate to the app via the relay page.

When calling the function 'setDeeplinks', if the option 'redirect: true' is set, the deep link function will be executed on all requests that access the webpage.

airbridge.setDeeplinks({
    buttonID: "deeplinking-button-1",
    deeplinks: {
        ios: "ablog://main",
        android: "ablog://main",
        desktop: "http://blog.ab180.co"
    },
    fallbacks: {
        ios: "itunes-appstore",
          // itunes-appstore(default), google-play, url
        android: "google-play"
        // google-play(default), itunes-appstore, url
    },
    redirect: true
});
  • redirect : If true, it executes a deep link function for all requests.

Verify Installation Completion

  1. Follow these steps to check if Move to Web page is installed properly with Web SDK (occurring web page view event).
  2. Head to Airbridge Dashboard → Select App → Click on the 'Realtime Log' item under 'Log Data'.
  3. Click on the 'Web SDK Log' entry
  4. Enter 'Web Cookie ID' in 'Web Cookie ID'.
  • Web Cookie ID Check: Go to the webpage where the Web SDK is installed
    → Output 'airbridge.client.clientId' from Chrome Developer Console
    → The output value is 'Web Cookie Id'.
  • If the 'Web Cookie Id' exposure is not confirmed, please check again if it was installed properly as instructed in the installation.

Event

You can measure various user journey events through the Web SDK.

There are 9 basic events related to users' information and e-commerce user journeys. Custom events can be additionally defined as well.

Additional information that is attached to all events can be optionally added.

You would be able to track and analyze more accurate statistics if you include more event information.

Event - user

User in-app events are a component of cross-platform user matching

Please include at least one user information if possible.

When a sign up and sign in event occurs, all events are recorded as being triggered from that user until a sign-out event occurs.

If a sign out event occurs, all events until the next sign-in event are recorded without that user-related data.

SignUp Event

Method

Name Field Type Description of Parameter
signUp 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

Code Example

// Change user information to input, and send signUp event.
airbridge.events.signUp({
    userID: 'ab180',
    userEmail: '[email protected]',
    userPhone: '000-0000-0000',
    attributes: {
        age: 50,
    },
    alias: {
        other_id: '123',
    },
});

// Change user information to { userID: 'ab180' }, and send signUp event.
airbridge.events.signUp({
    userID: 'ab180',
});

// Change user information to {}, and send signUp event.
// (Existing user information is removed.)
airbridge.events.signUp();

SignIn Event

Method

Name Field Type Description of Parameter
signIn 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

Code Example

// Change user information to input, and send signIn event.
airbridge.events.signIn({
    userID: 'ab180',
    userEmail: '[email protected]',
    userPhone: '000-0000-0000',
    attributes: {
        age: 50,
    },
    alias: {
        other_id: '123',
    },
});

// Change user information to { userID: 'ab180' }, and send signIn event.
airbridge.events.signIn({
    userID: 'ab180',
});

// Change user information to {}, and send signIn event.
// (Existing user information is removed.)
airbridge.events.signIn();

SignOut Event

Method

Name Field Type Description of Parameter
signOut - - -

Code Example

// Send signIn event, and change user information to {}
airbridge.events.signOut();

Event - commerce

Tracks the user's commerce-related behavior.

HomeView Event

Method

Name Field Type Description of Parameter
homeViewEvent - - -

Code Example

airbridge.events.homeViewEvent();

ProductDetailView Event

Method

productDetailsViewEvent

Name Type Field Type Description of Parameter
products Array<Object> - - 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

Code Example

airbridge.events.productDetailsViewEvent({
  products: [
        {
            productID: '1',
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
            position: 1
        }
    ]
});

ProductListView Event

Method

productListViewEvent

Field Type Detailed Parameter Field Name Type Description of Parameter
productListID string - - product list ID
products Array<Product> - - product 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

Code Example

airbridge.events.productListViewEvent({
    productListID: '36473926',
    products: [
        {
            productID: '1',
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
            position: 1
        },
        {
            productID: '2',
            name: 'MacBook Air',
            price: 1500000,
            currency: 'KRW',
            position: 2
        }
    ]
});

SearchResultView Event

Method

searchResultViewEvent

Field Type Detailed Parameter Field Name Type Description of Parameter
query string - - Search Query
products Array<Product> - - Product 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

Code Example

airbridge.events.searchResultViewEvent({
    products: [
        {
            productID: '1',
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
            position: 1
        },
        {
            productID: '2',
            name: 'MacBook Air',
            price: 1500000,
            currency: 'KRW',
            position: 2
        }
    ],
    query: '검색 Query'
});

AddedToCart Event

Method

addedToCart

Field Type Detailed Parameter Field Name Type Description of Parameter
cartID string - - Product Cart ID
totalValue number - - Product Total Value
currency string - - Product Currency
products Array<Product> - - Product 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

Code Example

airbridge.events.addedToCart({
    products: [
        {
            productID: '1',
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
            quantity: 3,
            position: 1
        },
        {
            productID: '2',
            name: 'MacBook Air',
            price: 1500000,
            currency: 'KRW',
            quantity: 2,
            position: 2
        }
    ],
    cartID: '73926365',
    totalValue: 3048200,
    currency: 'KRW'
});

Purchased Event

Method

purchased

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

Code Example

airbridge.events.purchased({
    products: [
        {
            productID: '1',
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
            quantity: 3,
            position: 1
        },
        {
            productID: '2',
            name: 'MacBook Air',
            price: 1500000,
            currency: 'KRW',
            quantity: 2,
            position: 2
        }
    ],
    inAppPurchased: true,
    totalValue: 3048200,
    currency: 'KRW',
    transactionID: '16874326'
});

Event - Custom

In-app events can be customly defined and used.

category parameter must be existed to send event.

Name Field Type Detailed Parameter Field Name Type Description of Parameter
send category string - - Event Name (required)
info Object - - Event Information
label string event subclass 1
action string event subclass 2
value number custom event value
customAttributes Object custom event information

Code Example

airbridge.events.send("category", {
    label: "label",
    action: "action",
    value: 123.0,
    customAttributes: {
        gender: 'male',
        brand: 'Nike'
    }
});

action, label, customAttributes fields also could be used in all standard events like Sign Up, Sign In, Added To Cart, Purchased.

Code Example

airbridge.events.purchased({
    products: [
        {
            name: 'MacBook Pro',
            price: 1548200,
            currency: 'KRW',
        }
    ],
    transactionID: '16874326',
    action: 'Electronic Devices',
    label: 'Apple'
});

airbridge.events.signIn({
    userID: '123',
    customAttributes: {
        gender: "male"
    },
});

Check Event classification below for how Category, Action, and Label are viewed within the dashboard.

Event classification

The Airbridge dashboard displays statistics by separating events according to Category, Action, and Label.

Category is a name that you choose as a way to group events that you want to analyze.
Action is used to define the subgroups for a particular event Category.
Label is used to further define the subgroups for a particular Action.

Code Example

for(var i=0; i<10; i++) {
    airbridge.events.send("custom_signup", {
        "label": "Seoul",
        "action": "30s"
    });
}

for(var i=0; i<20; i++) {
    airbridge.events.send("custom_signup", {
        "label": "Seoul",
        "action": "40s"
    });
}

for(var i=0; i<15; i++) {
    airbridge.events.send("custom_signup", {
        "label": "Busan",
        "action": "30s"
    });
}

for(var i=0; i<8; i++) {
    airbridge.events.send("custom_payments", {
        "label": "product A",
        "action": "option B"
    });
}

for(var i=0; i<7; i++) {
    airbridge.events.send("custom_payments", {
        "label": "product A",
        "action": "option C"
    });
}

for(var i=0; i<10; i++) {
    airbridge.events.send("subscribe", {
        "label": "normal"
    });
}

for(var i=0; i<5; i++) {
    airbridge.events.send("subscribe", {
        "label": "premium"
    });
}

You can view statistics for the count of each event based on Category in the Airbridge dashboard.
You can view statistics by separating the events in the same Category with the action and then separating the events through the label.

As a result, you can get the following results on the dashboard.

Category Action Label Count
Sign up Seoul 30s 10
Sign up Seoul 40s 20
Sign up Busan 30s 15
Purchase Product A Option B 8
Purchase Product A Option C 7
Subscription Normal 10
Subscription Premium 5

Advanced

Sending events using relay page

When sending events using relay page,
event.wait method can wait until all events are sent completely.

When redirect to other page before completely send event, event can be disappeared

Method

events.wait

Parameter Type Description
timeout number Max wait time
callback (error: string) => void All events are sent completely callback
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token'
});

airbridge.events.send('category');

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

Web to App Banner

The web to app banner is a banner that encourages web users to install apps.

Code Example

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

You can change the title and description of the banner, the color of the button, and so on.

For desktop users, the download link is sent through SMS via the web to app banner.

Configuring user information manually

In addition to triggering an event, you can configure user information manually.

If you configure it in the following way, all events will be recorded as being triggered by that user.

Code Example

airbridge.setUserId('test');
airbridge.setUserEmail('[email protected]');
airbridge.setUserAttributes({
    "age": 45,
    "gender": "male",
    "name": "Gildong Hong"
    // ...
});

Encrypt user information

Send all user information in hash (SHA256) format.

airbridge.init({
    app: 'app name',
    appToken: 'web token',
    ...
    userHash: true,
    ...
});

userHash option's default value is false.

init with user information

When init with user information, all events will be recorded as being triggered by that user.

airbridge.init({
    app: 'app name',
    webToken: 'web token',
    ...
    user: {
        externalUserID: '123',
        externalUserEmail: '[email protected]',
        externalUserPhone: '01012340000',
        attributes: {
            name: 'Gildong Hong',
            age_group: 30,
            gender: 'Female',
        },
        alias: {
            other_id: '12345',
        },
    },
    ...
});

Set default campaign parameter

When calling init function, set the option as defaultChannel or defaultParams to ensure that information that will be logged by default in all events.

Code Example

airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    defaultChannel: 'test site',
    defaultParams: {
        campaign: 'test event',
        medium: 'test company'
    }
});
  • defaultChannel : Name of the advertiser to be recorded in all events on the web page
  • defaultParams.campaign : The name of the ad to be recorded in all events occurring on the web page
  • defaultParams.medium : Advertising media to be recorded in all events occurring on web pages
  • defaultParams.content : The content of the ad to be recorded in all events occurring on the web page
  • defaultParams.term : The ad query that will be recorded for all events on the webpage.

Cookie Share Option

User tracking is done through browser cookies, which are shared between subdomains.

When call init method with shareCookieSubdomain: false option, stop sharing between subdomains.

// initialize 
airbridge.init({ 
    app: 'App Name',
    webToken: 'Web Token',
    shareCookieSubdomain: false
});

Default value of shareCookieSubdomain is true.

  • When operate one service in several subdomains, true is recommended.
  • When operate several services in several subdomains, false is recommended.

Example

Campaign A Tracking Link -> https://airbridge.io -> https://blog.airbridge.io,

  • shareCookieSubdomain: true
    • Event on https://airbridge.io -> Attributed to Campaign A
    • Event on https://blog.airbridge.io -> Attributed to Campaign A
  • shareCookieSubdomain: false
    • Event on https://airbridge.io -> Attributed to Campaign A
    • Event on http://blog.airbridge.io -> Attributed to Default campagin

Stop tracking

You can stop sending events from the SDK.

airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    isTrackingEnabled: false
});

false : Stop tracking
true : Tracking

Default value of isTrackingEnabled is true.

Using Google Tag Manager

SDK installation is available through Google Tag Manager.

For instructions on installation and event tracking, see Install, and Event Tracking

SDK Install

You can install the SDK using Google Tag Manager by following the steps below.

  1. Click on the new tag in 'Workspace Overview' or select Tag > New in the container.
  2. Click 'Tag Configuration' and select 'Custom HTML' from 'Custom Settings'.
  3. Complete the Install code in the 'HTML' section as shown in the picture below.
  4. Since the init function should be executed before the event function, select 'Tag firing priority' in 'Advanced Settings' of 'Tag Configuration' and enter a number greater than 0 (e.g. 9999).
  5. Select 'Once per page' by selecting 'Tag firing options' from 'Advanced Settings' from 'Tag Configuration'.
  6. Click 'Trigger' and select a trigger of type 'Pageview - DOM Ready'.
  7. Complete the tag creation and press the Submit button.
  8. Check the Airbridge dashboard under real-time logs to verify that WEB SDK logs are logged properly.

Event Tracking

Follow these steps to track events using Google Tag Manager.

  1. Click on the new tag in 'Workspace Overview' or select Tag > New in the container.
  2. Click 'Tag Configuration' and select 'Custom HTML' from 'Custom Settings'.
  3. Complete the Event code in the 'HTML' section as shown in the picture below.
  4. Set the appropriate trigger for the event.
  5. In 'Tag firing options' of 'Advanced settings', you can select 'Unlimited', 'Once per event', or 'Once per page' depending on the situation.
  6. Complete the tag creation and press the Submit button.
  7. Check the Airbridge dashboard under real-time logs to verify that WEB SDK logs are logged properly.

Updated 9 months ago

Web SDK


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.