Web SDK 集成文档

查看DEMO

Web SDK API 参考

引入SDK

更新时间:2016/12/6

在您的页面head部分,直接引入SDK:

……
<html>
<head>
<script src='https://www.appadhoc.com/downloads/sdk/ab.js'></script>
……

AppAdhoc JS 库文件加载之后,本页面的 window 对象里会创建一个 adhoc 对象。所有的 AppAdhoc API 调用都可以通过这个 adhoc 对象来完成。

JS SDK初始化

AppAdhoc JS 库在使用 API 之前必须进行初始化,请调用 adhoc.init(app_key, client_id) 来完成。

注意:如果没有初始化,其他 API 调用均会出错,建议在 ab.js 加载之后尽快调用。

……
<head>
    <script src='https://www.appadhoc.com/downloads/sdk/ab.js'></script>
      <script>
      adhoc.setFlagDef({'isNewHomePage':false})//仅用于编程模式:设置试验变量默认值(获取试验变量失败时使用)
      adhoc.init('app_key')//初始化
    </script>
</head>
<body>
……

请勿在SDK基础上进行自行封装,以免影响到试验逻辑,造成试验无法正常运行。如果确有自行封装的需求,请与客户经理联系,获取注意事项。

其中“app_key” 是在登录 AppAdhoc 后台创建“应用”之后获得的该“应用”的授权标识。

可在AppAdhoc控制台应用列表找到,如下图红线部分:

app_key

其中”client_id” 是一个唯一的 ID,用来代表一个独立访客,可根据需要定义,例如使用 session ID、内部会员 ID 或者随机生成等方法。

如果没有指定 client_id 且 cookie 中没有存储该值,Web SDK 将自动生成一个随机的 client_id,并存储在 cookie 中,之后该浏览器中的调用都将使用该 client_id。

编程模式:根据“试验变量”展示相应内容

在编程模式中“试验变量”的值决定了展示的内容或程序的逻辑。多链接试验和可视化试验不需要此步骤。

注意:试验变量值应由PM或相关A/B Testing需求制定人员在后台提前录入完毕,如下图“版本管理”红线部分:

app_key

展示相应内容需要两步:

1.获取AppAdoc 后台试验变量

通过在您的 Web 页面上调用 adhoc.getExperimentFlags(callback,errorCallback) 来完成的:

<button href="" onclick="adhoc.getExperimentFlags(applyFlags)">测试获得试验变量</button>

2.定义 callback 函数,在函数中根据此页面所使用的试验变量值,显示不同的页面内容。 callback 是一个 JSONP callback 函数,需要在页面代码中定义该函数,在此函数中完成模块相关的操作,模块 flags 通过函数参数传入。

……
<body>
<script>
    function applyFlags(flags) {
      if (flags.get('isNewHomePage') === true)
        var text = " Hey,我是试验版 :) ";
      } else {
        var text = " Hey, 我是原始版本!";
      }
      document.getElementById('flags').innerHTML = text;
    }
  </script>
……

其中,'isNewHomePage' 即是“试验变量“,应与上图中红线标识保持一致,上面的示例代码在获取是否是新的首页后,操作了DOM。

请注意在用户访问到试验页面时,需要触发试验内包含的所有变量才算作进入试验,否则将不会上报试验数据。

在此示例中,“flags.get('isNewHomePage')”算作触发变量“isNewHomePage”。请勿在非试验页面或公用head模板中调用。

注意:如果网络速度较慢,在此 callback 中处理页面的展示可能会造成页面的闪烁。对于涉及到的界面变动部分,建议使用adhoc.hideadhoc.show方法控制元素的隐藏和展示时机。其中,adhoc.hide需要在init之前调用。

上报指标

指标用于量化试验结果的好坏,AppAdhoc 后台中的试验图表根据此数据生成。在可视化试验和多链接合并试验中,您也可以通过此方法定义上报指标。

注意:指标值应由PM或相关AB Test需求制定人员在后台提前录入完毕,如下图“优化指标”红线部分:

优化指标

比如在进入某一逻辑分支后,可以统计点击次数。将上图中的指标“clickTimes”传入函数increment实现上报指标, 每次累加1:

<button href="" onclick="adhoc.increment('clickTimes', 1)">统计点击次数</button>

出站链接的指标统计

针对出站链接的事件跟踪,为保证事件成功上报,请使用以下方法。此回调方法将返回指标上报是否成功的结果,您可根据返回的结果进一步处理。

<script>
var trackOutboundLink = function(url) {
  adhoc.increment('clickTimes', 1, function(err){
       if(err){
           //上报失败会自动重新发送,如果再次发送失败才会执行回调
       }else{
           //上报成功
       }
   });
}
</script>

您还需要在链接中添加(或修改)onclick 属性。请使用以下示例作为自有链接的模型:

<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">查看 example.com</a>

如果需要同时上传多个指标,可以使用以下方法(多个指标将统一上传成功或失败):

<script>
var trackOutboundLink = function(url) {
  adhoc.increment(['stat1', 'stat2', {key: 'stat3', val: 10}], function(err){
       if(err){
           //上报失败会自动重新发送,如果再次发送失败才会执行回调
       }else{
           //上报成功
       }
   });
}
</script>

您还需要在链接中添加(或修改)onclick 属性。请使用以下示例作为自有链接的模型:

<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">查看 example.com</a>

开始试验

恭喜,您完成了AppAdhoc AB Testing Web SDK的埋点集成工作,请通知PM或相关AB Test需求制定人员,点下开始试验按钮吧!

注意:确保app_key, 试验变量字符串,指标字符串与后台截图处一一对应,否则可能出现异常或无试验数据情况。

高级功能 自定义受众定向(需要联系管理员开启)

AppAdhoc Web SDK 会自动把浏览器名称、版本、语言等用户标签自动上传,开发者也可以根据需要给当前用户打上合适的自定义标签,进而实现将不符合条件的用户排除在此次试验之外。比如只想要女性用户,或30岁以下的用户参与试验等。最好在adhoc.init('app_key')前调用。

注意:自定义受众定向条件应由PM或相关AB Test需求制定人员在后台提前录入完毕。

在运行控制/右侧定向试验:

受众定向

选择分组,点击编辑用户群:

受众定向

即得到受众条件的key,在下图例子中,“sex”是key:

受众定向

自定义受众定向有三种情况:

普通自定义:

adhoc.setCustomTags({sex: 'male', age: '20'})

cookie标签自定义:

adhoc.setCustomTagsWithCookies(['your_cookie_1', ' your_cookie_2'])

把当前网页 query 中的参数作为自定义用户标签上传, 例如:http://yourdomain/yourpath?param1&parm2

adhoc.setCustomTagsWithQueryParams(['param_1', 'param_2'])

API 参考

Web SDK API 参考

results matching ""

    No results matching ""