mobLink

initMobLink getShareUrl getUrlParams

概述

mobLink封装了Mob官方MobLink SDK的功能。通过该模块开发者可生成不同渠道的推广链接,从而可以追踪新安装(或新注册)用户来源,给下线推广提供了解决方案,同时从Web端打开的页面,可直达App页面,一键唤醒App;首次安装App,即可恢复对应场景。场景还原可以帮助开发者提升App活跃度,降低用户在Web端跳转至App过程中的流失率,新用户在首次打开App时,呈现正是用户想看的内容页面,大大提高用户转化率。MobLink打破了App孤岛 实现Web与App的无缝链接。

模块特点:

① App未安装情况下,通过推广链接可以下载App,并且首次打开App即可获取到推广链接中的参数,这给追溯新用户安装或注册来源提供了解决方案。

② 从Web端打开的页面,可直达App页面,一键唤醒App;首次安装App,即可恢复对应场景。场景还原可以帮助开发者提升App活跃度,降低用户在Web端跳转至App过程中的流失率,新用户在首次打开App时,呈现正是用户想看的内容页面,大大提高用户转化率。;

③ Mob数据后台提供实时反馈的App启动数、应用新增数、页面分享浏览数,开发者可以随时了解用户分享行为和应用拉新情况;

④ 一行代码快速实现网页跳转功能,开发者可以在管理后台实时改变按钮样式,包括应用图标、应用名称、标语、颜色等,保持App一致的视觉体验;

⑤ 多浏览器和终端的适配;

⑥ 接口集成简单,几个步骤即可集成。降低了开发成本,提高了开发效率;

模块适用场景:

① 追溯新用户安装或注册来源,用户通过推广链接可直接打开App注册页,若App未安装则下载安装,同时进入App后开发者能够获取推广链接的信息,从而知道新用户来源。

② 形成上下线关系,用户进入App注册后开发者能够获取推广链接的信息,通过来源或其他参数可形成用户间的上下线关系。

③ 资讯类App,当用户在分享出去的web页面浏览资讯后,引导用户跳转到App,在App上提供给用户更好的体验,也提高了App安装量。

④ 视频类App,当用户在分享出去的web页面播放视频后,引导用户跳转到App,在App上提供给用户更好的体验,也提高了App安装量。

⑤ 直播类App,当用户在分享出去的web页面收看直播后,引导用户跳转到App收看直播,在App上提供给用户更好的体验,也提高了App安装量。

⑥ 电商类App,当用户在分享出去的Web页面查看某个商品时,点击“立即购买”跳转到App,进而做下一步处理。

⑦ 票类(机票、汽车票等)App,当用户在分享出去的Web页面选择出发点和终点后,跳转到App把查询结果呈现给用户。

要使用该模块,开发者需要到Mob官网申请相应App Key等。

测试widget下载链接:https://community.apicloud.com/bbs/thread-123933-1-1.html

申请步骤

1 注册Mob官网账号并登录

到Mob官网http://www.mob.com注册并登陆,分别点击右上角的“注册”和“登入”按钮,分别进行注册和登入即可。

2 添加应用,并给应用添加moblink功能

登陆后在Mob首页点击右上角的“进入后台”按钮进入后台。进入后台后如图,点击左上角的”添加应用”按钮,在弹出的输入框中输入应用名后保存即可,新创建的应用包括Android和iOS两个平台。创建完应用后点击左侧栏的”MobLink”以便添加MobLink功能,点击左侧栏的”MobLink”后要注意,此时会弹出一个选择框,选择经典版mobLink即可,因为本模块使用的mobLink版本是2.2.*,对应经典版的mobLink,添加完MobLink功能后,在MobLink一项下会3个子选项,分别是“概况”,“基础配置”,“页面配置”,相关配置见下面的步骤。

mobLink - 图1

mobLink - 图2

3 获取App Key

如图点击“概况”可查看应用的App Key,右边是App Secret,点击“显示App Secret”即可复制。

