集成神策分析 SDK

在使用弹窗 SDK 之前，请确保已经集成了神策分析微信小程序 SDK，版本需要在 v 1.13.25 及以上。详细集成步骤请参照微信小程序 SDK 埋点集成使用帮助文档。

集成神策弹窗 SDK

从 GitHub 获取神策弹窗微信小程序 SDK popup.cmd.js 和微信小程序自定义组件 popup-component；

在小程序项目引入神策弹窗微信小程序 SDK popup.cmd.js 和微信小程序自定义组件 popup-component

let sa = require('./sensorsdata.min.js');

// 引入小程序弹窗微信小程序 SDK
let popups = require('./popup.cmd.js');

初始化 SDK

首先您需要初始化神策分析 SDK，具体可参考：微信小程序 SDK 埋点集成使用帮助文档。
神策分析 SDK 初始化完成之后，再初始化神策弹窗 SDK。参考代码如下：

// app.js
let popups = require('./popup.cmd.js');
let sa = require('./sensorsdata.min.js');

// 设置神策分析 SDK 初始化参数
sa.setPara({
server_url: 'https://jssdkdata.debugbox.sensorsdata.cn/sa?project=xubo',
autoTrack:{
mpClick: true
}
});

// 注册神策弹窗 SDK 并配置初始化参数
sa.usePlugin(popups, {
// 是否打印 log 日志
show_log: true,
// SFO 地址，由 SF 后端提供，sfo 在线服务地址
api_base_url: 'https://apimapping.debugbox.sensorsdata.cn/debugbox/sf21-test-sfo/8202/api/v2',
app_id: '小程序的 appid',

/**
* 设置弹窗生命周期回调函数，若未定义就不对指定事件做处理
*/
popup_listener: {

/**
* 对弹窗点击事件，绑定事件处理函数
* @param {string} plan_id 计划ID
* @param {object} valueObj 弹窗内容对象（在 sf 中配置的弹窗内容）
*/
onClick: function(plan_id, valueObj) {
console.log('plan_id: ', plan_id, ' valueObj: ', valueObj);
},

/**
* 弹窗加载成功时，绑定的事件处理函数
* @param {string} plan_id 计划ID
*/
onLoadSuccess: function(plan_id) {
console.log('加载弹窗成功： ', plan_id);
},

/**
* 弹窗加载失败时，绑定的事件处理函数
* @param {string} plan_id 计划ID
* @param {string} code 错误码
* @param {string} message 错误信息
*/
onLoadFailed: function(plan_id, code, message) {
console.log('计划： ', plan_id, ' code: ', code, ' meaage: ', message);
}
},
});

// 神策分析 SDK 完成初始化
sa.init();

注意事项
由于微信小程序对所有的 https 请求做域名校验，故需要在小程序管理平台配置域名白名单，需配置的域名如下：

神策数据接收地址域名
神策推荐平台域名（一般神策分析域名和神策推荐是同一个域名，故只配置一个）
神策图片资源域名：https://sf-static.sensorsdata.cn

初始化参数 app_id 相关注意事项：
配置的小程序的 app_id 需要在神策智能运营平台完成授权

可以在微信公众平台——开发管理——开发设置中获取小程序的 app_id
*

|

实现弹窗回调

在使用 sa.usePlugin 注册弹窗时，可以通过该函数第二个参数的 popup_listener 属性来设置对弹窗的回调监听。popup_listener 对象包含了 3 个回调函数。

设置弹窗按钮点击回调

当用户点击弹窗上的按钮、图片或遮罩时，SDK 会触发 onClick 回调方法。

/**
* 对弹窗点击事件，绑定事件处理函数
* @param {string} plan_id 计划ID
* @param {object} valueObj 弹窗内容对象（在 sf 中配置的弹窗内容）
*/
onClick: function(plan_id, valueObj) {
console.log('plan_id: ', plan_id, ' valueObj: ', valueObj);
}

设置弹窗加载成功回调

在弹窗加载成功时，SDK 会调用 onLoadSuccess 回调方法。

/**
* 弹窗加载成功时，绑定的事件处理函数
* @param {string} plan_id 计划ID
*/
onLoadSuccess: function(plan_id) {
console.log('加载弹窗成功： ', plan_id);
},

设置弹窗加载失败回调

在弹窗加载失败时，SDK 会调用 onLoadFailed 回调方法。

/**
* 对弹窗点击事件，绑定事件处理函数
* @param {string} plan_id 计划ID
* @param {object} valueObj 弹窗内容对象（在 sf 中配置的弹窗内容）
*/
onClick: function(plan_id, valueObj) {
console.log('plan_id: ', plan_id, ' valueObj: ', valueObj);
}

目前弹窗内容对象中返回的按钮点击类型即：valueObj.type 值有：关闭弹窗、打开链接、复制文本、自定义链接、跳转当前小程序、跳转其他小程序。对应关系如下：

序号	类型	弹窗响应	value
1	关闭弹窗	点击后弹窗关闭	close
2	打开链接	点击后弹窗关闭	openlink
3	复制文本	点击后弹窗不关闭	copy
4	自定义链接	点击后弹窗关闭	customize
5	跳转当前小程序	点击后弹窗关闭，打开当前小程序指定路径	navigateTo
6	跳转其他小程序	点击后弹窗关闭，打开其他小程序指定路径	navigateToMiniProgram

引入弹窗组件

在小程序项目的所有需要渲染弹窗的页面中引入弹窗组件。例如在 index 页面引入：

// index.json
{
"usingComponents": {
"popup-component": "popup-component/popup-component" // 注意组件所在路径
}
}

// index.wxml
<popup-component id="sensors_popup"></popup-component> // 把此组件放在 index.wxml 的页面的任意位置

弹窗调试

创建运营计划并测试弹窗

在神策智能运营中创建运营计划，并在配置好触达配置后，在右侧的 "测试弹窗" 按钮中打开二维码。

二维码位置：「神策智能运营」——「创建计划」——「触达配置」——「完成触达配置」——「测试弹窗」

扫描二维码

点击「测试弹窗」打开二维码，微信扫码二维码，跳转微信小程序查看弹窗效果。

测试弹窗效果

微信扫描二维码后，查看弹窗后的关闭弹窗、点击按钮等效果与创建的运营计划是否一致。