WEB SDK

WEB SDK

Browser Specific Supportlink

These are the supported Browsers for Airbridge Web SDK integration.

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

Installlink

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

Codelink

<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={$jscomp$loop$prop$m$2:_d.$jscomp$loop$prop$m$2},_i++)_d.$jscomp$loop$prop$m$2=_r[_i],~_d.$jscomp$loop$prop$m$2.indexOf(".")&&(_e=_d.$jscomp$loop$prop$m$2.split(".")[0],a_[_b][_e]=a_[_b][_e]||{},a_[_b][_e][_d.$jscomp$loop$prop$m$2.split(".")[1]]=function(_d){return function(){a_[_b].queue.push([_d.$jscomp$loop$prop$m$2,arguments])}}(_d)),a_[_b][_d.$jscomp$loop$prop$m$2]=function(_d){return function(){a_[_b].queue.push([_d.$jscomp$loop$prop$m$2,arguments])}}(_d);_d=i_.createElement(r_);_d.async=1;_d.src="//static.airbridge.io/sdk/latest/airbridge.min.js";_g.parentNode.insertBefore(_d,_g)}})(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(" "));
airbridge.init({
app: 'App Name',
webToken: 'Web Token'
});
</script>

"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 Trackinglink

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 functionslink

When utmParsing option is provided, WEB SDK will parse utm_source, utm_campaign, utm_medium, utm_term, utm_content parameters of URL(window.location.href). These parameters will be mapped correspondingly into channel, campaign, medium, term, content.

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

The URL is the window.location.href value.

Manual functionslink

You can parse the parameters with the following code.

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

// Parameter parsing 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: 'App Name',
webToken: 'Web Token',
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 Conversionlink

Add Download Buttonlink

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.

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({
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
},
buttonID: "deeplinking-button-1",
// or ["deeplink-button-1", "deeplink-button-2", ...]
defaultParams: {
channel: 'example_channel',
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.
  • deeplinks.android : This is the deep link to run when the button is clicked on Android.
  • 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 : Event parameter
  • desktopPopUp : If set to true, the desktop will work in a new window when you run the deep link.

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.

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({
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 Completionlink

  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.

Eventlink

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 - userlink

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 Eventlink

Methodlink

NameFieldTypeDescription of Parameter
signUpuserIdstringUser's ID
userEmailstringUser's Email

Code Examplelink

// Send userId, userEmail information
airbridge.events.signUp({
userId: 'ab180',
userEmail: 'airbridge123@ab180.co'
});
// Send only userId information
airbridge.events.signUp({
userId: 'ab180'
});
// Send only signUp event
airbridge.events.signUp();

SignIn Eventlink

Methodlink

NameFieldTypeDescription of Parameter
signInuserIdstringUser's ID
userEmailstringUser's Email

Code Examplelink

// Send userId, userEmail information
airbridge.events.signIn({
userId: 'ab180',
userEmail: 'airbridge123@ab180.co'
});
// Send only userId information
airbridge.events.signIn({
userId: 'ab180'
});
// Send only signIn event
airbridge.events.signIn();

SignOut Eventlink

Methodlink

NameFieldTypeDescription of Parameter
signOut - - -

Code Examplelink

airbridge.events.signOut();

Event - commercelink

Tracks the user's commerce-related behavior.

HomeView Eventlink

Methodlink

NameFieldTypeDescription of Parameter
homeViewEvent - - -

Code Examplelink

airbridge.events.homeViewEvent();

ProductDetailView Eventlink

Methodlink

productDetailsViewEvent

NameTypeFieldTypeDescription of Parameter
productsArray<Object> - - Product object array
productIDstring product ID
namestring product name
pricenumber product price
currencystring product currency
positionnumberproduct position

Code Examplelink

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

ProductListView Eventlink

Methodlink

productListViewEvent

FieldTypeDetailed Parameter Field NameTypeDescription of Parameter
productListIDnumber - - product list ID
productsArray<Product> - - product array
productIDstringproduct ID
namestringproduct name
pricenumberproduct price
currencystringproduct currency
positionnumberproduct position

Code Examplelink

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 Eventlink

Methodlink

searchResultViewEvent

FieldTypeDetailed Parameter Field NameTypeDescription of Parameter
querystring - - Search Query
productsArray<Product> - - Product Array
productIDstringProduct ID
namestringProduct Name
pricenumberProduct Price
currencystringProduct Currency
positionnumberProduct Position

Code Examplelink

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

AddedToCart Eventlink

Methodlink

addedToCart

FieldTypeDetailed Parameter Field NameTypeDescription of Parameter
cartIdstring - - Product Cart ID
totalValuenumber - - Product Total Value
currencystring - - Product Currency
productsArray<Product> - - Product Array
productIDstringProduct ID
namestringProduct Name
pricenumberProduct Price
currencystringProduct Currency
quantitynumberProduct Quantity
positionnumberProduct Position

Code Examplelink

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: 15000,
currency: 'KRW'
});

Purchased Eventlink

Methodlink

purchased

FieldTypeDetailed Parameter Field NameTypeDescription of Parameter
inAppPurchasedboolean - - Product In-App Purchased
totalValuenumber - - Product Total Value
currencystring - - Product Currency
productsArray<Product> - - Product Array
transactionIdstringProduct Transaction ID
namestringProduct Name
pricenumberP
currencystringProduct Currency
quantitynumberProduct Quantity
positionnumberProduct Position

Code Examplelink

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: 15000,
currency: 'KRW',
transactionId: '16874326'
});

