Deep Linking to Your Mobile App from Your Website | TUNE Docs (Legacy)

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!

For more information about deep link URLs, 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".

For information on how to create properly formatted Invoke URLs, 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>

Select a preferred platform.