mobLink - 图3

4 MobLink功能的基础配置,重要!

如图,点击“基础配置”,配置相关参数,带*号的是必填项,其中两个平台的 “下载/引导地址” 和应用宝的下载地址都是在点击链接后手机上未安装有App,moblink就会链接到这里配置的下载地址下载App,这里的下载地址可以直接链接到app文件地址(apk文件或苹果应用商店),也可以自己做一个页面,该页面提供下载按钮,或直接使用第三方的下载页面,如fir.im,建议使用fir.im (这是网址)。

注意:URI Scheme项配置的格式必须是“xxx://”,Android的URI Scheme项必须是lovemoblink:// ! 因为模块需要,Android的URI Scheme已经写入到模块包中,所以开发者后台的URI Scheme必须与模块包中的一致,即是lovemoblink:// ! ios 的 URI Scheme开发者可自定义(随意),但必须是小写。 如图所示。iOS的“Universal Link”必须打开!否则无法从web跳到App。Android的“App Links”关闭即可,“指纹证书(SHA256)”一项可不配置。

由于在微信中不能够直接跳转到app,开启应用宝跳转功能可解决这个问题,所以开发者要配置应用宝下载链接,配置链接前app需要上线应用宝(搜索 腾讯开放平台),对于ios,在腾讯开放平台后台需要配置苹果商店的链接,使其能够在苹果商店能够找到你的app。ios、Android都要开启应用宝跳转功能,如图所示。

底下的场景恢复有效时间设置成24小时即可。多下载地址可不设置,多下载地址的功能用参数即可实现。

注意:修改配置后必须点击右上角的 保存 按钮才能生效。

mobLink - 图4

5 分享页面的配置和获取需要导入的js代码

(1)如图,点击“页面配置”,这里是可以配置分享页面中“打开App”按钮所在横幅的样式。

mobLink - 图5

(2)点击顶部中间的”引用JS文件”这几个字,进入下面界面,开发者可以在这里获取分享页面(指getShareUrl方法中sharePage参数制定的页面)需要导入的js代码,如图,红色框中的代码一定要记得加入到分享页面中,这行代码包含了你的App key。另外如图标注:path字段在本模块中不需要,开发者需要自行删除path字段。关于分享页面的代码如何写在下面的getShareUrl方法中sharePage参数也有说明。

mobLink - 图6

config.xml的配置

Android配置项

获取到App Key和App Secret后需要在config.xml中配置:
配置feature

  • featureName:loveMobLink
  • paramName:MobAppKey MobAppSecret

MobAppKey MobAppSecret分别为在步骤3获取到的App Key和App Secret。配置示例见下面。

iOS配置项

  • preference名称:urlScheme
  • 值:填写你在mob后台配置的iOS的URI Scheme值,注意这里不包含”://“

配置示例(Android和iOS):

  1. <!--以下是iOS配置项-->
  2. <preference name="urlScheme" value="melink" /><!--填写你在mob后台配置的iOS的URI Scheme值,注意这里不包含"://"-->
  3. <!--以下是Android配置项-->
  4. <!--这里Android不需要配置scheme,mob后台的android scheme必须是lovemoblink://,见步骤4说明-->
  5. <!--loveMobLink,MobAppKey,MobAppSecret都是固定值-->
  6. <feature name="loveMobLink">
  7. <param name="MobAppKey" value="1e98462aw863d" /><!--换成你的mob的app key-->
  8. <param name="MobAppSecret" value="99a44c404872dwd137b2aaec99ff0" /><!--换成你的mob的app secret-->
  9. </feature>

widget\res\Info.plist的配置

该文件是给iOS平台配置的文件,在widget\res下创建文件名为Info.plist的文件,Info.plist内容如下:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  3. <plist version="1.0">
  4. <dict>
  5. <key>MOBAppKey</key><!--固定key值-->
  6. <string>1e984952dge2d</string><!--换成你的mob的app key-->
  7. <key>MOBAppSecret</key><!--固定key值-->
  8. <string>5dg6s2nl04872d103cd137kd85c9w852</string><!--换成你的mob的app secret-->
  9. </dict>
  10. </plist>

