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 – la 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!
Sparq.it 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 MobileAppTracking 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 (MAT 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>