Convert Mobile Web Users to Native App Users

What if you've gone to the trouble of building a great mobile website in addition to a beautiful native app, but notice your conversion rate is better in the native app than on the web. In this case, converting mobile web users to download your app might give your business a boost. While moving them from one to the other can be challenging, Dynamic Links makes it easy. With very little code you can add the ability for a user to click a link on your mobile web and be taken to the corresponding page in your app, even if they have to go to the App Store or Google Play Store to install it first!

Key benefits

• Turn mobile web users into native app users while making the transition as comfortable as possible for them.
• Users can start your app with the same content they were viewing on your site.
• Very little integration needed.

Here's how to get started!

Before you begin

Make your app's content deep-linkable

The key to converting mobile web users to native app users is making sure the user sees the same content when they open the app that they're seeing on the web. So, before you can start sending your mobile web users to your app, your app needs to be able to receive deep links to content.

If you've implemented iOS Universal Links or Android App Links, you've probably already done this work. But if not, add logic to your app that takes in a URL from your website and displays the corresponding content within your app to the user.

Set up Firebase and the Dynamic Links SDK

Set up a new Firebase project and install the Dynamic Links SDK into your app. (iOS, Android, C++, Unity). Installing the Dynamic Links SDK allows Firebase to pass along data about the Dynamic Link after the user installs the app. Without the SDK, there's no way to connect a post-install user with a pre-install click.

Add "Open in app" links to your web pages

Now it's time to set up the links that will move people from your website into your native app. Don't worry if your users don't have the app installed yet; Dynamic Links can take care of that for you.

On each page of your web site, dynamically generate a Dynamic Link. Since you've already made your content deep-linkable, the link parameter can simply be the URL of the page it's on.

Here's what such a link might look like:

<a href="https://example.page.link/?link=https://www.example.com/content?item%3D1234&apn=com.example.android&ibi=com.example.ios">Open this page in our app!</a>

When users open this link on their device, if the app specified by the apn parameter (on Android) or the ibi parameter (on iOS) isn't installed, users are taken to the Play Store or App Store to install the app. Then, the app opens, and the URL specified in the link parameter is passed to it.

Open the linked content in your app

Next, you need to receive the link that's passed to your app and open the linked content, which is easy using the Dynamic Links SDK:

iOS

On iOS, you receive the Dynamic Link by implementing the application:continueUserActivity:restorationHandler: method. In the restoration handler, you can get the Dynamic Link by calling handleUniversalLink:completion:. If a Dynamic Link was passed to your app, you can get it from the url property of the FIRDynamicLink. For example:

[[FIRDynamicLinks dynamicLinks]
    handleUniversalLink:userActivity.webpageURL
             completion:^(FIRDynamicLink * _Nullable dynamicLink,
                          NSError * _Nullable error) {
      NSString *link = dynamicLink.url;
    }];

FIRDynamicLinks.dynamicLinks()?.handleUniversalLink(userActivity.webpageURL!) { (dynamiclink, error) in
    let link = dynamiclink.url
}

Additionally, you must call dynamicLinkFromCustomSchemeURL: in the application:openURL:options: method to receive Dynamic Links passed to your app as custom scheme URLs. For example:

FIRDynamicLink *dynamicLink = [[FIRDynamicLinks dynamicLinks] dynamicLinkFromCustomSchemeURL:url];
if (dynamicLink) {
  NSString *link = dynamicLink.url;
  // ...
  return YES;
}

let dynamicLink = FIRDynamicLinks.dynamicLinks()?.dynamicLinkFromCustomSchemeURL(url)
if let dynamicLink = dynamicLink {
  let link = dynamiclink.url
  // ...
  return true
}

Now that you have the value of the link parameter, display the linked content to your user.

Android

On Android, you use the getInvitation() method to get data from the Dynamic Link:

FirebaseDynamicLinks.getInstance()
        .getDynamicLink(getIntent())
        .addOnCompleteListener(new OnCompleteListener<PendingDynamicLinkData>() {
            @Override
            public void onComplete(@NonNull Task<PendingDynamicLinkData> task) {
                if (!task.isSuccessful()) {
                    // Handle error
                    // ...
                }

                FirebaseAppInvite invite = FirebaseAppInvite.getInvitation(task.getResult());
                if (invite != null) {
                    // Handle invite
                    // ...
                }
            }
        });
MainActivity.java

FirebaseDynamicLinks.getInstance()
        .getDynamicLink(intent)
        .addOnCompleteListener { task ->
            if (!task.isSuccessful) {
                // Handle error
                // ...
            }

            val invite = FirebaseAppInvite.getInvitation(task.result)
            if (invite != null) {
                // Handle invite
                // ...
            }
        }
MainActivity.kt

Then, in the callback, you can get the data passed in the Dynamic Links link parameter by calling the getDeepLink() method:

String link = AppInviteReferral.getDeepLink(intent);
MainActivity.java

val link = AppInviteReferral.getDeepLink(intent)
MainActivity.kt

Now that you have the value of the link parameter, display the linked content to your user.