widget\res\UZApp.entitlements的配置

该文件是给iOS平台配置的文件,在widget\res下创建文件名为UZApp.entitlements的文件,UZApp.entitlements内容如下:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  3. <plist version="1.0">
  4. <dict>
  5. <key>com.apple.developer.associated-domains</key><!--固定key值-->
  6. <array>
  7. <!--这里换成你在mob后台获取到的iOS的“Universal Link”值-->
  8. <string>applinks:7sel.ulml.mob.com</string>
  9. </array>
  10. </dict>
  11. </plist>

对于iOS,为确保能正常跳转,证书必须开启Associated Domains功能,请到 https://developer.apple.com,选择Certificate, Identifiers & Profiles,选择相应的AppID,开启Associated Domains。注意:当AppID重新编辑过之后,需要更新相应的mobileprovision证书。更新mobileprovision证书步骤请查看http://docs.apicloud.com/Dev-Guide/iOS-License-Application-Guidance 中的 “云编译mobileprovision发布证书制作”或”云编译mobileprovision测试证书制作”。
如果证书没有开启Associated Domains功能,云编译时会报以下错误,请开发者注意。 mobLink - 图7

模块接口

initMobLink

初始化本模块,该方法无参数,需要在调用本模块其他3个方法前调用该方法,一般放在win或frame的初始化方法中。

initMobLink()

示例代码

  1. function apiready() {//frame或win的初始化方法
  2. var demo = api.require('mobLink');
  3. demo.initMobLink();
  4. }

可用性

iOS,Android系统

可提供的1.0.0及更高版本

getShareUrl

获取分享的Url(推广链接),获取该链接后用户在手机浏览器打开该链接(页面),点击”打开App”按钮可调起自己的App。若点击按钮后手机没有安装App,则会弹出下载框供用户下载安装App。获取该Url后可用微信、QQ等第三方分享功能对Url进行分享,也可直接将该Url直接复制到手机浏览器地址栏打开,这样也可以看到效果。跳转到App后开发者可根据需求打开新的前端页面。该方法为耗时方法,若需要多次使用该链接且传入的参数不变,开发者可将结果保存起来供第二次使用,无需调用该方法多次,以节省资源。

注意:用于分享的链接必须是经过getShareUrl生成的链接,以便能确保正确传参,而不是直接用前端页面(sharePage)的地址分享,getShareUrl生成的链接会以mobid=xxxx结尾。

getShareUrl({params},callback(ret))

params

source:

  • 类型:字符串
  • 描述:(可选项)默认””。用于标记链接的来源(链接属于谁的),通过该字段可得知安装或注册App的来源。这个参数可在用户通过链接打开App后通过getUrlParams获取,从而得知用户来源。

params:

  • 类型:json字符串
  • 描述:(可选项)默认{}。开发者自定义的参数,以键值对的形式提供。这些参数可在用户通过链接打开App后通过getUrlParams获取。

