menu User Guide
User Guide for Developer chevron_right SDK Install Guide
WEB SDK
Airbridge WEB SDK tracks users’ conversion events and supports the function of converting website visitors to mobile app users.

Functions of WEB SDK

Airbridge WEB SDK takes a script format embedded on website. With this format, it can track website visitors’ web conversion events as well as app conversion performance for users landing on your website. Also, Airbridge WEB SDK supports deep linking to a specific page within app.

In particular, it can make a detailed performance analysis on Naver ads, since it can even measure app conversion performance of acquired users via Naver ads (Power Links).

Here are the specifications supported by Airbridge Web SDK.

  1. Measuring Mobile Conversion Performance through Website
  2. Measuring Conversion Performance within Website
  3. Measuring Movement from Website to Specific Pages within Mobile App (Deep Link)
  4. Providing Web-to-App Banners that Drives App Installs on your Website
  5. Install Link SMS Dispatch to Desktop Users, Measuring Dispatch Counts and Attribution Analysis of Install Link SMS
  6. Analysis of App Install Attribution for Website View Counts and Views (TBD)

To Install WEB SDK

Basically, after inserting the following script into a web page, you can use any of the functions below by calling the required method.

<!-- We recommend inserting following script by the end of body tag. -->
<script>
// load airbridge websdk script
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]||!a_[_b].queue){_g=i_.getElementsByTagName(r_)[0];a_[_b]={queue:[]};_d={};for(_i=0;_i<_r.length;_d={m:_d.m},_i++){_d.m=_r[_i],~_d.m.indexOf(".")&&(_e=_d.m.split(".")[0],a_[_b][_e]=a_[_b][_e]||{},a_[_b][_e][_d.m.split(".")[1]]=function(_d){return function(){a_[_b].queue.push([_d.m,arguments]);};}(_d)),a_[_b][_d.m]=function(_d){return function(){a_[_b].queue.push([_d.m,arguments]);};}(_d);}_d=i_.createElement(r_);_d.async=1;_d.src="http://static.airbridge.io/sdk/latest/airbridge.min.js";_g.parentNode.insertBefore(_d,_g);}})(window,document,"script","airbridge","init setBanner setDownload setDeeplink setDeeplinks sendSMS sendWeb setUserAgent setUserId setUserEmail setDeviceIFV setDeviceIFA setDeviceGAID events.send events.signIn events.signUp events.purchased events.addedToCart".split(" "));


// initialize
airbridge.init({
  app: 'app name',                       // Can be found from Dashboard > App Information.
  appToken: 'app token',                     // Can be found from Dashboard > App Information.
  defaultChannel: 'Channel Name to be checked from Dashboard',  // The default value is 'airbridge.websdk'.
  defaultParams: {
    campaign: 'Campaign Name to be checked from Dashboard',  // Optional
    medium: 'Medium Name to be checked from Dashboard',  // Optional
    content: 'Content Type to be checked from Dashboard',  // Optional
    term: 'Keyword to be  to be checked from Dashboard'  // Optional
    // Additional parameters can be added according to preference.
  }
});
</script>

To Integrate User Identity

Airbridge is a “People-based Analytics” service which integrates app, web, and offline ad performance analysis which stretches beyond the domain of mobile app.

To reach a purchase (conversion), a single user will go through multiple devices, platforms, and browsers, to ultimately reach to order placement based on compiled information through the process.

In this regard, data collected from a single device and/or single platform carries a limitation to perform a fragmented analysis. However, Airbridge’s People-Based analysis enables an integrated conversion analysis of the whole user because it bridges varying contact points across web, app, and offline platforms to a single user.

As one method to User Identity integration, Airbridge strongly recommends at least one of ‘UserID’ or ‘UserEmail’ to be configured during WEB SDK install, as details below.

Please visit Measuring Conversion Event within Website to find out how to ‘set up UserID’ and ‘set up UserEmail’.

To Set up UserID

airbridge.setUserId('UserID');

// ex)
airbridge.setUserId('airbridge123');

To Set up UserEmail

airbridge.setUserEmail('UserEmail');

// ex)
airbridge.setUserEmail('airbridge123@ab180.co');

WEB SDK Installs by User’s Needs

Measuring Mobile Conversion Event through Website

Measuring Mobile Conversion Event through Website via Download Button on your Website’

Airbridge WEB SDK can drive app installs from any button on mobile and/or desktop PC and measure mobile conversion events through websites. When you click the button set through Airbridge WEB SDK, you will move to Desktop, Android, and iOS as follows.

Platform with WEB SDK Installed When Clicked from Desktop When Clicked from Android When Clicked from iOS
Desktop PC Website Move to Google Play Store (web) - -
Mobile Website - Move to Google Play Store (app) Move to iTunes App Store (app)

