1. 需求

客户希望通过 H5 将用户引流至移动端 App，借助于深度链接可以提高活动推广的效果。

2. Web JS SDK 使用流程

客户首先在神策分析后台填写深度链接所需参数，成功之后会得到神策分析生成的一个 URL。

客户可以把此 URL 进行推广，例如通过公司官网，第三方网站或 App，短信等渠道。Web JS SDK 主要负责在网站上推广的部分。

用户在网页中点击了上述 URL 之后，浏览器会导航到客户配置的落地页。神策不提供统一的落地页，而是由客户的开发人员编写。在此落地页上，在用户点击"打开App"按钮/链接时调用 Web JS SDK 提供的 openDeeplink() 方法。如果用户已安装 App 会唤起，否则跳转至应用下载地址。

2.1. Web JS SDK 的 deeplink 逻辑流程

  1. 用户在手机浏览器中访问由神策生成的深度链接，例如 https://sachannledata.debugbox.sensorsdata.cn/sd/JOO/Ma/EGgwao
  2. 浏览器会发生重定向，跳转时服务器端会把深度参数追加到客户配置的落地页中，例如: 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. JS SDK 在页面加载后马上根据 URL 中的 deeplink 参数，向神策分析后台发起 Ajax 请求
  4. 神策分析后台把该应用的配置信息返回，包括下载地址，schemes，AppLink/Universal Links 等。
  5. 客户代码调用 openDeeplink() 方法后，Web JS SDK 用 Universal Links （在 iOS上 优先采用此方式）或者 URL schemes 方式唤起 App，失败后跳转至应用市场/下载页面

2.2. API 介绍

init 中的初始化主要执行如下操作：

  1. 设置 sensorsdata 属性
  2. 检查神策 Web JS SDK 是否成功加载
  3. 检查当前操作系统是否支持，目前只支持 Android 和 iOS
  4. 检查 server_url 是否为空
  5. 检查落地页 URL 是否含有 deeplink 参数，若无则停止处理
  6. 检查解码后的 deeplink 参数值是否符合规范，若不符合要求则停止处理
  7. 从神策服务器查询深度链接信息，获得本次跳转所需的数据
  8. 绑定事件监听器监听当前页面的可见性，用来判断是否离开了浏览器，是否需要跳转到下载页面


openDeeplink 主要逻辑：

  1. 检查本地 deeplink 的数据是否就绪，如果没有数据则停止处理
  2. 根据操作系统类型（Android/iOS）分别做相应的处理。在 Android 上以 URL schemes 方式唤起 App，在 iOS 上优先用 Universal Links，其次用 URL schemes 方式唤起 App。


3. 注意事项

  • 客户需要在落地页中自行判断是否当前为微信环境，提示用户在浏览器中打开此页面。
  • 对于Android app目前只支持 URL schemes 方式，在 iOS 中支持 Universal Links + URL schemes 方式。
  • iOS QQ 浏览器不能唤起 App，浏览器不支持。

4. 使用示例

深度链接 JS 插件是神策分析 Web JS SDK 的一个功能。

假设客户的落地页名为 landing.html，客户在此页面上有一个按钮，用户点击此按钮会唤起 App

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

客户需要引入包含 deeplink 插件的神策分析 Web JS SDK，如下：

<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

init() 方法支持传入配置项，目前只有一个配置项 timeout，表示等待唤起 App 的时间（单位: ms，默认 2500）。超时则判断为唤起失败，浏览器会跳转至配置的下载地址。

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