• Developer Guide
  • SDK Integration

Web SDK

The Airbridge Web SDK not only tracks web to app conversion data, but also attribution data for the web application itself. This gives you a more extensive insight on your users' journey, especially if you are running applications on both web and mobile. Data collected from the Web SDK is then aggregated and shown on the Airbridge dashboard, where comprehensive analytics for both your web and app are provided. Raw data can also be exported in CSV format for your convenience.

SDK Setup


SDK Installation

Use one of the three following options to install the SDK.

Install Directly as a Function (Option 1)

Add the following code at the end of the head element.

JavaScript
12345678
<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(){g.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 h(){a_.removeEventListener("load",h);i_.head.appendChild(c)})},g={queue:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(c){var a=c.split("."),h=a.pop();a.reduce(function(p,q){return p[q]=p[q]||{}},g)[h]=function(){g.queue.push([c,arguments])}});a_[_b]=g;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","//static.airbridge.io/sdk/latest/airbridge.min.js","init startTracking fetchResource setBanner setDownload setDownloads openDeeplink setDeeplinks sendWeb setUserAgent setUserAlias addUserAlias setMobileAppData setUserId setUserEmail setUserPhone setUserAttributes clearUser 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","createTouchpoint"],0);

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

App Name and Web SDK Token can be found at the Airbridge dashboard → Settings → Tokens.

It is recommended to configure protected attribution windows when measuring web to app contributions. Please refer to this guide for more information.

Install using an NPM module (Option 2)

  1. Install the Airbridge NPM module.

Shell
1
npm install airbridge-web-sdk-loader
  1. Import airbridgeand call the airbridge.initfunction.

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

airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
})

Install Using Google Tag Manager (Option 3)

Please refer to Install SDK Using Google Tag Manager

Supported Browsers

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

Chrome

Firefox

Safari

Internet Explorer

✔️

✔️

✔️

IE 9 and above

Testing the SDK

123
button.onclick = () => {
    console.log(airbridge.isSDKEnabled)
}

Go to the web page where the SDK is installed, and see if airbridge.isSDKEnabled is "true" at the developer tools console.

If you get a proper output, go to "Airbridge dashboard → Raw Data → Web Real-time Log" and make sure that "open" events are being shown.

Attention

The value of airbridge.isSDKEnabled will change from "false" to "true" once the web SDK is completely done loading.

User Setup


User Identifier and Attributes Setup upon SDK Initialization

User information is automatically sent upon the initialization of the SDK. User information will be stored on the browser's local storage and all subsequent events on the website will be sent with the user's information until signOut is called.

1234567891011121314151617
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    user: {
        externalUserID: 'personID',
        externalUserEmail: 'persondoe@airbridge.io',
        externalUserPhone: '1(123)123-1234',
        attributes: {
            age_group: 30,
            gender: 'Female'
        },
        alias: {
            amplitude_device_id: '83587901-2726-4E29-ACEB-A90B0F7E75F6',
        },
    },
})

Attribute

Type

Description

user.externalUserID

String

User ID

user.externalUserEmail

String

User Email

user.externalUserPhone

String

User phone number

user.attributes

Object

Custom user attributes (Custom key-value pair)

user.alias

Object

User alias

User Identifier Setup

Use the following method to setup your own user identifiers as opposed to external identifiers. It will be stored on the browser's local storage and all subsequent events on the website will be sent with the user's information until signOut is called.

12
airbridge.setUserId('654321');
airbridge.setUserEmail('user@example.com');

You may also setup user aliases that will help identity matching with third party tools (e.g. Amplitude, Braze).

1234567
airbridge.setUserAlias({
  "amplitude_id": "12345678",
  "braze_ext_id": "87654321"  
})

airbridge.addUserAlias("amplitude_id", "12345678")
airbridge.addUserAlias("braze_ext_id", "87654321")

User Attributes Setup

Additional user attributes can be used for a more accurate Multi-Touch Attribution (MTA) analysis, additional internal data analysis, and linking third-party solutions.

123456
airbridge.setUserAttributes({
    "age": 45,
    "gender": "male",
    "name": "Gildong Hong"
    // ...
});

Testing

