1. Requirement

Customers hope to drive users to the mobile app through H5 and deep linking can improve the effectiveness of campaign promotion.

2. Web JS SDK Usage Process

Customers first fill in the parameters required for deep linking in the Sensors Analytics backend. After successful completion, they will receive a URL generated by Sensors Analytics.

Customers can promote this URL through their company's official website, third-party websites, apps, SMS, and other channels. The Web JS SDK is mainly responsible for the promotion on the website.

After clicking the aforementioned URL in the webpage, the browser will navigate to the landing page configured by the customer. Sensors Analytics does not provide a unified landing page, but it is written by the customer's developers. On this landing page, when the user clicks the "Open App" button / link, the openDeeplink() method provided by the Web JS SDK is called. If the user has installed the app, it will be awakened; otherwise, it will be redirected to the application download page.

2.1. Deeplink Logic for Web JS SDK

  1. When the user visits the deep link generated by Sensors Analytics in the mobile browser, for example https://sachannledata.debugbox.sensorsdata.cn/sd/JOO/Ma/EGgwao
  2. The browser will be redirected, and during the redirection, the server-side will append the deep parameters to the landing page configured by the customer. For example: http://kang335.gitee.io/satest/landing.html?utm_source=1&utm_medium=2&utm_term=3&utm_content=4&deeplink=https%3A%2F%2Fsachannledata.debugbox.sensorsdata.cn%2Fsd%2FJOO%2FEGgwao
  3. The JS SDK immediately initiates an Ajax request to the Sensory Analysis backend according to the deeplink parameter in the URL after the page is loaded
  4. The Sensory Analysis backend returns the application's configuration information, including download links, schemes, AppLink/Universal Links, etc.
  5. After the customer's code calls the openDeeplink() method, the Web JS SDK launches the App through Universal Links (preferably on iOS) or URL schemes. If it fails, it will be redirected to the application market/download page.

2.2. API Introduction

The initialization in init mainly performs the following operations:

  1. Set the sensorsdata property
  2. Check whether the Shenze Web JS SDK successfully loaded
  3. Check whether the current operating system supports it. Currently, only Android and iOS are supported
  4. Check if server_url is empty
  5. Check if landing page URL contains deeplink parameters, stop processing if not
  6. Check if the decoded deeplink parameter value meets the specifications, stop processing if not
  7. Query deep linking information from the Sensing server to obtain the data required for this jump
  8. Bind an event listener to monitor the visibility of the current page to determine if the browser is left and whether to redirect to the download page


Main logic of openDeeplink:

  1. Check if the local deeplink data is ready, stop processing if there is no data
  2. Perform corresponding processing based on the operating system type (Android/iOS). On Android, wake up the app using URL schemes. On iOS, preferentially use Universal Links, followed by URL schemes to wake up the app.


3. Notes

  • The client needs to judge whether the current environment is WeChat in the landing page, and prompt the user to open this page in the browser.
  • For Android apps, only URL schemes are supported, while for iOS, Universal Links + URL schemes are supported.
  • iOS QQ browser cannot wake up the app as the browser does not support it.

4. Usage Examples

The deep link JS plugin is a feature of the Sensing Analytics Web JS SDK.

Assume that the client's landing page is named landing.html, and there is a button on this page. When the user clicks this button, the app will be launched.

<p><a id="theBtn" href='#'>Open the App</a></p>
XML

The client needs to introduce the Sensing Analytics Web JS SDK that includes the deeplink plugin as follows:


<script> (function(para) { var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script',x = null,y = null; if(typeof(w['sensorsDataAnalytic201505']) !== 'undefined') { return false; } w['sensorsDataAnalytic201505'] = n; w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}}; var ifs = ['track','quick','register','registerPage','registerOnce','trackSignup', 'trackAbtest', 'setProfile','setOnceProfile','appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify','login','logout','trackLink','clearAllRegister','getAppStatus']; for (var i = 0; i < ifs.length; i++) { w[n][ifs[i]] = w[n].call(null, ifs[i]); } if (!w[n]._t) { x = d.createElement(s), y = d.getElementsByTagName(s)[0]; x.async = 1; x.src = p; x.setAttribute('charset','UTF-8'); w[n].para = para; y.parentNode.insertBefore(x, y); } })({ sdk_url: '', // 这里填写包含 deeplink 的 sensorsdata.full.js name: 'sensors', server_url: '数据接收地址', heatmap: { clickmap:'default', scroll_notice_map:'not_collect' } }); sensors.quick('autoTrack'); // 初始化深度链接插件 sensors.quick('useAppPlugin', { deeplink: function(deeplink) { deeplink.init();//执行初始化 document.getElementById('theBtn').addEventListener('click', function(e) {　// 监听此按钮的 click 事件 e.preventDefault(); // 阻止浏览器默认跳转行为 deeplink.openDeepLink(); //尝试唤起 App }); } }); </script>
XML

The init() method supports passing configuration items, currently only one configuration item is available, timeout, which represents the waiting time for launching the app (unit: ms, default 2500). If it times out, it is judged as a failed launch, and the browser will redirect to the configured download address.


 sensors.quick('useAppPlugin', { deeplink: function(deeplink) { deeplink.init({timeout: 2900}); // 2.9 秒 document.getElementById('theBtn').addEventListener('click', function(e) { e.preventDefault(); deeplink.openDeepLink(); }); } });
JS