需求

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

Web JS SDK 使用流程

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

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

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

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，失败后跳转至应用市场/下载页面

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。


注意事项

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

使用示例

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

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

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

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

  import sensors from '../sensorsdata.esm.js';
  // 初始化深度链接插件
  var deeplink = sensors.use('Deeplink',{timeout: 2900});
  sensors.init(...);
  sensors.quick('autoTrack');
  document.getElementById('theBtn').addEventListener('click', function(e) {
       e.preventDefault();
       deeplink.openDeepLink();
  });
XML

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