Make sure that your user information settings are being properly sent through the SDK.

  1. Configure user identifier information.

  2. Send an event using the SDK.

  3. Click the event at "Airbridge dashboard → Raw Data → Web Real-time Logs"

  4. Check if the user information is correctly sent under the userblock.

Device Setup


Setup Device Alias

Setup a device alias through the Airbridge SDK. The alias will be sustained even after the website closes, unless otherwise deleted.

123
airbridge.setDeviceAlias('YOUR_KEY', 'YOUR_VALUE')
airbridge.removeDeviceAlias('YOUR_KEY')
airbridge.clearDeviceAlias()

Method

Description

setDeviceAlias(key: string, value: string)

Add the key value pair to the device identifier.

removeDeviceAlias(key: string)

Delete the corresponding device alias.

clearDeviceAlias()

Delete all device aliases.

Attention

Depending on the cookie's max storage time, iOS will sustain the device alias for a maximum of 7 days.

Event Setup


When important user actions occur, in-app events can be sent to measure the performance of each channel.

All event parameters are optional. However, more information about the event will help provide more accurate statistics.

Custom Events

Name: send

Field

Type

Detailed Parameter Field Name

Type

Description of Parameter

category

String

-

-

Event Name (required)

info

Object

label

String

Event sub attribute 1

info

Object

action

String

Event sub attribute 2

value

Object

value

Number

Custom event value

info

Object

semanticAttributes

Object

Semantic event attributes

info

Object

customAttributes

Object

Custom event attributes

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

Standard Events

View Home Screen

Name

Field

Type

Description of Parameter

homeViewEvent

-

-

-

1
airbridge.events.send('airbridge.ecommerce.home.viewed');

User Sign up

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

1234
airbridge.setUserId('ab180');
airbridge.setUserEmail('user@example.com');

airbridge.events.send('airbridge.user.signup');

User Log In

Field

Type

Description

userID

String

User ID

userEmail

String

User Email

userPhone

String

User Phone

attributes

Object

User Attributes

alias

Object

User Alias

1234
airbridge.setUserId('ab180');
airbridge.setUserEmail('user@example.com');

airbridge.events.send('airbridge.user.signin');

User Log Out

Name

Field

Type

Description of Parameter

signOut

-

-

-

123
airbridge.events.send('airbridge.user.signout');

airbridge.clearUser();

View Product List

Field

Type

Detailed Parameter Field Name

Type

Description of Parameter

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

123456789101112131415161718192021
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
            }
        ]
    }
});

View Product Details

Name: products

Type: Array<Object>

Field

Type

Description of Parameter

-

-

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

1234567891011
airbridge.events.send('airbridge.ecommerce.product.viewed', {
    semanticAttributes: {
        products: [{
            productID: 'coke_zero',
            name: 'Coke Zero',
            price: 1.99,
            currency: 'USD',
            position: 1
        }]
    }
});

View Search Results

Field

Type

Detailed Parameter Field Name

Type

Description of Parameter

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

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

Add To Cart

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

Array<Product>

productID

string

Product ID

productID

Array<Product>

name

string

Product Name

productID

Array<Product>

price

number

Product Price

productID

Array<Product>

currency

string

Product Currency

productID

Array<Product>

quantity

number

Product Quantity

productID

Array<Product>

position

number

Product Position

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

Order Complete

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

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

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

Verify Event Transmission

Make sure that the events are being properly sent through the SDK.

  1. Send an event with the SDK.

  2. Check if the event shows up at "Airbridge dashboard → Raw Data → Web Real-time Logs".

Web to App Setup


The Airbridge Web SDK enables you to provide a seamless web to app experience for your users. The below method saves developers from having to code each button separately and also makes sure that your buttons work with all major browsers.

Add Download Button

Use the id value of your buttons to add a download function and track it's performance.

12345678910111213141516171819
// 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: Values of the idattribute of a button. Can be an array.

Optional

  • defaultParams: Campaign parameters

If set, defaultParams will be sent when the button is clicked.

Attention

Since the SDK should be responsible for sending the user to the app market, do not use <a> tags or the onclick function.

