> ## Documentation Index
> Fetch the complete documentation index at: https://help.airbridge.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

## Implement Web-to-App Tracking using CTA Buttons

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

<Note>
  **Embedding tracking links to CTA buttons**

  Instead of using the `openDeeplink` 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](/en/guides/attribution-scenario#attribution-scenarios-for-cta-buttons-on-web-landing-pages) to learn more about the attribution scenario that includes CTA buttons for web-to-app user journeys.
</Note>

### Install the Airbridge SDK

Install the Airbridge App SDK and Web SDK.

* [Getting started with Airbridge SDK](/en/developers/airbridge-sdk-overview)

### Create CTA buttons

You can create CTA buttons using the `openDeeplink` 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.

<Danger>
  **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.
</Danger>

```html lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
<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 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.openDeeplink({
  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 [article](/en/guides/attribution-scenario#attribution-scenarios-for-cta-buttons-on-web-landing-pages).

### Send individual users to different in-app pages

<Info>
  **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.
</Info>

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.

<Accordion title="Using the product ID">
  You can use the product ID in the product page address. By using the `{product_id}` that is parsed after the deep link from the product page address, you can send users to the product page.
</Accordion>

### Add CTA parameters

<Info>
  **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.
</Info>

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 `openDeeplink` function. The CTA parameters can be selected as GroupBy or Filter in the Airbridge reports.

<AccordionGroup>
  <Accordion title="When a CTA parameter is configured to track a single CTA button">
    Implement the web-to-app user journey by configuring the `cta_param_1` as CTA.

    ```html lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
    <script>
    ...
    airbridge.openDeeplink({
      buttonID: "openAppButton",
      // or ["deeplink-button-1", "deeplink-button-2", ...]
        ctaParams: {
            cta_param_1: 'CTA'
        }
      }
    ...);
    </script>
    ```

    You can view the CTA button's impact on the app's conversions by selecting CTA Param 1 as GroupBy in the Actuals Report, as in the following image.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/4M-ULYx6Vz9Jb68I/asset/image/cta-parameter-1-groupby-table.png?fit=max&auto=format&n=4M-ULYx6Vz9Jb68I&q=85&s=445939c90c084eb08f8d40707161c7c0" alt="01-en-CTA" width="1400" height="800" data-path="asset/image/cta-parameter-1-groupby-table.png" />
    </Frame>
  </Accordion>

  <Accordion title="When multiple CTA parameters are configured to track multiple CTA buttons">
    Let's say you implement the web-to-app user journey by configuring CTA button 1 and CTA button 2, as in the code example below. You configured 3 parameters for CTA button 1 and 2 parameters for CTA button 2.

    ```html lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
    <script>
    ...
    airbridge.openDeeplink({
      buttonID: "deeplink-button-1",
        ctaParams: {
            cta_param_1: 'Button 1',
            cta_param_2: 'Top Banner',
            cta_param_3: 'Additional Property',
        }
      }
    ...);// CTA Button 1
    airbridge.openDeeplink({
      buttonID: "deeplink-button-2",
        ctaParams: {
            cta_param_1: 'Button 2',
            cta_param_2: 'Bottom Banner'
        }
      }
    ...);// CTA Button 2
    </script>
    ```

    You can view the impact of CTA button 1 and CTA button 2 on the app's conversions by selecting CTA Param 2 as GroupBy in the Actuals Report, as in the following image.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/4M-ULYx6Vz9Jb68I/asset/image/cta-parameter-2-groupby-table.png?fit=max&auto=format&n=4M-ULYx6Vz9Jb68I&q=85&s=94529a8f755fa75324d1eb394c85c967" alt="02-en-CTA" width="1400" height="800" data-path="asset/image/cta-parameter-2-groupby-table.png" />
    </Frame>

    If you set the filter to `CTA Param 3 = Additional Property` as in the image below, you can view the conversion results driven by the CTA button 1 only because the `cta_param_3` has not been configured for CTA button 2.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/4M-ULYx6Vz9Jb68I/asset/image/cta-parameter-filter.png?fit=max&auto=format&n=4M-ULYx6Vz9Jb68I&q=85&s=97efd7328d8399da1f67c872558832ee" alt="03-en-CTA" width="1400" height="800" data-path="asset/image/cta-parameter-filter.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

## 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.

<AccordionGroup>
  <Accordion title="Airbridge report">
    In the Actuals Report, by selecting CTA Param 1, CTA Param 2, and CTA Param 3 as GroupBys, you can view the impact of each CTA button on the app conversions. You can also use CTA Param 1, CTA Param 2, and CTA Param 3 to create filters.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/4M-ULYx6Vz9Jb68I/asset/image/cta-parameter-selector-menu.png?fit=max&auto=format&n=4M-ULYx6Vz9Jb68I&q=85&s=a4fa3ebfebe119af477f82f990c53741" alt="04-en-CTA" width="1400" height="800" data-path="asset/image/cta-parameter-selector-menu.png" />
    </Frame>
  </Accordion>

  <Accordion title="Raw data">
    On the **\[Raw Data]>\[App Raw Data]** page, select CTA Param 1, CTA Param 2, and CTA Param 3 as properties to view the CTA button's impact on the app conversions in raw data form.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/LmYiUaa2VigvtrFf/asset/image/app-raw-data-cta-properties.png?fit=max&auto=format&n=LmYiUaa2VigvtrFf&q=85&s=1559e597f3c4dbbedaa742b939d655ef" alt="05-en-CTA" width="1400" height="800" data-path="asset/image/app-raw-data-cta-properties.png" />
    </Frame>

    On the **\[Web Real-time Log]** or **\[App Real-time Log]** pages, the web and app conversions can be monitored in real-time, where you can find the  attributedCtaParam1, attributedCtaParam2, and `attributedCtaParam3` data.
  </Accordion>
</AccordionGroup>

### 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.

<AccordionGroup>
  <Accordion title="Airbridge report">
    In the Actuals Report, select Deeplink Open as the metric and Channel as GroupBy to view the attribution result of the web-to-app conversions. The winning touchpoint may vary depending on the Protected Attribution Window (PAW) configuration.

    If no CTA parameter has been configured, Airbridge cannot measure the CTA button's impact on the app conversions.
  </Accordion>

  <Accordion title="Real-time log">
    The web-to-app user journey can be tracked in real-time logs.

    On the **\[Web Real-time Log]** page, the Web Open event and Move to App event can be found. On the **\[App Real-time Log]** page, the Deeplink Open event and subsequent events can be found. The winning touchpoint may vary depending on the PAW configuration.

    <Info>
      **Note**

      Airbridge considers the Move to App event to be driven by the Airbridge Web SDK and, therefore, the channel name that drives the Move to App event is always recorded as `airbridge.websdk`.
    </Info>
  </Accordion>
</AccordionGroup>

<link rel="alternate" hrefLang="en" href="https://help.airbridge.io/en/guides/web-to-app-tracking-with-cta-buttons" />

<link rel="alternate" hrefLang="ko" href="https://help.airbridge.io/ko/guides/web-to-app-tracking-with-cta-buttons" />