• User Guide
  • Airbridge Playbooks

Web-to-App Tracking using CTA buttons

Mobile app attribution is primarily focused on measuring the impact of mobile ads on your app's conversions. In some cases, it can be beneficial to redirect users who clicked on the mobile ad to your website, where you have a call-to-action (CTA) button that sends them to the app download or in-app page. This strategy can smoothen the user experience when transitioning from a website to an app and ultimately boost the conversion rates.

Airbridge supports web-to-app tracking via CTA buttons. Read on to learn how to implement a CTA button for web-to-app tracking and view the attribution results on Airbridge.

Implementation of the Web-to-App Tracking via CTA Buttons

The Airbridge SDK must be installed to implement the web-to-app tracking via CTA buttons. The setDeeplinks function in the Web SDK shall be used when creating the CTA buttons for effective web-to-app tracking.

Instead of using the setDeeplinks function in the Web SDK, you can embed custom channel tracking links to CTA buttons. By doing so, the tracking link will attribute the conversions within the app that occur after clicking the CTA button to the CTA button.

Refer to this article to learn more about the attribution scenario that includes CTA buttons for web-to-app user journeys.

Prerequisite

The Airbridge App SDK and Web SDK must be installed.

Creating CTA buttons

You can create CTA buttons using the setDeeplinks function. The deeplinks and fallbacks parameters include information about the destination, such as an address or app store keyword.

When the user has already installed the app, the user is sent to the destination as configured in the deeplinks parameter. When the app is not installed on the user’s device, the user is sent to the app store page configured in the fallbacks parameter.

Attention

Don’t use the actual app store page address starting with https:// as the fallbacks parameter value, as the user may be sent to the app store page again after the app launch.

To send users who don’t have installed your app to the app store, configure itunes-appstore for iOS apps and google-play for Android apps as the fallbacks values.

12345678910111213141516171819202122232425262728293031323334353637383940
<button id="openAppButton">
  Open App
</button>

<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]){var m=function(){var c=i_.createElement(r_);c.onerror=function(){f.queue.filter(function(b){return 0<=_d.indexOf(b[0])}).forEach(function(b){b=b[1];b=b[b.length-1];"function"===typeof b&&b("error occur when load airbridge")})};c.async=1;c.src=_r;"complete"===i_.readyState?i_.head.appendChild(c):i_.addEventListener("readystatechange",function g(){"complete"===i_.readyState&&(i_.removeEventListener("readystatechange",g),i_.head.appendChild(c))})},f={queue:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(c){var b=c.split("."),g=b.pop();b.reduce(function(n,p){return n[p]=n[p]||{}},f)[g]=function(){f.queue.push([c,arguments])}});a_[_b]=f;0<_g?(a_=new (a_.XDomainRequest||a_.XMLHttpRequest),_b=function(){},a_.open("GET",_r),a_.timeout=_g,a_.onload=function(){m()},a_.onerror=_b,a_.onprogress=_b,a_.ontimeout=_b,a_.send()):m()}})(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_SDK_TOKEN'
});

airbridge.setDeeplinks({
  buttonID: "openAppButton",
  // or ["deeplink-button-1", "deeplink-button-2", ...]
  deeplinks: {
    ios: "example://detail?product_id=123",
    android: "example://detail?product_id=123",
    desktop: "https://airbridge.io"
  },
  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'
  },
  ctaParams: {
    cta_param_1: 'detail',
    cta_param_2: 'shoes',
    cta_param_3: 'openAppButton',
  },
  desktopPopUp: true
});
</script>

Use the <button> tag without the onClick callback function for the CTA button. If you add the href attribute to the <a> tag or the onClick callback function to the <button> tag, the CTA button may not work.

For more information, refer to this .

Sending individual users to different in-app pages via a CTA button

Attention

Additional development may be required to send users to specific product pages via a CTA button. The configuration described in this section is not required if you want to send all users who click the CTA button to a single destination.

You can send individual users to specific product pages that are most relevant to their actions performed on the website. For example, if a user is checking out a pair of sneakers on your website, you can send this user to the in-app page that features the same pair of sneakers when the user clicks the CTA button.

By adding the specific product page address that includes product IDs to the deeplinks parameter, you can create CTA buttons that send users to specific product pages. The implementation may vary by web and app development environments.

Adding CTA parameters

Attention

The configuration described in this section is not required if you want to use tracking links to create CTA buttons to measure the website's impact on app conversions or if you don’t need to track and compare the conversion results of different CTA buttons.

By adding CTA parameters to the Web SDK, you can view the web-to-app tracking results per CTA button in Airbridge. The app conversion will be attributed to the ad that brought the user to the website, but the number of users acquired by the app via the CTA button or the installs driven by the CTA button can only be measured by using CTA parameters.

Up to 3 CTA parameters can be added to the setDownloads or setDeeplinks function. The CTA parameters can be selected as GroupBy or Filter in the Airbridge reports.

Web-to-App Conversion Reporting

The web-to-app conversion results can be viewed in the Airbridge reports or the real-time logs.

CTA buttons with CTA parameters

By adding CTA parameters, you can view one or multiple CTA buttons' impact on the app's conversions.

CTA buttons with no CTA parameters

When CTA parameters are not added to the CTA buttons, the impact of the CTA buttons on the app's conversions cannot be measured, as the ad channel that brought the user to the website will get the credit for the app conversions.

Was this page helpful?

Have any questions or suggestions?