Use the id value of your buttons to embed deep links and track it's performance. setDeeplinks allows you to customize actions for each button. Not only can you setup redirections to your deep links for each platform (OS) separately, you can override fallbacks and campaign parameters too. This allows web attributions to be properly tracked, and saves you from creating separate deep links for all the buttons on your website.

12345678910111213141516171819202122
airbridge.setDeeplinks({
    buttonID: "deeplinking-button-1",
    // or ["deeplink-button-1", "deeplink-button-2", ...]
    deeplinks: {
        ios: "ablog://main",
        android: "ablog://main",
        desktop: "https://www.airbridge.io/blog"
    },
    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: The deep link to run when the button is clicked in an iOS environment. (Only deep links using schemes are allowed)

  • deeplinks.android: The deep link to run when the button is clicked in an Android environment. (Only deep links using schemes are allowed)

  • deeplinks.desktop: The deep link to run when the button is clicked in a desktop environment.

  • fallbacks.ios: The destination for when the deep link fails in iOS.

  • fallbacks.android: The destination for when the deep link fails in Android.

    • itunes-appstore: App's Apple AppStore page

    • google-play : App's Android PlayStore page

    • url : A http/https scheme URL

  • buttonID: Values of the idattribute of a button. Can be an array.

Optional

  • defaultParams: Campaign parameters

  • desktopPopUp: If set to true, deep links will run in a new window when in a desktop environment.

  • Caution : Since the SDK should be responsible for sending the user to the app market, do not use <a> tags or the onclick function.

Relay Page Setup

If redirect: true is set, the deep link will run automatically for all incoming requests that try to access the webpage.

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

Open App by Calling a Function

You can open the app by calling openDeeplink function.

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

Please use type: "click" when calling in a function executed through user’s action, as in onclick. Use type: "redirect" when opening the app directly without user’s action.

Web to App Banner

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

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

You can change the title, description, button color and other properties of the banner.

Advanced Settings


Campaign Parameter Setup

If your ad's landing page is a website, you can use several parameters to add additional information to the URL. The parameters can be used to track the user journey to your website.

Parameter analysis can be either automatic or manual.

utmParsing (Automatic)

When the airbridge.init method is called with the utmParsing: true option, UTM values are automatically stored as Airbridge campaign parameters and can be seen in the Airbridge Actuals report.

URL Parameter

Airbridge Campaign Parameter

utm_source

Channel (channel)

utm_campaign

Campaign (campaign)

utm_medium

Sub Publisher (sub_id)

utm_term

Term (term)

utm_content

Content (content)

Other UTM parameters will not be parsed if utm_source is missing.

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

The URL is the window.location.href value.

urlQueryMapping (Automatic)

When the init method is called with the utmParsing: true option, UTM values are automatically stored as Airbridge campaign parameters and can be seen in the Airbridge Actuals report.
You can use urlQueryMapping to automatically store other parameters. Insert key-value pairs for urlQueryMapping when the airbridge.init method is called. Below are the keys you can use with 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

campaign_id

Campaign ID

ad_group_id

Advertising group ID

ad_creative_id

Advertising creative ID

term_id

Keyword ID

If a custom parameter such as internal_code is used with utm_source and utm_campaign, the URL will be structured as below.

  • https://example.com/?utm_source=google&utm_campaign=jan_ua_campaign&internal_code=ABC

Below is an example of how you can map each parameter so that it shows on the Airbridge dashboard.

12345678910
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    urlQueryMapping: {
        channel: 'utm_source',
        campaign: 'utm_campaign', 
        sub_id_1: 'internal_code',
    },
})

If a conversion happens through the above URL, the data for internal_code will be available at "Airbridge dashboard → Actuals Report → Configuration → GroupBy → Sub Sub Publisher 1".

Attention

channel is required for using URLQueryMapping. It is not working properly if channel is not set.

Manual functions

Below is an example of how you can manually parse parameters.

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

1234567891011121314151617181920212223242526272829303132

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

Name of the advertiser to be recorded in all events on the web page

defaultParams.campaign

Name of the campaign to be recorded in all events occurring on the web page

defaultParams.medium

Advertising media to be recorded in all events occurring on the web page

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 web page.

Clear User Information

