This article is shared by Amoy user growth front end team – Cat orange

For the author of the tao department user growth team, it is very important to guide users to mobile tao app, this article will share in the mobile browser or other apps in the H5 page is how to handle tao “call” out, here involves the concept of “call end”.

What is call end

The call end here refers to the jump from one APP to another app on the mobile phone, that is, the jump between apps. In hand wash, for example, in many scenarios, the user is not necessarily can directly by hand for open the corresponding product details or venue activities pages, such as on the media advertising, users to share, line scan code, etc., these scenes in the user first open the tao is not the hand, and may be a trill, headlines these external media, weibo, nailing these social sharing channel, Or the phone has its own browser or other scanning tools. At this time, we need to guide the user to jump from these apps to mobile phone after the user opens the web page or clicks on the link. If the user has not installed the download page to download. First of all, it will involve how to realize the mutual invocation between apps.

Basic principle of call end

URL Scheme

For technical students, URL Scheme should be familiar, common HTTP/HTTPS/FTP belong to Scheme. In simple terms, URL is the unified resource locator (commonly known as “URL”), where Scheme is to identify the access mode of resources. In iOS and Android, it can be simply understood as which app to open this URL. For example, we write an A tag on the page:

<a href="taobao://m.taobao.com">Open the taobao</a>
Copy the code

If it is installed, click this link on the opening page of other apps, and it will pull up Handtao. If it is not installed, there will be no reaction after clicking. Taobao :// Alipays :// Taobao :// Of course, an APP may have more than one scheme. Both AoTao and Alipay have multiple schemes to deal with different scenarios. There are many other things you can do with Scheme, such as using tel:// on iOS.

<a href="tel://13888888888">Make a phone call</a>
Copy the code

There are a lot of interesting features that can be combined with iOS shortcuts, but I won’t go into that here. Both iOS and Android support this method of evocation, so how does the system know how to open taobao:// by hand instead of using other apps?

The Scheme is registered

If you want your app to be evoked by Scheme, you need to register your Scheme with the system in the APP in advance. Android can register a Scheme with intent-filter in the manifest, while iOS can register a Scheme with URL types in the info.plist file. The system is only responsible for evoking the corresponding APP according to Scheme. As for what to do after opening the APP, the APP needs to realize the analysis of URL parameters and make corresponding processing logic.

Intent

In Chrome, android does not support the use of ordinary URL schemes to evoke other apps. It only supports the Intent protocol to evoke other apps. In essence, there is no big difference with URL Schemes, but there are some differences in the construction of links

applicability

URL Scheme this way is compatible, no matter android or iOS can support, is currently the most common way to “summon” mobile shopping. But it also has some obvious downsides:

  1. It is impossible to accurately judge whether the call is successful or not, because essentially this method is to open a link, and it is not an ordinary HTTP link, so if the user has not installed the corresponding APP, there will be no response in the browser after trying to jump. Even in some webviews, an error page or error pop-up box like “Taobao :// XXXX cannot be opened” will be displayed. The experience is not good enough.
  2. In many browsers and WebViews, there will be a pop-up to tell you whether to open the corresponding APP, which may cause user loss;
  3. There is a URL Scheme hijacking risk. For example, an unknown APP is registered with the systemtaobao://This scheme, evoking traffic might be hijacked into this app;
  4. Easy to block, app can easily block jumps initiated by URL Scheme.

Universal Links

Universal Links is a feature introduced in iOS 9, which can be used to open the APP directly through the HTTPS link. If the APP is not installed, the corresponding H5 page will be opened. For example, if you install mobile shopping, clicking on the following link in the page will invoke it directly:

<a href="https://b.mashort.cn/">Open the hand tao</a>
Copy the code

The principle is also relatively simple:

  1. Register the domain name you want to support in the APP;
  2. Configure one in the root directory of your domain nameapple-app-site-associatioFile.

For details, please refer to the official document relative to URL Scheme. Universal Links has a great advantage that there is no popup prompt when calling the end, which can reduce part of the loss. For users who have not installed the application, clicking the link will directly open the corresponding page, so we can also do a unified treatment to this situation, such as guiding to a transfer page, can also solve the problem that THE URL Scheme can not accurately judge the call end failure to a certain extent; In terms of overall experience, Universal Links is superior to URL Scheme. But Universal Links also has some downsides:

  1. Only available on iOS;
  2. It can only be triggered by the user actively. For example, the page can not be triggered directly by the page, but the user needs to manually click the page button to arouse the APP.

H5 call compatible

Both URL Scheme and Universal Links essentially open a URL, which can be implemented in several ways in H5:

iframe

The most common way to jump is to use an iframe, by dynamically inserting a hidden iframe that triggers an evocation after the iframeonload:

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';
Copy the code

The advantage of this is that even if the user has not installed the application, the current page will not be redirected to the wrong page.

A label

Safari on iOS 9 and above does not support iframe evocation, so you can generate an A tag and simulate a click:

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); Copy the code

window.location

For intents and universal links, you can simply set window.location.href because they will not jump to the wrong page if the app is not installed. These three methods are compatible with almost all browsers.

