Deep Linking to Your Mobile App from Your Website

Last Updated September 27, 2017

To use a deep link URL from your own mobile website into your mobile app, simply include some JavaScript in the head of your HTML page that opens your deep link URL on page load. If the user already has the app installed on their device, then their browser will recognize the URL scheme for your app and open your app to the specified screen – et voila, deep linking!

For more information about deep link URLs, please visit How to Deep Link to Your Mobile App from Your Website.

It is very important to make sure that when you try to open a deep link URL with Javascript that the URL is properly formatted for the device and browser. If you do not use the appropriate deep link URL for the browser/platform, then a user may be redirected to a “Page Not Found”, which is most likely not the user experience you prefer!

Mobiledeeplinking.org provides the best documentation on how to create properly formatted Invoke URLs. You can also reference the technical documentation provided by the native platforms themselves.

iOS

For iOS, reference the ‘Registering Custom URL Schemes’ section for information on how to set up URL schemes and handle deep links in your app delegate:

https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.html#//apple_ref/doc/uid/TP40007072-CH6-SW11

Android

On Android, reference how to set a URL data scheme in an intent filter:

http://developer.android.com/training/basics/intents/filters.html

Learn how to read the data from the intent when your app is launched:

http://developer.android.com/guide/topics/manifest/data-element.html

If your Application and Activities are instrumented according to our Android Quick Start guide, then the opened url should automatically be recorded as the referral source for the app launch.

However, note that Chrome on Android has a different URL format than the standard Android browser:

https://developer.chrome.com/multidevice/android/intents

Example Code

Below is example code that first tries to open the app for existing users (with the app already installed) and redirect new users to download the app via a TUNE link to the app store.

You should only run the Javascript code for your mobile users or only for the mobile platform that you have an app for.

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0" />
    <title>Site Name</title>
    <style>@media screen and (max-device-width:480px){body{-webkit-text-size-adjust:none}}</style>
 
    <!-- implement javascript on web page that first first tries to open the deep link
        1. if user has app installed, then they would be redirected to open the app to specified screen
        2. if user doesn't have app installed, then their browser wouldn't recognize the URL scheme
        and app wouldn't open since it's not installed. In 1 second (1000 milliseconds) user is redirected
        to download app from app store.
     -->
    <script>
    window.onload = function() {
    <!-- Deep link URL for existing users with app already installed on their device -->
        window.location = 'yourapp://app.com/?screen=xxxxx';
    <!-- Download URL (TUNE link) for new users to download the app -->
        setTimeout("window.location = 'http://hastrk.com/serve?action=click&publisher_id=1&site_id=2';", 1000);
    }
    </script>
</head>
<body>
 
    <!-- button to Download App for new app users -->
    <form action="http://hastrk.com/serve?action=click&publisher_id=1&site_id=2" target="_blank">
        <input type="submit" value="Download" />
    </form>
 
    <!-- button to Open App to specific screen for existing app users -->
    <form action="yourapp://app.com/?screen=xxxxx" target="_blank">
        <input type="submit" value="Open App" />
    </form>
 
</body>
</html>

8 Comments

Leave a reply
  • jeff  •  September 1, 2017

    how do I run this only for mobile users?
    Does the sample code already take care of that

    Reply
    • Kimberli Morrison  •  September 5, 2017

      Hi Jeff, thanks for your comment! The deeplinks should only affect your app because the browser recognizes the URL scheme for your app, and will open your app to the specified screen. Also please keep in mind this is sample code as noted. If you have further questions, I recommend describing your situation in more detail to our customer support team at http://support@tune.com. They'll work with you to figure things out!

      Reply
  • kishore  •  September 14, 2017

    I tried out this implementation and it is working in both android and ios.However it doesn't, when opened from ios safari browser.Any Idea on that?

    Reply
    • Kimberli Morrison  •  September 14, 2017

      Hi, thanks for your comment! Theoretically deep links should open up the mobile app. Depending on how you are testing this is possible something went wrong. For more information, I recommend describing your situation in more detail to our customer support team at http://support@tune.com. They'll work with you to figure things out!

      Reply
  • Dan Kaufhold  •  January 25, 2018

    From iOS 9.2 onwards custom url schemes are deprecated and will cause an alert with an error on Safari if the app is not installed. They require universal links now.
    On other browsers they will just not do anything and the above solution works.

    Reply
    • Divya  •  February 15, 2018

      Do we have any specific solution for the Safari error popup? Is it possible to determine whether the app is installed or not from the website.

      Reply
  • matthew  •  January 31, 2018

    what's the best mechanism to determine if the user is on an iphone vs android, so that the proper deep link can be set?

    Reply