Jump to: Formatting the Deep Link URL | iOS | Android | Example Code
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.
Formatting the Deep Link URL
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:
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>
how do I run this only for mobile users?
Does the sample code already take care of that
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!
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?
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!
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.
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.
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?
Hello Matthew,
While it is possible to detect the user's OS in order to use the correct deep link for said OS, implementing the entire logic within Javascript isn't always successful given differences between Android and iOS. For more information on currently known issues with deep linking and mobile browsers, please see Android and iOS Browser Capability with Deferred Deep Linking.
To view how others have handled detecting OS within the mobile web context, please see the following external resources:
https://stackoverflow.com/questions/21741841/detecting-ios-android-operating-system
https://github.com/ahand/mobileesp#svn/JavaScript