小程序弹窗接入

1、简介

微信小程序弹窗是 GMP ReachSDK 提供的弹窗触达功能。

2、SDK集成

2.1 引入DataFinder上报工具（可选）

请在您的小程序项目中引入DataFinder上报工具

2.2 接入弹窗SDK

接入方式支持NPM包，通过npm install @byte-gmp/gmp-mini-popup下载SDK NPM包，构建NPM包后在App.js文件中引入

import Context from '@byte-gmp/gmp-mini-popup';

2.3 弹窗SDK初始化

使用引入的弹窗SDK进行初始化，需要的数据涉及通过wx.login获取到的用户code。所需传递的数据和使用案例如下

2.3.1 私部代码示例

const that = this;
    wx.login({
      success(res) {
        // 初始化sdk
        Context.sdkInit({
          finderRangers: $$Rangers, // DataFinder返回的函数
          appId: 1, // 项目ID
          mainAccountId: -1, // 租户id，非saas情况下为-1
          webId: '', // 设备id，可选
          wechatAppId: '', // 当前小程序的AppId
          origin: '', // 数据请求地址（域名+gmp：https://e168-2-74.datarangers-onpremise.volces.com/gmp），如您不清楚此地址，请联系您的项目经理
          success(res) { // 成功回调函数
            that.gmpEventTrigger = res; // 请务必将返回值挂载到App的this上，且名称需与后续在页面上引入时传入的key保持一致
            res.Trigger(key)
          },
          fail(res) { // 失败回调函数
          },
          customEventTrigger(popupKey) {
            console.log(popupKey, 'customEventTrigger');
          },
          error(e) {
            console.log(e, '弹窗出错时调用')
          },
          operatingMode: OperatingModeType.Manual,
          reportPopupKey: key => {
            console.log(key,'reportPopupKey');
          },
          initPage: 'pages/index/index',
        })
      }
      that.gmpEventTrigger.initDataByCode(res.code); // 初始化数据
      that.gmpEventTrigger.Trigger(key, params)
    })
    
    // 处于手动模式下若需要弹窗
    this.gmpEventTrigger.triggerPopupData(popupKey, '触发弹窗的pagePath（选填）')

2.3.2 saas代码示例

const that = this;
    wx.login({
      success(res) {
        Context.sdkInit({
          finderRangers: $$Rangers, // DataFinder返回的函数
          appId: 1, // 项目ID
          mainAccountId: 1000, // 租户id
          webId: '', // 设备id，可选
          wechatAppId: '', // 当前小程序的AppId
          origin: '', // 数据请求地址（域名+gmp：https://e168-2-74.datarangers-onpremise.volces.com/gmp），如您不清楚此地址，请联系您的项目经理
          success(res) { // 成功回调函数
            that.gmpEventTrigger = res; // 请务必将返回值挂载到App的this上，且名称需与后续在页面上引入时传入的key保持一致
          },
          fail(res) { // 失败回调函数da
          },
          error(e) {
            console.log(e, '弹窗出错时调用')
          },
          operatingMode: OperatingModeType.Manual,
          reportPopupKey: key => {
            console.log(key,'reportPopupKey');
          },
          initPage: 'pages/index/index',
        })
        that.gmpEventTrigger.initDataByCode(res.code); // 初始化数据
      }
    })
  // 处于手动模式下若需要弹窗
    this.gmpEventTrigger.triggerPopupData(popupKey, '触发弹窗的pagePath（选填）')

2.4 引入弹窗组件

对需要出现弹窗的页面，在对应的json文件中引入SDK中的组件

{
  "usingComponents": {
    "gmp-popup": "sdk路径/components/index"
  }
}

在wxml文件中引入组件并传入初始化时挂载到App上的key

在 2.3.1 中挂载的代码片段 that.gmpEventTrigger = res，值为 gmpEventTrigger

<gmp-popup gmpEventKey="gmpEventTrigger" />

2.5 弹窗接入测试

2.5.1 任务弹窗测试

完成以上步骤可进行测试是否接入成功，可在GMP中创建任务并使其运行，并上报DataFinder上报任务中的事件和对应可能所需的参数，若接入成功则会出现配置好的弹窗

$$Rangers.event('eventName', params);

3、小程序后台配置

请到小程序后台-开发-开发管理-服务器域名中，将上报地址（DataFinder、GMP）设置为合法域名

4、参考示例

可使用小程序代码片段功能查看，成功引入后需进行以下操作

4.1 引入示例

1. 引入代码片段：https://developers.weixin.qq.com/s/8MT3Ncm27hNE

2. 下载相关的包内容：npm install

3. 点击 微信开发者工具-工具-构建npm

4. 在详情-基本信息-AppId中，修改为已在GMP后台，通过三方鉴权方式接入的小程序AppId

4.2 代码片段链接

代码链接：https://developers.weixin.qq.com/s/8MT3Ncm27hNE

5、常见问题

5.1 弹窗没有正常弹出

1. 检查SDK是否正常初始化，回调函数中是否出现报错

2. 检查SDK初始化后，是否正常触发gmp/openapi/v3/miniprogram_popup/getMiniProgramOpenId、openapi/v3/miniprogram_popup/getMiniProgramTask接口

3. 检查希望出现弹窗的页面是否正常接入了弹窗组件，页面中元素是否出现gmp-popup标签，是否在触发事件后出现内容

5.2 数据分析展示异常

1. 检查异常的数据分析的项目id和初始化时传入的项目id是否一致

2. 检查DataFinder的SDK是否正常接入以及是否触发上报函数

3. 检查DataFinder的上报函数是否存在异常，且在DataFinder中是否存在上报的数据

6、参考链接

dataFinder 小程序 sdk 文档：https://www.volcengine.com/docs/6285/65981