Determine whether success is evoked

Either way, there is currently no direct way to know whether the arousal is successful or not in the H5 page. This is also easy to understand, the call itself is to open a URL, even if we open a normal HTTP link through the A tag, as the page itself also can not know whether the page load successfully. However, there are other ways to do this indirectly, mainly by taking advantage of the fact that the current H5 page will be cut to the background when successfully invoked: After triggering the evocation, monitor whether blur or Visibilitychange events are triggered within n seconds. If the event is triggered and Document. hidden is true, it means that the evocation may be successful (of course, the user may also cut away by himself).

 const timer = window.setTimeout((a)= > {
   // Failed callback
 }, 3000);

const successHandler = (a)= > {
 if (document.hidden) {  window.clearTimeout(timer);  } }; window.addEventListener('blur', successHandler, { once: true }); window.addEventListener('visibilitychange', successHandler, { once: true }); Copy the code

Download the reduction

In the actual business, the user will usually want to call the failed to jump to the app download page, to continue to guide the user into the side, but is generally through the jump to the app store download or directly download the APK package, there is no way to install packages during passing parameters, so a user installed app cannot continue after reduction before download page, in the end. In order to enable users to restore previous links after app installation and reduce loss as much as possible, we have implemented a set of “password restore” protocol:

  1. When users click download, the link that they want to open after installation is written into the clipboard according to the format agreed by the agreement;
  2. When the user installs the APP and activates it for the first time, if the “restore password” is retrieved from the terminal, the corresponding page will be opened according to the password.

In this way, even if the user fails to call the app, he or she may finally enter the receiving page inside the app, and to some extent, he or she can not continue to receive the users after downloading the app. It’s not perfect either:

  1. Passwords written to the clipboard can be hijacked, so only links in the whitelist are currently supported to restore;
  2. If the password in the clipboard is overwritten, the restore still cannot succeed;
  3. When users open the APP for the first time after installation, there will be a lot of initial loading, and opening the continuation page at this time will make the overall performance worse.
  4. If the user is more used to using the clipboard, this method will pollute the user’s clipboard.
  5. The browser restricts the front-end clipboard writing action to a user-triggered synchronization event.

This method can reduce the loss of users as much as possible and let users get a better experience. Although there are some disadvantages, it is also a better treatment after the failure of user call.

Call end solution of hand Amoy

After talking about the call principle, we then from the point of view of hand wash business, hand wash in the need to call the end of the scene and page is very many, summed up about three categories:

  1. Automatic call end: page open automatically initiate call end;
  2. UI call end: page out of the buoy, banner and other UI, click after launch call end;
  3. Page action point call end: click some links in the page to arouse the app to open.

We package the calling ability as a front-end SDK, H5 page only needs to introduce the script through the script tag, in SDK, the main implementation of calling protocol and calling strategy control.

Call protocol

After evoking the app, let’s imagine several scenarios:

  1. The user visits an H5 active page outside the site and calls the end to open the same page inside the site.
  2. When users visit the H5 detail page of a product, they need to open the native product detail page when calling the terminal.
  3. Users click on an advertising link, call the end to the station after the user’s crowd tag characteristics, open different pages to undertake.

In other words, after the user calls the terminal, it is not simply to open the same link in the terminal, but to do a lot of personalized processing, at this time, we need to parse the parameters in the URL and do the route distribution in the terminal. In Handtao, all of our inbound traffic passes through an SDK called “Traffic Customs”, which implements a set of protocols that allow us to assemble parameters according to the protocols and open the corresponding follow-up page when the app is invoked. The agreement looks like this:

[scheme]://[host][path]? [... omit various parameters]&h5Url=Copy the code

In the front-end SDK, we encapsulate the protocol assembly process, and the page only needs to pass in simple parameters to achieve arousal.

Call the strategy

In addition to the Amoy department in hand Amoy, we also have mobile phone Tmall, Taobao special edition app, specific to an H5 page, which app should be aroused, should use which arouse method, whether the page is aroused, whether to show the end UI, these things constitute a page call end strategy. We provide a set of call end policy service in Handtao, which delivers the policy configuration used by the page call end through the current page environment (UA, URL and other fields that can be used to identify the environment) :

  1. Calling end target APP: According to the calling end target APP delivered by the server, the corresponding Scheme or Universal Links link is selected from the front-end SDK to assemble the calling end protocol;
  2. Call mode: URL Schemes or Universal Links
  3. Whether to wake up automatically: whether to open the dynamically configurable page is aroused.
  4. Display call UI: Configure the style of the call UI on the page (buoy, popup, banner, etc.) and display it.


That is to say, as long as the page introduces the front-end SDK, you can use the backend configuration to do fine call control, which also constitutes an important part of the growth of mobile users.

The entire app recall process can be summarized as follows:



conclusion

In fact, we can do A lot in the future on this issue, such as providing more refined policy configuration ability, making more accurate UI display of calling end according to regional and crowd information, downloading landing page jump, exploring the optimal inbound link by combining A/B testing, etc. If you are interested, please join us.