In other words, when you click the banner installed on the mobile website, it automatically branches according to the platform. If an Android, it will move to Google Play Store, and If an iOS, it will move to iTunes App Store. However, on the desktop, you cannot install apps from iTunes App Store. Therefore, you will be moved to Google Play Store where you can automatically install apps as you sign in with Google ID. Installation tracking for Google Play Store is supported all across desktop PC websites, mobile websites, and mobile app versions.

By submitting ID value of the button in the airbridge.setDownload method, you can complete installation.

Please note that since AirBridge WEB SDK is responsible for sending users to Market, you should not use <a>tag to download buttons, which is directed to App Store.

// Tracking installs with preferred app install button (In this case, ID is set as 'app_download')
// For Dashboard statistics, the defaultChannel value set at airbridge.init is put to Channel, and the ID value of the download button is put to content.
<button id="app_download">move to app</button>


airbridge.setDownload({
  buttonId: "app_download"
}, function(err, res) {
  // callback function
});

If you prefer to immediately send users to market upon their website landing or to use custom channel or params, you can call the goDownload method.

airbridge.goDownload({
  channel: 'Channel Name to be checked from Dashboard'
  params: {
    campaign: 'Campaign Name to be checked from Dashboard',  // Optional
    medium: 'Medium Name to be checked from Dashboard',  //  Optional
    content: 'Content Type to be checked from Dashboard',  // Optional
    term: 'Keyword to be checked from Dashboard //  Optional
});

You can use the CallBack function to receive the error or response value directly. But when CallBack function is used, it does not enable an automatic redirect.

airbridge.goDownload({
  channel: 'Channel Name to be checked from Dashboard'
  params: {
    campaign: 'Campaign Name to be checked from Dashboard',       //     // Optional
    medium: 'Medium Name to be checked from Dashboard',       //   // Optional
    content: 'Content Type to be checked from Dashboard',            //   // Optional
    term: 'Keyword to be checked from Dashboard'            //   // Optional
}, function(err, res) {
    if (res != null) {
        window.open(res.targetUrl);
    }
});

Through Naver’s tracking feature, Airbridge WEB SDK can measure conversion events of acquired users via Naver ads, who landed on website through Naver search ads.

To measure events of acquired users to website through Naver search ads, firstly, you have to complete setting [# websdkmobiletracking_organic] (Measurement of mobile conversion event via download button on website Naver Ad, and then apply Tracking Feature (Tracking Site) to your Power Link campaign.

Please visit Naver Ad of Airbridge User Guide to find out how to apply Tracking Feature (Tracking Site).

For Naver search ads, with its Tracking Feature (Tracking Site) in use, the parameter "airbridge_sid" is added to the URL when the user enters web page after clicking on the ad. In WEB SDK, airbridge sid is applied first to defaultChannel and defaultParams.
Hence Naver search ads are applied to conversion performance, not the defaultChannel which was set during airbridge.init.

If acquired users land to websites with Airbridge WEB SDK installs through ads or external sites, or if the query parameter is followed by the website URL, you can parse query parameter of URL with the JavaScript code as below, and send information to defaultChannel and defaultParams while airbridge.init is executed. In other words,website inflows via paths and even mobile conversions can be measured.

When landed on to a website, there will be an attached query parameter as in the URL above. After inserting the source code that parses the query parameter before calling 'airbridge.init' as shown below, adding the airbridge.setDownload method, and putting the ID value of app download button to the buttonID, your setting will be completed.

Please note that since AirBridge WEB SDK is responsible for sending users to market, you should not use <a>tag to download buttons, which is directed to App Store.

// source code that parses query parameter. Insert before airbridge.init is called.
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: 'app name',                        
  appToken: 'app token',                  
  defaultChannel: params['utm_source']
  defaultParams: {
    campaign: params['utm_campaign'],
    medium: params['utm_medium'],
    term: params['utm_term']
  }
});

// To track installs with preferred app install button (In this case, ID is set as 'app_download')
<button id="app_download">move to app</button>

airbridge.setDownload({
  buttonId: "app_download"
}, function(err, res) {
  // callback function
});

Measuring Conversion Performance within Website

Through Airbridge WEB SDK, user’s conversion performance within website can be measured.

The commonly used “sign up”, “sign in”, “add to cart”, and “purchase” features are default in-app conversion events which will be offered with a separated method. Also, custom in-app events of your preference can be registered to measure performance.

All parameters to in-app event API are optional.

To Set up UserID

airbridge.setUserId('UserID');

// ex)
airbridge.setUserId('airbridge123');

To integrate User Identity, Airbridge strongly recommends setting up at least one of the two parameters between UserID and UserEmail.

To Set up UserEmail

airbridge.setUserEmail('UserEmail');

// ex)
airbridge.setUserEmail('airbridge123@ab180.co');

To integrate User Identity, Airbridge strongly recommends configuring at least one of the two parameters between UserID and UserEmail.

Sign up

airbridge.events.signUp({
    userId: 'UserID',
    userEmail: 'UserEmail',
    action: 'action name',
    label: 'event label',
});

// ex)
airbridge.events.signUp({ userId: 'ab180' });

To Sign in

airbridge.events.signIn({
    userId: 'UserID',
    userEmail: 'UserEmail',
    action: 'action name',
    label: 'event label',
});

// ex)
airbridge.events.signIn({ userId: 'ab180' });

To Sign out

airbridge.events.signOut({
});

// ie.
airbridge.events.signOut({ });

To View Homewview

airbridge.events.homeViewEvent({ });

To View Product Detail

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

To View Product List

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

To View Search Result

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: 'Search Query'

  });

