需求
客户希望通过 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
<p><a id="theBtn" href='#'>Open the App</a></p>
客户需要引入包含 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>
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();
});
}
});