sharePage:

  • 类型:字符串
  • 描述:(必填)。用于分享的前端页面地址,该页面由开发者自行定义,需要按照Mob的规则添加相关代码。如下:
  1. <!-- 注意: 以下是sharePage所在页面的代码规则,是服务器中的页面,不是widget中的页面 -->
  2. <!-- 下面这行从mob后台获取,参照文档中的第5步,类似以下代码-->
  3. <script type="text/javascript" src="//f.moblink.mob.com/3.0.1/moblink.js?appkey=这里换成你的app key"></script>
  4. <script type="text/javascript">
  5. /*
  6. 初始化MobLink,页面上有多个元素需要跳转时使用数组方式,有多少个元素需要跳转就有多少个大括号,
  7. el: 固定键值,表示网页上Element的id值,该字段为空或者不写,则表示使用MobLink后台配置的 **浮层配置** 上的打开按钮,即第5步配置的浮层配置。注意:该字段支持selector方式:支持以下3种方式: 1.'.class' 2.'#id1' 3.['#id1','#id2']。
  8. params: 固定键值, 网页需要带给客户端的参数
  9. */
  10. MobLink([
  11. {//mob后台的代码例子中含有path字段,在本模块中path字段不需要,如果有path字段则需要删除,见第5步第2张图的说明。
  12. el: '#abutton',//abutton为元素的id值,注意前面要加#号
  13. params: {
  14. a1: 'a1',//自定义key,value
  15. a2: 'a2',
  16. }
  17. },
  18. {
  19. el: '#bbutton',
  20. params: {
  21. b1: 'b1',
  22. b2: 'b2',
  23. }
  24. }
  25. ])
  26. </script>

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回获取链接状态及链接字符串
  • 内部字段:
  1. {
  2. status:1 //1:获取成功,0:获取失败
  3. msg:"sharePage为空",//错误信息,status为0时有该字段
  4. shareUrl:"http://f.moblink.mob.com/demo/b?mobid=nCS"//分享链接,status为1时有该字段
  5. //获取到shareUrl后,可用微信、QQ等第三方分享功能对shareUrl进行分享,也可将该Url直接复制到手机浏览器地址栏打开,这样也可以看到效果。
  6. }

示例代码

  1. var demo = api.require('mobLink');
  2. demo.getShareUrl({
  3. sharePage:"http://f.moblink.mob.com/demo/b",
  4. params:{"key1":"value1","key2":"value2"},
  5. source:"应用宝"
  6. },function(ret){
  7. if(ret.status){
  8. alert("分享url:"+ ret.shareUrl );
  9. }else{
  10. alert("获取失败 "+JSON.stringify(ret) );
  11. }
  12. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getUrlParams

获取参数的方法。当从web跳到App后,参数也跟着传到了App,使用该方法可以获取到参数,参数包括getShareUrl中设置的参数,也包括网页中设置的参数。当用户点击分享链接(通过getShareUrl方法获取)进入分享页面,点击相应按钮调起App后,该方法可获取分享链接中的参数,即调用getShareUrl方法时传入的params和source参数。同时当分享页面也设置了参数(见getShareUrl方法中的说明),该方法也能获取到网页中设置的这些参数。从而达到追踪新安装(或新注册)用户来源等目的。若点击”打开App”按钮后手机没有安装App,则会跳转到后台配置的下载地址供用户下载安装App,此时在用户第一次打开App时也能获取到相应参数!

注意:由于从Web跳到App需要一定的时间,所以该方法在App刚启动时需要延时执行,使用setTimeout设置延时,一般延时两三秒即可。

小技巧:若你想从web跳到App后打开不同的前端页面,可在获取到参数后,根据参数判断打开新的前端页面即可。

getUrlParams(ret)

ret

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. "source": "应用宝",//对应getShareUrl方法的source参数
  3. "params": {//对应getShareUrl方法的params参数以及在sharePage页面设置的键值对
  4. "key1": "value1",
  5. "key2": "value2"
  6. },
  7. "time": "2018-08-02 18:05:21",//参数从Web传到App的时间
  8. "status": 1 //1:获取成功 0 : 获取失败
  9. }

示例代码

  1. function apiready() {
  2. var demo = api.require('mobLink');
  3. demo.initMobLink();
  4. setTimeout("getPamrams()", 2000);//延时2秒执行
  5. }
  6. function getPamrams() {
  7. var demo = api.require('mobLink');
  8. demo.getUrlParams(function(ret){
  9. console.log(JSON.stringify(ret));
  10. if(ret.status){
  11. alert("获取成功 "+JSON.stringify(ret) );
  12. }else{
  13. alert("获取失败 "+JSON.stringify(ret) );
  14. }
  15. });
  16. }

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本