集成 Web JS SDK
在使用 Web 弹窗 SDK 之前，请确保已经同步集成了 Web JS SDK，版本需要在 v1.17.2 及以上。详细集成步骤请参照 Web SDK 集成文档。
集成 Web 弹窗 SDK
引入Web 弹窗 SDK，初始化 Web 弹窗，参考代码如下：
<script src="在 github 下载新版本的 sensorsdata.min.js"></script>
<script src="在 github 下载新版本的 webPopup.min.js"></script>
<script>
var sensors = window['sensorsDataAnalytic201505'];
sensors.init({
server_url: 'http://test-syg.datasink.sensorsdata.cn/sa?token=xxxxx&project=xxxxxx',
heatmap:{scroll_notice_map:'not_collect'},
is_track_single_page:true,
use_client_time:true,
send_type:'beacon'
});
sensors.use('WebPopup',{
api_base_url:'在线服务地址',
popup_campaign_listener:{
shouldStart:function(SFCampaign){
// ...
return true;
},
onStart:function(SFCampaign){
},
onFailed:function(SFCampaign,errorCode,errorMessage){
},
onEnd:function(SFCampaign){
}
}
}
)
sensors.quick('autoTrack');
</script>初始化 SDK
使用 sensors.use('WebPopup') 进行Web 弹窗的初始化，参考代码如下：
sensors.use('WebPopup',{
api_base_url:'弹框请求服务端的接口地址',
popup_campaign_listener:{
/*
* 由返回值决定弹窗是否可以触达，返回 true 可以触达，false 不触达
* @param SFCampaign
*/
shouldStart:function(SFCampaign){
// do something...
},
/*
* 触达开始回调函数
* @param SFCampaign
*/
onStart:function(SFCampaign){
// do something...
},
/*
* 触达点击
* @param SFCampaign 触达内容
*/
onClick:function(SFCampaign){
// do something...
}, /*
* 触达结束回调函数
* @param SFCampaign
*/
onEnd:function(SFCampaign){
// do something...
},
/*
* 触达失败回调函数
* @param SFCampaign
*/
onFailed:function(SFCampaign,errorCode,errorMessage){
// do something...
}
}
}
)参数配置：
- api_base_url：字符串类型，弹窗请求服务端的接口地址。
- popup_campaign_listener：对象类型，设置弹窗触达的监听。
- shouldStart(SFCampaign) 由返回值决定弹窗是否可以触达，返回 true 可以触达，false 不触达。
- onStart(SFCampaign) 触达开始的回调函数。
- onEnd(SFCampaign) 触达结束的回调函数。
- onFailed(SFCampaign,errorCode,errorMessage) 触达失败的回调函数。
- onClick(SFCampaign) 触达点击。
设置弹框回调
设置是否触达回调
通过 shouldStar 函数返回值，可以控制弹窗是否可以触达，返回 true 可以触达，返回 fasle 则表示不会触达。
/*
* 由返回值决定弹窗是否可以触达，返回 true 可以触达，false 不触达
* @param SFCampaign
*/
shouldStart:function(SFCampaign){
// do something...
} 设置触达开始回调
自定义触达依赖 popup_campaign_listener 参数的 onStart 回调，触达开始会执行 onStart 回调函数。
onStart:function(SFCampaign){
// do something...
}设置触达点击回调
自定义触达点击 SDK 会调用 onClick 回调函数。
onClick:function(SFCampaign){
// do something...
}设置触达结束回调
触达结束 SDK 会调用 onEnd 回调函数，由于 Web 弹窗只支持自定义触达，不支持预制弹窗。自定义触达结束不受 SDK 控制，所以自定义触达不执行 onEnd 回调函数。
onEnd:function(SFCampaign){
// do something...
}设置触达失败回调
触达失败会执行 onFailed 回调函数，并且将错误码和错误信息作为参数传入回调函数中。
onFailed:function(SFCampaign,errorCode,errorMessage){
// do something...
}回调参数说明
SFCampaign 是回调函数的参数，其类型是 Object ，具体格式：
{
planId: 'xx',// 计划 ID，为下发字段的 plan_id 获取 ，对于测试弹窗该字段为 undefined
name:'xx',// 计划名称，为下发字段的 cname 获取 ，对于测试弹窗该字段为 undefined
content:"{}" // 计划内容，为下发计划字段的 popup_window_content.content，为 JSON 字符串
type: 'xx' // 触达类型，为下发字段的 popup_window_content.popup_type，CUSTOMIZED 表示自定义触达，PRESET 表示预制弹窗。
}
onFailed 回调函数除 SFCampaign 参数外还有 errorCode 、errorMessage 参数，errorCode 错误码，errorMessage 错误信息。具体错误码对应信息如下：
| 错误码 | 错误信息 |
|---|---|
| 1001 |
预览信息解析失败，请检查计划配置 |
|
1003 |
对照组 |
|
1004 |
campaignShouldStart 接口返回 false |
|
1005 |
计划下发 is_trigger 为 false |
|
1006 |
自定义触达计划未实现弹窗生命周期回调 |
测试弹窗
创建运营计划
在神策智能运营中创建自定义弹窗运营计划
平台类型选择 【web】
配置好触达配置后，点击【测试弹窗】—— 【web】
测试弹窗效果
在输入框输入测试弹窗的页面地址，点击【预览弹窗】按钮，会在新标签页打开输入框填写的测试弹窗页面，并且执行页面中的 popup_campaign_listener.onStart 回调函数。