Event - Customlink

In-app events can be customly defined and used.

NameFieldTypeDetailed Parameter Field NameTypeDescription of Parameter
sendcategorystring - - Event Name
infoObject - - Event Information
labelstringevent subclass 1
actionstringevent subclass 2
valuenumbercustom event value
customAttributesObjectcustom event information

Code Examplelink

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

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

Code Examplelink

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"
},
});

Within the dashboard, you can view Category, Action, and Label. See the event categories in the dashboard below.

Distinguish events within the dashboardlink

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 Examplelink

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"
});
}

1) After installing the Web SDK (init), run the above code from the Chrome console. web console init en

2) You can see the statistics of each event as below by selecting Event Category, Event Action, Event Label in the Actual Report setting of AirBridge Dashboard and selecting Events(Web) as the indicator.
web airbridge dashboard en

Advancedlink

Web to App Bannerlink

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

web banner en

Code Examplelink

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 manuallylink

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 Examplelink

airbridge.setUserId('test');
airbridge.setUserEmail('test@ab180.co');

Encrypt user informationlink

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.

Set Default Valuelink

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 Examplelink

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.

If you do not want to share different subdomain attribution information, you must set shareCookieSubdomain: false option. (Default value: true)

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

For example, we operate two different subdomain services http://airbridge.io and http://blog.airbridge.io, and each has a separate advertisement campaign.
Assume that a sign-in event occurred after a user clicked on campaign A's tracking link and landed on http://airbridge.io and the user entered the browser address window in http://blog.airbridge.io an hour later.

1) If shareCookieSubdomainis true, sign-in events from http://blog.airbridge.io will be attributed to the Campaign A. 1) If shareCookieSubdomainis false, sign-in events from http://blog.airbridge.io will be attributed to the Default Value.

However, for services that are large, in which there are many places where users have different subdomain within the http://example.com (landing) service, such as http://mall.example.com (product mall) and http://event.example.com(event page),
we recommend that you keep the shareCookieSubdomain option true so that the Attribution information between each services can be shared.
In addition, we recommend creating a new app from the Airbridge dashboard and managing it separately under these circumstances.

SMS Performance Attribution Analysislink

SMS campaign performance for app downloads can also be analyzed and attributed.
SMS is sent when the function sendSMS is called.

Code Examplelink

airbridge.sendSMS({
phoneNum: document.getElementById("000-0000-0000").value,
message: 'Download and Play it!'
});

Stop trackinglink

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 Managerlink

SDK installation is available through Google Tag Manager.

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

SDK Installlink

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.

web gtm sdk install en

Event Trackinglink

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.

web gtm event track en