需求
客户希望通过 H5 将用户引流至移动端 App,借助于深度链接可以提高活动推广的效果。
Web JS SDK 使用流程
客户首先在神策分析后台填写深度链接所需参数,成功之后会得到神策分析生成的一个 URL。
客户可以把此 URL 进行推广,例如通过公司官网,第三方网站或 App,短信等渠道。Web JS SDK 主要负责在网站上推广的部分。
用户在网页中点击了上述 URL 之后,浏览器会导航到客户配置的落地页。神策不提供统一的落地页,而是由客户的开发人员编写。在此落地页上,在用户点击"打开App"按钮/链接时调用 Web JS SDK 提供的 openDeeplink() 方法。如果用户已安装 App 会唤起,否则跳转至应用下载地址。
Web JS SDK 的 Deeplink 逻辑流程
- 用户在手机浏览器中访问由神策生成的深度链接,例如 https://sachannledata.debugbox.sensorsdata.cn/sd/JOO/Ma/EGgwao
- 浏览器会发生重定向,跳转时服务器端会把深度参数追加到客户配置的落地页中,例如: 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
- JS SDK 在页面加载后马上根据 URL 中的 deeplink 参数,向神策分析后台发起 Ajax 请求
- 神策分析后台把该应用的配置信息返回,包括下载地址,schemes,AppLink/Universal Links 等。
- 客户代码调用 openDeeplink() 方法后,Web JS SDK 用 Universal Links (在 iOS上 优先采用此方式)或者 URL schemes 方式唤起 App,失败后跳转至应用市场/下载页面
API 介绍
init 中的初始化主要执行如下操作:
- 设置 sensorsdata 属性
- 检查神策 Web JS SDK 是否成功加载
- 检查当前操作系统是否支持,目前只支持 Android 和 iOS
- 检查 server_url 是否为空
- 检查落地页 URL 是否含有 deeplink 参数,若无则停止处理
- 检查解码后的 deeplink 参数值是否符合规范,若不符合要求则停止处理
- 从神策服务器查询深度链接信息,获得本次跳转所需的数据
- 绑定事件监听器监听当前页面的可见性,用来判断是否离开了浏览器,是否需要跳转到下载页面
openDeeplink 主要逻辑:
- 检查本地 deeplink 的数据是否就绪,如果没有数据则停止处理
- 根据操作系统类型(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
客户需要引入包含 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();
});
init() 方法支持传入配置项,目前只有一个配置项 timeout,表示等待唤起 App 的时间(单位: ms,默认 2500)。超时则判断为唤起失败,浏览器会跳转至配置的下载地址。