集成 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>

CODE

初始化 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...
         }
       }
     }
  )

CODE

参数配置：

api_base_url：字符串类型，弹窗请求服务端的接口地址。
popup_campaign_listener：对象类型，设置弹窗触达的监听。
- shouldStart(SFCampaign) 由返回值决定弹窗是否可以触达，返回 true 可以触达，false 不触达。
- onStart(SFCampaign) 触达开始的回调函数。
- onEnd(SFCampaign) 触达结束的回调函数。
- onFailed(SFCampaign,errorCode,errorMessage) 触达失败的回调函数。
- onClick(SFCampaign) 触达点击。

自定义触达

名词解释

名词	解释 / 定义	备注
自定义触达	使用神策智能运营，满足运营条件后，客户可以自定义的触达方式，例如可以发券、弹窗、跳转、红包雨等等

API 使用

在初始化 Web 弹窗时，可以使用 popup_campaign_listener 来监听弹窗触达， popup_campaign_listener 提供了四个回调监听。其中 onStart 函数在初始化 Web 弹窗是必须要实现的，由于 Web 弹窗目前只支持自定义触达，自定义触达必须实现 popup_campaign_listener 的 onStart 函数。

版本要求

Web 弹窗 SDK v1.25.3 及以上版本

Web JS SDK v1.17.2 及以上版本

设置是否触达回调

通过 shouldStar 函数返回值，可以控制弹窗是否可以触达，返回 true 可以触达，返回 fasle 则表示不会触达。

/*
          * 由返回值决定弹窗是否可以触达，返回 true 可以触达，false 不触达
          * @param SFCampaign
          */
          shouldStart:function(SFCampaign){
                // do something...
          }

CODE

设置触达开始回调

自定义触达依赖 popup_campaign_listener 参数的 onStart 回调，触达开始会执行 onStart 回调函数。

onStart:function(SFCampaign){ 
   // do something...
}

CODE

设置触达点击回调

自定义触达点击 SDK 会调用 onClick 回调函数。

onClick:function(SFCampaign){ 
   // do something...
}

CODE

设置触达结束回调

触达结束 SDK 会调用 onEnd 回调函数，由于 Web 弹窗只支持自定义触达，不支持预制弹窗。自定义触达结束不受 SDK 控制，所以自定义触达不执行 onEnd 回调函数。

onEnd:function(SFCampaign){
   // do something...
}

CODE

设置触达失败回调

触达失败会执行 onFailed 回调函数，并且将错误码和错误信息作为参数传入回调函数中。

onFailed:function(SFCampaign,errorCode,errorMessage){
 // do something...
}

CODE

回调参数说明

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 表示预制弹窗。
}

CODE

onFailed 回调函数除 SFCampaign 参数外还有 errorCode 、errorMessage 参数，errorCode 错误码，errorMessage 错误信息。具体错误码对应信息如下：

错误码	错误信息
1001	预览信息解析失败，请检查计划配置
1003	对照组
1004	campaignShouldStart 接口返回 false
1005	计划下发 is_trigger 为 false
1006	自定义触达计划未实现弹窗生命周期回调

测试弹窗

创建运营计划

在神策智能运营中创建自定义弹窗运营计划

平台类型选择【web】

配置好触达配置后，点击【测试弹窗】—— 【web】

测试弹窗效果

在输入框输入测试弹窗的页面地址，点击【预览弹窗】按钮，会在新标签页打开输入框填写的测试弹窗页面，并且执行页面中的 popup_campaign_listener.onStart 回调函数。