微信小程序弹窗集成

集成神策分析 SDK

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

集成神策弹窗 SDK

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

let sa = require('./dist/wechat/sensorsdata.cmd.js');

// 引入小程序弹窗微信小程序 SDK
let popups = require('./dist/wechat/plugin/sf-sdk-miniprogram/popup.cmd.js');

初始化 SDK

首先您需要初始化神策分析 SDK，具体可参考：微信小程序 SDK 埋点集成使用帮助文档。

神策分析 SDK 初始化完成之后，再初始化神策弹窗 SDK。参考代码如下：

// app.js
let popups = require('./dist/wechat/plugin/sf-sdk-miniprogram/popup.cmd.js');
let sa = require('./dist/wechat/sensorsdata.cmd.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',

  campaign_listener: {
    /*
     * 由返回值决定弹窗是否可以触达，返回 true 可以触达，false 不触达
     * @param SFCampaign
    */
    shouldStart:function(SFCampaign){
      // do something...
    },
	/*
	* 触达点击
  	* @param SFCampaign 触达内容
	*/
 	onClick:function(SFCampaign){
      // do something...
    },
  },
  /**
   * 设置弹窗生命周期回调函数，若未定义就不对指定事件做处理
  */
  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
campaign_listener.onClick API 需要弹窗版本 v.1.19.2 及以上。

实现弹窗回调

在使用 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 中配置的弹窗内容）
 */ 
onLoadFailed: 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

注意

SDK 无法自动处理 openlink 和 customize 类型，需要手动处理跳转操作。

引入弹窗组件

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

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

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

弹窗调试

创建运营计划并测试弹窗

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

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

扫描二维码

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

测试弹窗效果

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