How to Seamlessly Deep Link Users from H5 to the Taobao App

For the Taobao user growth team, guiding users to the Taobao app is crucial, and this article shares how to "summon" the app from mobile browsers or other H5 pages, introducing the concept of deep linking.

What Is Deep Linking

Deep linking refers to jumping from one app to another via a custom URL scheme (e.g.,

taobao://

), used when users first open external media or browsers before reaching the desired product page.

URL Scheme

Developers are familiar with URL schemes such as http, https, and ftp. In an H5 page you can write an

a

tag like:

<code>&lt;a href="taobao://m.taobao.com"&gt;Open Taobao&lt;/a&gt;</code>

If the Taobao app is installed, clicking the link launches it; otherwise, nothing happens. Similar schemes exist for Alipay (

alipays://

) and phone dialing (

tel://

).

Scheme Registration

To enable deep linking, the app must register its scheme: Android uses

intent-filter

in the

AndroidManifest.xml

, while iOS adds URL types in

Info.plist

. The system then launches the appropriate app when the scheme is invoked.

Intent (Android Chrome)

Chrome on Android does not support ordinary URL schemes for app launch; it uses the Intent protocol. Documentation: https://developer.chrome.com/multidevice/android/intents

Applicability of URL Scheme

Cannot reliably detect launch success; if the app is not installed, the browser may show an error page.

Browsers/webviews often show a prompt, causing potential user loss.

Scheme hijacking risk if another app registers the same scheme.

Easy for apps to block scheme-based jumps.

Universal Links

Introduced in iOS 9, Universal Links use standard https URLs to open the app, falling back to an H5 page if the app is absent. Example:

<code>&lt;a href="https://b.mashort.cn/"&gt;Open Taobao&lt;/a&gt;</code>

To enable them, the app registers supported domains and places an

apple-app-site-association

file at the domain root.

No pop‑up prompts, reducing user loss.

For users without the app, the link can redirect to a middle page to handle fallback.

Only works on iOS.

Requires explicit user interaction (e.g., clicking a button) to trigger the launch.

H5 Deep Linking Compatibility

iframe

Insert a hidden iframe with the scheme URL; the

onload

event triggers the launch:

<code>iframe = doc.createElement('iframe');
iframe.frameborder = '0';
iframe.style.cssText = 'display:none;border:0;width:0;height:0;';
doc.body.appendChild(iframe);
iframe.src = 'taobao://m.taobao.com';
</code>

a tag (iOS 9+ Safari)

Generate an

a

element and simulate a click:

<code>var a = document.createElement('a');
a.setAttribute('href', url);
a.style.display = 'none';
document.body.appendChild(a);
var e = document.createEvent('HTMLEvents');
e.initEvent('click', false, false);
a.dispatchEvent(e);
</code>

window.location

For Intent and Universal Links, setting

window.location.href

safely redirects without error pages.

Detecting Deep Link Success

Since H5 cannot directly know if the app opened, listen for

blur

or

visibilitychange

within a short timeout. If

document.hidden

becomes true, the launch likely succeeded.

<code>const timer = window.setTimeout(() => {
  // failure callback
}, 3000);
const successHandler = () => {
  if (document.hidden) {
    window.clearTimeout(timer);
  }
};
window.addEventListener('blur', successHandler, {once: true});
window.addEventListener('visibilitychange', successHandler, {once: true});
</code>

Download Restoration (Clipboard Token)

If deep linking fails, the page writes a restoration token to the clipboard before redirecting to the app store. After installation, the app reads the token and navigates to the original H5 page. This method mitigates loss but has drawbacks such as token hijacking, clipboard overwrite, and platform restrictions.

Taobao Deep Linking Solution

Taobao encapsulates deep linking in a front‑end SDK. H5 pages only need to include the SDK script, which handles protocol assembly and strategy control. Three typical scenarios are:

Automatic deep link on page load.

UI‑triggered deep link via banners or floating buttons.

Action‑point deep link from specific links.

The SDK builds a protocol like

[scheme]://[host][path]?...&h5Url=[target H5 link]

and selects the appropriate scheme or Universal Link based on server‑provided strategy configuration (target app, method, auto‑launch flag, UI display).

Conclusion

Deep linking can be further refined with granular strategy configs, regional targeting, A/B testing, and better fallback pages, offering richer user experiences and reduced loss.