Use the clearUser method to delete User ID, email, phone, alias and attributes of a user.

1
airbridge.clearUser()

Encrypt user information

Hash (SHA256) user.externalUserEmail and user.externalUserPhone at the client level. This option will not affect user.externalUserID and it will not be hashed.

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

Delay Event Transmission

Data could be lost if a redirection occurs before the event is completely sent (e.g. sending an event from a relay page). Use events.wait to make sure the events are sent before being redirected.

Parameter

Type

Description

timeout

Number

Maximum wait time (milliseconds)

callback

(error: string) => void

Callback for when the event is sent

1234567891011
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
})

airbridge.events.send('category')

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

Attribution Window Setup

Use cookieWindow to adjust your attribution window.

123456789101112131415
// 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 and cookieWindowInMinutes are set, cookieWindowInMinutes is applied.

User tracking is done through browser cookies, which are shared between subdomains.
Set shareCookieSubdomain as false to stop sharing cookies between subdomains.

1234567
// initialize 
airbridge.init({ 
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    shareCookieSubdomain: false,
})

Default value of shareCookieSubdomain is true.

  • If one service uses several subdomains, trueis recommended.

  • If several services use 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 Campaign

Set up Opt-In

Attention

It is not an essential setting function. Please set it up after confirming if it's a necessary function.

Opt-In is a policy that does not use user information until the user agrees.

After setting autoStartTrackingEnabled to false, the startTracking function is called when you can collect events. Events are collected from the moment the startTracking function is called.

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

airbridge.startTracking()

The default value of autoStartTrackingEnabled is true.

Set up Opt-Out

Attention

It is not an essential setting function. Please set it up after confirming if it's a necessary function.

Opt-Out is a policy that uses user information until the user refuses.

After setting autoStartTrackingEnabled to true, call the stopTracking function when events can be collected. No events are collected from the moment the stopTracking function is called.

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

airbridge.stopTracking()

Protected Attribution Window

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 the setDeeplinks 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 call-to-action buttons, such as a button that says “View in our app,” you can configure the Protected Attribution Window (PAW) to suit your needs.

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 value for useProtectedAttributionWindow is 30 minutes. If you want to customize it, set the useProtectedAttributionWindow in the airbridge.init() to true and input the PAW you want in minutes. The useProtectedAttributionWindow can be set to a maximum of 4320 (3 days).

If you don’t want to use the PAW, set the useProtectedAttributionWindow to false.

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

Track Journey to Another Website

Use the sendWeb method when the user is moving to another website. If the user moves to a website that has the Airbridge Web SDK installed, Airbridge can connect the attributions for analysis.

useProtectedAttributionWindow must be set as true when initializing the Airbridge SDK to connect the attributions. Please refer to Protected Attribution Window.

1234567
// 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)
})

Using Google Tag Manager

The Airbridge SDK can be installed using Google Tag Manager.

SDK Installation

Follow the below steps to install the Airbridge SDK using Google Tag Manager.

  1. Click on "New Tag" in "Workspace Overview", or select "Tag → New" in the container.

  2. Select "Custom HTML" at "Tag Configuration → Custom Settings".

  3. Insert the Airbridge SDK code code in the "HTML" section as shown in the picture below.

  4. Go to "Tag Configuration → Advanced Settings → Tag firing priority" and enter a number greater than 0 (e.g. 9999).

  5. Select "Once per page" at "Tag Configuration → Advanced Settings → Tag firing Options"

  6. Set "Trigger" to "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 the SDK logs are logged properly.

Event Tracking

Follow these steps to track events using Google Tag Manager.

  1. Click on "New Tag" in "Workspace Overview", or select "Tag → New" in the container.

  2. Select "Custom HTML" at "Tag Configuration → Custom Settings".

  3. Insert the code for the events you want to track in the "HTML" section as shown in the picture below.

  4. Depending on the event, select "Unlimited", "Once per event" or "Once per page" at "Advancded Settings > Tag firing options".

  5. Set the appropriate trigger for the event.

  6. Complete the tag creation and press the submit button.

  7. Check the Airbridge dashboard under real-time logs to verify that the SDK logs are logged properly.

Was this page helpful?

Have any questions or suggestions?