You need to enable JavaScript to run this app.
导航
小程序弹窗接入
最近更新时间:2023.12.04 15:08:56首次发布时间:2023.01.09 19:16:35

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。所需传递的数据和使用案例如下

参数名参数类型必填说明
finderRangers函数DataFinder返回的调用函数
appIdnumberGMP后台的项目ID
mainAccountIdnumber租户ID,仅在Saas情况下存在。私域情况下为-1
webIdstring设备ID
wechatAppIdstring当前小程序的AppId
originstring数据请求地址
success函数成功回调函数,在此需要将返回值挂载到App上,且挂载的名称需要和后续调用SDK组件时传递的key保持一致
fail函数失败回调函数
error函数出现错误时回调函数
operatingModeOperatingModeType操作模式,默认为自动模式OperatingModeType.Auto,变为手动模式OperatingModeType.Manual后将需要基于 key 手动触发弹窗

reportPopupKey

key => {
console.log(key,'手动模式下触发事件后的弹窗key');
}

需要与操作模式同时使用,当选择手动模式后,SDK会将弹窗Key通过该函数传出

initPagesring初始化弹窗时,若有事件,会希望在哪个页面弹窗(一般传首页)

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/getMiniProgramOpenIdopenapi/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