You can install the Airbridge Web SDK using the options below.
Add the following code at the end of the <head>
element.
<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]){var n=function(){var c=i_.createElement(r_);c.onerror=function(){h.queue.filter(function(a){return 0<=_d.indexOf(a[0])}).forEach(function(a){a=a[1];a=a[a.length-1];"function"===typeof a&&a("error occur when load airbridge")})};c.async=1;c.src=_r;"complete"===i_.readyState?i_.head.appendChild(c):a_.addEventListener("load",function k(){a_.removeEventListener("load",k);i_.head.appendChild(c)})},h={queue:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(c){var a=c.split("."),k=a.pop();a.reduce(function(p,q){return p[q]=p[q]||{}},h)[k]=function(){h.queue.push([c,arguments])}});a_[_b]=h;"undefined"!==typeof i_.documentMode&&(_r=_r.replace(/^https:/,""));0<_g?(_b=new (a_.XDomainRequest||a_.XMLHttpRequest),_i=function(){},_b.open("GET",_r),_b.timeout=_g,_b.onload=function(){n()},_b.onerror=_i,_b.onprogress=_i,_b.ontimeout=_i,_b.send()):n()}})(window,document,"script","airbridge","https://static.airbridge.io/sdk/latest/airbridge.min.js","init startTracking stopTracking openBanner setBanner setDownload setDownloads openDeeplink setDeeplinks sendWeb setUserAgent setMobileAppData setUserID clearUserID setUserEmail clearUserEmail setUserPhone clearUserPhone setUserAttribute removeUserAttribute clearUserAttributes setUserAlias removeUserAlias clearUserAlias clearUser setUserId setUserAttributes addUserAlias setDeviceAlias removeDeviceAlias clearDeviceAlias setDeviceIFV setDeviceIFA setDeviceGAID events.send events.signIn events.signUp events.signOut events.purchased events.addedToCart events.productDetailsViewEvent events.homeViewEvent events.productListViewEvent events.searchResultViewEvent".split(" "),["events.wait","fetchResource","createTouchpoint","createTrackingLink"],0);
airbridge.init({
app: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
})
</script>
The
App Name
and Web SDK Token
can be found on the [Settings]>[Tokens] page in the Airbridge dashboard.
Protected Attribution Window setup
To measure web-to-app performance, you may need to configure the Protected Attribution Window (PAW). For details about configuring the PAW, refer to this section of the article.
1. Run the following command to install the airbridge-web-sdk-loader.
npm install airbridge-web-sdk-loader
2. Import airbridge
and call the airbridge.init
function.
import airbridge from 'airbridge-web-sdk-loader'
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
})
Go to Install SDK Using the Google Tag Manager for detailed instructions.
The Airbridge Web SDK works on all browsers that support ES5.
Chrome | Firefox | Safari | Internet Explorer |
---|---|---|---|
✔️ | ✔️ | ✔️ | IE 9 and later |
button.onclick = () => {
console.log(airbridge.isSDKEnabled)
}
To verify the installation, visit the web page where the SDK is installed and open the developer console.
If airbridge.isSDKEnabled
is true
, you will find Open events on the [Raw Data]>[Web Real-time Log] page in the Airbridge dashboard.
Once the Web SDK has been loaded and initialized, the
airbridge.isSDKEnabled
function value will change fromfalse
totrue
.
Upon the SDK initialization, events collected from the website are sent to Airbridge. The user data is stored in the browser's local storage and sent along with the events until the signOut
function is called.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
user: {
externalUserID: 'personID',
externalUserEmail: 'persondoe@airbridge.io',
externalUserPhone: '1(123)123-1234',
attributes: {
age_group: 30,
gender: 'Female'
},
alias: {
custom_id: '83587901-2726-4E29-ACEB-A90B0F7E75F6',
},
},
})
Attribute | Type | Description |
---|---|---|
| String | User ID |
| String | User Email |
| String | User phone number |
| Object | Custom user attribute (Custom key-value pair) |
| Object | User alias |
You can set up the SDK to collect the user identifier, as shown in the example below. The user data is stored in the browser's local storage and sent along with the events until the clearUser
function is called.
airbridge.setUserID('654321')
airbridge.setUserEmail('user@example.com')
You may also set up user aliases like in the example below. The user alias data can be used for identity matching when integrating Airbridge with other third-party tools.
airbridge.setUserAlias('amplitude_id', '12345678')
airbridge.setUserAlias('braze_ext_id', '87654321')
Refer to the example below to send user attributes.
airbridge.setUserAttribute('age', 45)
airbridge.setUserAttribute('gender', 'male')
airbridge.setUserAttribute('name', 'John Doe')
Follow the steps below to verify that the user data you want to collect is sent to Airbridge as intended.
Set up User IDs.
Send an event using the SDK.
Navigate to [Raw Data]>[Web Real-time Logs] in the Airbridge dashboard and click the event you've sent.
Check if the user data is displayed as intended in the JSON.
Set up the SDK to send the device alias data. The alias is retained even after the website is closed unless it is deleted.
airbridge.setDeviceAlias('YOUR_KEY', 'YOUR_VALUE')
airbridge.removeDeviceAlias('YOUR_KEY')
airbridge.clearDeviceAlias()
Method | Description |
---|---|
| Adds the key-value pair to the device identifier |
| Deletes the device identifier corresponding to the provided Key. If no matching identifier exists, no action is taken. |
| Deletes all device aliases |
Attention
For iOS, the device alias data is retained for up to 7 days, due to the system's maximum cookie storage limit.
The Airbridge SDK collects user actions per settings and sends them as web events.
The category parameter is required to send events to Airbridge.
Field Name | Type | Detailed Parameter Field Name | Subtype | Description |
---|---|---|---|---|
Category | String | - | - | Event Name (required) |
Event Attribute | Object | label | String | Event sub-attribute 1 |
Event Attribute | Object | action | String | Event sub-attribute 2 |
Event Attribute | Object | value | Number | Custom event value |
Event Attribute | Object | semanticAttributes | Object | |
Event Attribute | Object | customAttributes | Object | Custom event attributes |
airbridge.events.send('category', {
label: 'label',
action: 'action',
value: 10,
semanticAttributes: {
transactionID: 'transaction_123',
},
customAttributes: {
key: 'value',
}
})
Name | Field | Type | Description |
---|---|---|---|
homeViewEvent | - | - | - |
airbridge.events.send('airbridge.ecommerce.home.viewed')
Field | Type | Description |
---|---|---|
userID | String | User's ID |
userEmail | string | User's Email |
userPhone | string | User's Phone |
attributes | object | User's Attributes |
alias | object | User's Alias |
airbridge.setUserID('ab180')
airbridge.setUserEmail('user@example.com')
airbridge.events.send('airbridge.user.signup')
Field | Type | Description |
---|---|---|
userID | String | User ID |
userEmail | String | User Email |
userPhone | String | User Phone |
attributes | Object | User Attributes |
alias | Object | User Alias |
airbridge.setUserID('ab180')
airbridge.setUserEmail('user@example.com')
airbridge.events.send('airbridge.user.signin')
Name | Field | Type | Description of Parameter |
---|---|---|---|
signOut | - | - | - |
airbridge.events.send('airbridge.user.signout')
airbridge.clearUser()
Field | Type | Detailed Parameter Field Name | Subtype | Description |
---|---|---|---|---|
productListID | string | - | - | product list ID |
products | Array<Product> | - | - | product array |
products | Array<Product> | productID | string | product ID |
products | Array<Product> | name | string | product name |
products | Array<Product> | price | number | product price |
products | Array<Product> | currency | string | product currency |
products | Array<Product> | quantity | number | product quantity |
products | Array<Product> | position | number | product position |
airbridge.events.send('airbridge.ecommerce.productList.viewed', {
semanticAttributes: {
productListID: 'food',
products: [
{
productID: 'coke_zero',
name: 'Coke Zero',
price: 1.99,
currency: 'USD',
position: 1
},
{
productID: 'burger_cheese_double',
name: 'Double Cheeseburger',
price: 3.99,
currency: 'USD',
position: 2
}
]
}
})
Name: products
Type: Array<Object>
Field | Type | Description |
---|---|---|
- | - | Product object array |
productID | string | product ID |
name | string | product name |
price | number | product price |
currency | string | product currency |
quantity | number | product quantity |
position | number | product position |
airbridge.events.send('airbridge.ecommerce.product.viewed', {
semanticAttributes: {
products: [{
productID: 'coke_zero',
name: 'Coke Zero',
price: 1.99,
currency: 'USD',
position: 1
}]
}
})
Field | Type | Detailed Parameter Field Name | Subtype | Description |
---|---|---|---|---|
query | string | - | - | Search Query |
products | Array<Product> | - | - | Product Array |
products | Array<Product> | productID | string | Product ID |
products | Array<Product> | name | string | Product Name |
products | Array<Product> | price | number | Product Price |
products | Array<Product> | currency | string | Product Currency |
products | Array<Product> | quantity | number | Product Quantity |
products | Array<Product> | Position | number | Product Position |
airbridge.events.send('airbridge.ecommerce.searchResults.viewed', {
semanticAttributes: {
products: [
{
productID: 'coke_zero',
name: 'Coke Zero',
price: 1.99,
currency: 'USD',
position: 1
},
{
productID: 'burger_cheese_double',
name: 'Double Cheeseburger',
price: 3.99,
currency: 'USD',
position: 2
}
],
query: 'Search Query'
}
})
Field | Type | Detailed Parameter Field Name | Subtype | Description |
---|---|---|---|---|
cartID | string | - | - | Product Cart ID |
currency | string | - | - | Product Currency |
products | Array<Product> | - | - | Product Array |
products | Array<Product> | productID | string | Product ID |
products | Array<Product> | name | string | Product Name |
products | Array<Product> | price | number | Product Price |
products | Array<Product> | currency | string | Product Currency |
products | Array<Product> | quantity | number | Product Quantity |
products | Array<Product> | position | number | Product Position |
airbridge.events.send('airbridge.ecommerce.product.addedToCart', {
value: 13.95,
semanticAttributes: {
products: [
{
productID: 'coke_zero',
name: 'Coke Zero',
price: 1.99,
currency: 'USD',
quantity: 3,
position: 1
},
{
productID: 'burger_cheese_double',
name: 'Double Cheeseburger',
price: 3.99,
currency: 'USD',
quantity: 2,
position: 2
}
],
cartID: '73926365',
currency: 'USD'
}
})
Field | Type | Detailed Parameter Field Name | Subtype | Description |
---|---|---|---|---|
inAppPurchased | boolean | - | - | Product In-App Purchased |
currency | string | - | - | Product Currency |
transactionID | string | - | - | Transaction ID |
products | Array<Product> | - | - | Product Array |
products | Array<Product> | productID | string | Product ID |
products | Array<Product> | name | string | Product Name |
products | Array<Product> | price | number | Product Price |
products | Array<Product> | currency | string | Product Currency |
products | Array<Product> | quantity | number | Product Quantity |
products | Array<Product> | position | number | Product Position |
airbridge.events.send('airbridge.ecommerce.order.completed', {
value: 13.95,
semanticAttributes: {
products: [
{
productID: 'coke_zero',
name: 'Coke Zero',
price: 1.99,
currency: 'USD',
quantity: 3,
position: 1
},
{
productID: 'burger_cheese_double',
name: 'Double Cheeseburger',
price: 3.99,
currency: 'USD',
quantity: 2,
position: 2
}
],
inAppPurchased: true,
currency: 'USD',
transactionID: '16874326'
}
})
Follow the steps below to verify that the event data you want to collect is sent to Airbridge as intended.
Send an event using the SDK.
Navigate to [Raw Data]>[Web Real-time Logs] in the Airbridge dashboard and find the event you've sent.
Use the ID of your button tags written in HTML for app download and track performance.
// html
<button id="app_download">Go to app</button>
// javascript
airbridge.setDownloads({
buttonID: "app_download",
// or ["app_download_1", "app_download_2", ...]
defaultParams: {
campaign: 'example_campaign',
medium: 'example_medium',
term: 'example_term',
content: 'example_content'
},
ctaParams: {
cta_param_1: '1',
cta_param_2: '2',
cta_param_3: '3',
}
});
Required
buttonID
: The ID of the button tag. It can be an array made of IDs.
Optional
defaultParams
: Campaign parameters
ctaParams
: CTA Campaign parameters
If set, defaultParams
will be sent when the button is clicked.
Attention
User redirection is performed by the SDK. Therefore,
<a>
tags or theonclick
function should not be used.
Use the ID of your button tags written in HTML to embed deep links and track performance. Set up the deep link as shown below.
airbridge.setDeeplinks({
buttonID: 'deeplinking-button-1',
// or ['deeplink-button-1', 'deeplink-button-2', ...]
deeplinks: {
// Please use the custom scheme URL like `<YOUR_SCHEME>://...`
// Don't use the `intent://...`, `market://...` or `https://...`
ios: '<YOUR_SCHEME>://detail?id=1',
// Please use the custom scheme URL like `<YOUR_SCHEME>://...`
// Don't use the `intent://...`, `market://...` or `https://...`
android: '<YOUR_SCHEME>://detail?id=1',
desktop: 'https://www.example.com/detail?id=1'
},
fallbacks: {
// Please use `itunes-appstore` or website URL like `https://www.example.com/...`.
// Don't use the store URL like `https://apps.apple.com/...`
ios: 'itunes-appstore',
// Please use `google-play` or website URL like `https://www.example.com/...`.
// Don't use the store URL like `https://play.google.com/...`
android: 'google-play'
},
defaultParams: {
campaign: 'example_campaign',
medium: 'example_medium',
term: 'example_term',
content: 'example_content'
},
ctaParams: {
cta_param_1: '1',
cta_param_2: '2',
cta_param_3: '3',
},
desktopPopUp: true
});
Required
deeplinks.ios
: Enter the deep link that opens when the button is clicked on an iOS device where the app is installed. Only deep links using schemes are allowed.
deeplinks.android
: Enter the deep link that opens when the button is clicked on an Android device where the app is installed. Only deep links using schemes are allowed.
deeplinks.desktop
: Enter the deep link that opens when the button is clicked on a desktop.
fallbacks.ios
: Enter the fallback destination for users on an iOS device with no app installed.
fallbacks.android
: Enter the fallback destination for users on an Android device with no app installed.
itunes-appstore: The App Store page of the app
google-play: The Google PlayStore page of the app
url: A http/https scheme URL
buttonID
: The ID of the button tag where you want to add the deep link.
Optional
defaultParams
: Campaign parameters
ctaParams
: CTA Campaign parameters
desktopPopUp
: If set to true
, the deep link will open in a new window on the desktop browser.
Attention
User redirection is performed by the SDK. Therefore,
<a>
tags or theonclick
function should not be used.
Attention
The deep links you enter for
deeplinks.android
anddeeplinks.ios
must use the URL scheme that is set on the [Tracking Link]>[Deep Links] page in the Airbridge dashboard.
e.g.
<YOUR_SCHEME>://...
DON'T use deep links in the following format.
intent://...
market://...
https://www.example.com
When calling the setDeeplinks
function, add the optionredirect: true
to perform deep linking for all requests accessing the webpage.
Using this feature, you can add a bridge page that is displayed when transitioning from web to app.
airbridge.setDeeplinks({
buttonID: "deeplinking-button-1",
deeplinks: {
ios: "example://detail?id=1",
android: "example://detail?id=1",
desktop: "https://example.com/detail?id=1"
},
fallbacks: {
// itunes-appstore(default), google-play, url
ios: "itunes-appstore",
// google-play(default), itunes-appstore, url
android: "google-play"
},
redirect: true
});
redirect
: If set to true
, deep linking is performed for all requests accessing the webpage.
The app can be opened by calling the openDeeplink
function.
airbridge.openDeeplink({
type: "redirect",
deeplinks: {
ios: "example://detail?id=1",
android: "example://detail?id=1",
desktop: "https://example.com/detail?id=1"
},
fallbacks: {
ios: "itunes-appstore",
android: "google-play"
},
});
When calling the function within another function that is triggered by user actions, such as
onclick
, usetype: "click"
. For cases where the app is opened directly without user actions, usetype: "redirect".
You can use a web-to-app banner to encourage web users to install the app.
You can set the title, description, button text and color, and the behavior of the banner by configuring options.
airbridge.openBanner({
title: 'AB180 블로그',
description: '최신 마테크 정보를 실시간으로 받아볼 수 있습니다.',
buttonText: '설치',
color: '#0a69ff',
position: 'top',
destination: {
type: 'web',
url: 'https://blog.ab180.co'
}
})
airbridge.openBanner({
title: 'AB180 블로그',
description: '최신 마테크 정보를 실시간으로 받아볼 수 있습니다.',
buttonText: '설치',
color: '#0a69ff',
position: 'top',
destination: {
type: 'download',
defaultParams: {
campaign: 'example_campaign',
medium: 'example_medium',
term: 'example_term',
content: 'example_content'
},
ctaParams: {
cta_param_1: '1',
cta_param_2: '2',
cta_param_3: '3',
}
}
})
airbridge.openBanner({
title: 'AB180 블로그',
description: '최신 마테크 정보를 실시간으로 받아볼 수 있습니다.',
buttonText: '설치',
color: '#0a69ff',
position: 'top',
destination: {
type: 'deeplink',
deeplinks: {
ios: '<YOUR_SCHEME>://...',
android: '<YOUR_SCHEME>://...',
desktop: 'https://www.example.com/'
},
fallbacks: {
ios: 'itunes-appstore',
android: 'google-play'
},
defaultParams: {
campaign: 'example_campaign',
medium: 'example_medium',
term: 'example_term',
content: 'example_content'
},
ctaParams: {
cta_param_1: '1',
cta_param_2: '2',
cta_param_3: '3',
}
}
})
Name | Description | Required | Default |
---|---|---|---|
| Banner title | O | |
| Banner description | O | |
| The button text on the banner | O | |
| The button color | X |
|
| The location of the banner. - Select ' - Select ' | X |
|
| The behavior of the button on the banner. The behavior varies depending on the | O | |
| Custom style to set on the banner. | X |
Name | Description | Required |
---|---|---|
| Fixed to | O |
| Enter the URL to redirect the user. | O |
Name | Description | Required |
---|---|---|
| Fixed to | O |
| Campaign parameters | X |
| CTA Campaign parameters | X |
Name | Description | Required |
---|---|---|
| Fixed to | O |
| Deep link settings. | X |
| Deep link fallback setting. | X |
| Campaign parameters | X |
| CTA Campaign parameters | X |
Airbridge provides the following features regarding web-to-app banners.
You can add a styles
field to the option to specify custom styles. The Key is specified in CSS Selector form, and the Value is specified in CSSStyleDeclaration
(TypeScript) form.
Please refer to the example below. We are changing the border-radius
style of the icon area.
airbridge.openBanner({
...
styles: {
'#airbridge-banner-icon': {
borderRadius: '4px'
}
}
})
We provide the id you can use to specify CSS styles. You can specify it in CSS Selector form, like #airbridge-banner-icon
.
ID | Description |
---|---|
| Entire banner area |
| Banner icon |
| Banner title |
| Banner description |
| App download button |
| Banner close button |
You can migrate the existing setBanner
function to the openBanner
function. Please refer to the options for each function below.
|
| Notes |
---|---|---|
|
| |
|
| |
N/A |
| This is a new option. The existing option is " |
|
| |
N/A |
| This is a new option. |
N/A |
| This is a new option. The existing option is moving to the store. |
Please refer to the example code.
airbridge.setBanner({
title: 'AirStyle',
description: 'Find your perfect style!!',
keyColor: '#00a0c6',
position: 1
})
airbridge.openBanner({
title: 'AirStyle',
description: 'Find your perfect style!!',
buttonText: navigator.language === 'ko-KR' ? '설치' : 'Install',
color: '#00a0c6',
position: 'top',
destination: {
type: 'download'
}
})
You can add parameters to your ad's landing website URL to track traffic sources. Automatic and manual parsing is supported.
When the airbridge.init
function is called with the utmParsing: true
option, the UTM
values are automatically stored as Airbridge campaign parameters and can be viewed in the Airbridge reports.
URL Parameter | Airbridge Campaign Parameter |
---|---|
utm_source | Channel ( |
utm_campaign | Campaign ( |
utm_medium | Sub Publisher ( |
utm_term | Term ( |
utm_content | Content ( |
The
utm_source
parameter is mandatory. If theutm_source
parameter is absent, other utm parameters won't be parsed.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
utmParsing: true,
})
The URL is the window.location.href
value.
By using utmParameterValueReplaceMap
, the UTM parameter values can be mapped to a desired value. This allows you to set UTM parameter values collected through various methods to the same value for a consistent and clear report view in Airbridge. The parameters supported by utmParameterValueReplaceMap
are utm_source
, utm_campaign
, utm_medium
, utm_term
, and utm_content
.
For example, when using utm_source=blog
, the source variable, the channel (the name of the traffic source) is collected as "blog" in Airbridge. By using utmParameterValueReplaceMap
as shown below, the channel name will be collected as my_blog
.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
utmParsing: true,
utmParameterValueReplaceMap: {
utm_source: {
blog: 'my_blog',
},
},
})
By using urlQueryMapping
, you can custom map other parameters to Airbridge campaign parameters to view the data in Airbridge reports. When calling the airbridge.init
function, add urlQueryMapping
and input key (Airbridge parameter) : value (Non-Airbridge parameter)
pairs. The table below lists the Airbridge parameters that can be used as keys.
Parameter Name | Description |
---|---|
channel | Channel |
campaign | Campaign |
ad_group | Advertising group |
ad_creative | Advertising creative |
content | Content |
term | Keyword |
sub_id | Sub publisher |
sub_id_1 | Sub sub publisher 1 |
sub_id_2 | Sub sub publisher 2 |
sub_id_3 | Sub sub publisher 3 |
campaign_id | Campaign ID |
ad_group_id | Advertising group ID |
ad_creative_id | Advertising creative ID |
term_id | Keyword ID |
Let's say the landing page of your ad looks like the following.
https://mybrand.com/?utm_source=google&utm_campaign=jan_ua_campaign&internal_code=ABC
The parameter values can be mapped to Airbridge parameters using urlQueryMapping
so that the data can be viewed in the Airbridge reports, as shown in the example below.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
urlQueryMapping: {
channel: 'utm_source',
campaign: 'utm_campaign',
sub_id_1: 'internal_code',
},
})
For example, if a conversion happens, the internal_code
parameter value will be available in the Airbridge report by setting the GRoupBy as "Sub Sub Publisher 1."
Attention
When using
URLQueryMapping
, thechannel
value must be configured. If not,URLQueryMapping
won't work as intended.
Below is an example of how you can manually parse parameters.
function queryStringToJSON(url) {
url = url || ''
var index = url.indexOf('?')
if (index < 0) {
index = url.length - 1
}
var pairs = url.slice(index + 1).split('&')
var object = {}
pairs.forEach(function (string) {
if (string.length === 0) {
return
}
var pair = string.split('=')
object[pair[0]] = decodeURIComponent(pair[1] || '')
})
return object
}
var url = window.location.href
var params = queryStringToJSON(url)
// initialize
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
defaultChannel: params['utm_source'],
defaultParams: {
campaign: params['utm_campaign'],
medium: params['utm_medium'],
content: params['utm_content'],
term: params['utm_term'],
},
})
const queryStringToJSON = (url = '') => {
const { searchParams } = new URL(url)
return Object.fromEntries(searchParams.entries())
}
const url = window.location.href
const params = queryStringToJSON(url)
// initialize
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
defaultChannel: params['utm_source'],
defaultParams: {
campaign: params['utm_campaign'],
medium: params['utm_medium'],
content: params['utm_content'],
term: params['utm_term'],
},
})
Name | Description |
---|---|
defaultChannel | Ad channel name |
defaultParams.campaign | Campaign mae |
defaultParams.medium | Ad type |
defaultParams.content | Ad content |
defaultParams.term | The keyword term the website visitor came from |
Use the clearUser
function to delete the User ID, email, phone, alias, and other user attributes.
airbridge.clearUser()
The user.externalUserEmail
and user.externalUserPhone
data is hashed (SHA256) at the Client Level before transmission. The user.externalUserID
is not subject to the hash option, so if hashing is required, you need to hash it and input the value manually.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
userHash: true, // Default false
})
A user may be redirected before the event data is fully transmitted. Such scenarios can involve situations where event data is sent from an intermediate page. In these cases, the event data might be lost. To avoid this, you can use events.wait
to ensure that all event data is transmitted before redirecting the user.
Parameter | Type | Description |
---|---|---|
timeout | Number | Maximum wait time (milliseconds) |
callback | (error: string) => void | Callback for when the event is sent |
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
})
airbridge.events.send('category')
airbridge.events.wait(3000, function (error) {
location.href = 'url'
})
Configure cookieWindow
to adjust the attribution window.
// Set attribution window to 1 day
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
cookieWindow: 1,
})
// Set attribution window to 720 minutes (12 hours)
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
cookieWindowInMinutes: 720,
})
If both
cookieWindow
andcookieWindowInMinutes
are set,cookieWindowInMinutes
takes precedence.
Browser cookies are used for user tracking, and they are shared across subdomains.
If you want to stop sharing cookies with subdomains, set the shareCookieSubdomain
to false
.
The default value of shareCookieSubdomain
is true
.
If you are running 1 service using several subdomains, true
is recommended.
If you are running several services using several subdomains, false
is recommended.
Let's say a user clicks on the Campaign A Tracking Link and is redirected to https://mybrand.com
and then to https://shop.mybrand.com
.
If shareCookieSubdomain: true
Event on https://mybrand.com
is attributed to Campaign A
Event on https://shop.mybrand.com
is also attributed to Campaign A
If shareCookieSubdomain: false
Event on https://mybrand.com
is attributed to Campaign A
Event on https://shop.mybrand.com
is attributed to the default setup value
Attention
Optional setting. Configure only if necessary.
The opt-in policy requires user consent before using user data.
After setting the autoStartTrackingEnabled
function to false
, call the startTracking
function at the point of time when you can collect events. The SDK will start collecting events when the startTracking
function is called.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
autoStartTrackingEnabled: false,
})
airbridge.startTracking()
The default value of autoStartTrackingEnabled
is true
.
Attention
Optional setting. Configure only if necessary.
The opt-out policy allows the use of user information until the user explicitly declines.
After setting the autoStartTrackingEnabled
function to true
, call the stopTracking
function at the point of time when you can no longer collect events. When the stopTracking
function is called, the SDK will stop collecting events.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
autoStartTrackingEnabled: true,
})
airbridge.stopTracking()
Attention
If you want to include a custom channel tracking link to a CTA button, you cannot use the
setDeeplinks
function. Conversely, if you use thesetDeeplinks
function to create a CTA button, you cannot embed a custom channel tracking link to it.
If you are using the setDeeplinks function to implement web-to-app tracking via CTA buttons like "Open in app" buttons, you can configure the attribution window as the Protected Attribution Window (PAW). The PAW is the timeframe in which the touchpoints collected by the Airbridge Web SDK are excluded from the attribution starting from the website launch. To learn more about the attribution process with different PAW configurations, refer to this article.
The default PAW is 30 minutes. If you want to adjust it, set the useProtectedAttributionWindow
in the airbridge.init()
to true
and input the value you want in minutes. The useProtectedAttributionWindow
can be set to a maximum of 4320 minutes (3 days).
If you don’t want to use the PAW, set the useProtectedAttributionWindow
to false
.
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
useProtectedAttributionWindow: true,
protectedAttributionWindowInMinutes: 60,
});
You can add a parameter to the touchpoints attributed with PAW to track the CTA button performance.
When configuring the airbridge.setDeeplinks for the "Open in app" button, add ctaParams
.
User Action |
Attributed to (Default) | Attributed to (With PAW) | Attributed Parameter (With PAW) |
---|---|---|---|
1. Ad click |
|
|
|
2. Web Open |
|
|
|
3. Click "Open in app" button (Using |
|
|
|
4. App Deeplink Open |
|
|
|
Only the following keys are allowed as ctaParams.
cta_param_1
cta_param_2
cta_param_3
Use sendWeb
when the user is moving to another website. If the user moves to a website that has the Airbridge Web SDK installed, the user journey won't be interrupted for attribution in Airbridge.
useProtectedAttributionWindow
must be set astrue
when initializing the Airbridge SDK to connect the attributions. To learn more, refer to this section.
// Open in same window
airbridge.sendWeb("https://www.airbridge.io/blog")
// Open in new window
airbridge.sendWeb("https://www.airbridge.io/blog", function(err, res) {
window.open(res.targetUrl)
})
The Airbridge SDK can be installed using the Google Tag Manager.
Click New Tag in "Workspace Overview," or select [Tag]> [New] in the container.
Select Custom HTML at [Tag Configuration]>[Custom Settings].
Insert the Airbridge SDK code in the "HTML" section as shown in the image below.
Go to [Tag Configuration]> [Advanced Settings]>[Tag firing priority] and enter a number greater than 0 (e.g., 9999).
Select Once per page at [Tag Configuration]>[Advanced Settings]>[Tag firing options].
Set "Trigger" to "Pageview - DOM Ready".
Complete the tag creation and click Submit.
Navigate to [Raw Data]>[Web Real-time Log] in the Airbridge dashboard and verify that the SDK logs are logged correctly.
Click New Tag in "Workspace Overview," or select [Tag]> [New] in the container.
Select Custom HTML at [Tag Configuration]>[Custom Settings].
Insert the code for the events you want to track in the "HTML" section, as shown in the image below.
Depending on the event, select Unlimited, Once per event, or Once per page at [Tag Configuration]>[Advanced Settings]>[Tag firing options].
Set the appropriate trigger for the event.
Complete the tag creation and click Submit.
Navigate to [Raw Data]>[Web Real-time Log] in the Airbridge dashboard and verify that the SDK logs are logged correctly.
The Airbridge Web SDK is designed to store attribution data for only one app per domain. By using useStoragePerApp
, you can separate the data storage to view attribution data per app of you have multiple apps on subdomains that share the same root domain.
For example, if you have multiple apps on subdomains, such as a.example.com and b.example.com, that share the root domain example.com, you can separate the data storage using useStoragePerApp
.
// 서브 도메인 #1: a.example.com
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
useStoragePerApp: true,
})
// 서브 도메인 #2: b.example.com
airbridge.init({
app: 'YOUR_ANOTHER_APP_NAME',
webToken: 'YOUR_ANOTHER_WEB_TOKEN',
// ...
useStoragePerApp: true,
})
The default value of useStoragePerApp
is false
.
Attention
When you change the
useStoragePerApp
option, the first event in each browser the user uses immediately after the change can be processed as an unattributed event.
Was this page helpful?