To Add to Cart

airbridge.events.addToCart({
    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: 'CartID',
    totalValue: 15000,
    currency: 'KRW',
});

To Purchase

airbridge.events.purchase({
    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: 15000,
    currency: 'KRW',
    transactionId: 'transaction ID',
});

To Customize Events

airbridge.events.send("custom_category", {
    "label": "label",
    "action": "action",
    "value": 123.0,
    "customAttributes": {
        "custom1": 123,
        "custom2": 'abc',
    }
});

Airbridge WEB SDK supports deep linking, and it can be used for relay pages to send installed users from website to your app. Deep link execution statistics are fundamentally based on defaultChannel anddefaultParams that you configure from airbridge.init.

// html
<button id="deeplinking-button-1">move to app</button>

// js script
// insert after airbridge.init
airbridge.setDeeplinks({
  deeplinks: {
        ios: "ablog://contents?title=data-science-with-r-2-data-visualization",
        android: "ablog://contents?title=data-science-with-r-2-data-visualization",
        desktop: "http://blog.ab180.co/data-science-with-r-2-data-visualization"
    },
  fallbacks: {
    ios: "http://blog.ab180.co/data-science-with-r-2-data-visualization", // itunes-appstore(default), google-play, custom url
    android: "google-play" // google-play(default), itunes-appstore, custom url
  },
  redirect: true,
  buttonID: "deeplinking-button-1",
  desktopPopUp: true
});

The parameters used forairbridge.setDeeplinks are as below.

  • deeplinks: When the app is installed with required values, it specifies the iOS, Android, and Desktop user’s next location.
  • buttonID: Once button element’s ID is put, it moves to the app when you click the button. If you prefer an auto redirect using ‘redirect’ parameters below, you do not need to specify ‘buttonID’.
  • redirect: When set to true, it attempts to auto redirect when the WEB SDK script is loaded. The default value is false.
  • desktopPopUp: When set to true, the web page will appear in a new window for desktop users. The default value is false.
  • fallbacks: If the app is not installed, it specifies fallback for iOS (App Store) and Android (Play Store). You can specify itunes-appstore, google-play or a custom URL in http and/or https format.

Web-to-App Banner that Drives App Installs on Website

A Mobile User Clicks on Install Button

The Web-to-App banner is a website banner that sends web users to the mobile app. For desktop users, a download link can be sent via SMS. Also via the web to-app banner, changes to the title and description of the banner, color of the button, and more can be made(Please note that changing the settings of the banner on the Dashboard Web-to-App banner menu does not actually change the website Web-to-App banner settings.).

// a source code which sets default banner, deleting this code will mean no more display of default banner.
airbridge.setBanner({
   title: 'airstyle',
   description: 'authentic taste sniper - AirStyle will curate your style',
   keyColor: '#00a0c6',         // button color
   position: 1                  // if 1, go to top; if 2, go to bottom.
});

Install Link SMS distribution to Desktop Users, Measuring Dispatch Counts and Attribution Analysis of Install Link SMS

Airbridge supports SMS distribution, which is the most popular method, by replacing the app install button on desktop PCs. Instead of investing time and effort to build a SMS distribution feature, you can easily implement that feature with a single method call.

// To Distribute SMS through a Simple Method Call
airbridge.sendSMS({
  phoneNum: document.getElementById("phone-number").value,   // 010-0000-0000
  message: 'download ab180 blog app now!'
});

Analysis of App Install Attribution for Website Views Counts and Views(TBD)

If you have installed WEB SDK, website views can be counted without an additional setting. Not only that, even when users browse mobile websites and search app in the market to install them, analysis of app install attribution for website ‘views’ can be performed via fingerprint matching.

Search Results
keyboard_return Back