打开 GMP 系统，进入**「管理中心」** -> 「通道管理」 -> 「多端小程序弹窗」 -> 「应用管理」

点击**「新建应用」**，填写 「应用名称」，然后点击 「保存」

3.1 接入 Finder SDK（可选）

❗️注意：此步骤可选，如果有在用的 UBA ，不使用 Finder ，则可以不接入
在 uni-app 项目根目录下安装 @datarangers/sdk-mp：

npm install @datarangers/sdk-mp

3.2 接入弹窗 SDK

1、在 uni-app 项目根目录下安装 @byte-gmp/gmp-mutil-mini-popup-uni-app：

npm install @byte-gmp/gmp-mutil-mini-popup-uni-app

2、在代码 /src/App.vue 里引入

<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';

// 如果 3.1 步骤有接入Finder SDK，则需要下面引入
import $$Rangers from '@datarangers/sdk-mp';
import GmpSdk from '@byte-gmp/gmp-mutil-mini-popup-uni-app';
import { nextTick } from 'vue';

const platform =
  uni.getSystemInfoSync().uniPlatform === 'mp-weixin'
    ? 'wechat'
    : uni.getSystemInfoSync().uniPlatform === 'mp-baidu'
    ? 'baidu'
    : uni.getSystemInfoSync().uniPlatform === 'mp-alipay'
    ? 'zhifubao'
    : 'wechat';

// 如果 3.1 步骤有接入Finder SDK，则需要下面 init 方法
// 参数配置参考 3.4.1
$$Rangers.init({
  app_id: 10000000, // 注意类型是number而非字符串，请替换成自己的Finder的app_id
  channel_domain: 'https://sdk168-238-42gmp.datarangers-onpremise.volces.com', // 请替换成自己的Finder的上报域名
  log: false, // 是否开启日志打印
  auto_report: true, // 是否开启预置事件采集
  enable_ab_test: false,
});
let gmp = GmpSdk.init({
  finderRangers: $$Rangers,
  appId: 1, // 请替换成自己的GMP的appId
  mainAccountId: -1, // 请替换成自己的GMP的mainAccountId
  wechatAppId: 'wxbee437cfe27aec05', // 请替换成自己的wechatAppId
  idType: 'app_id+open_id',
  origin: 'https://e168-238-42gmp.datarangers-onpremise.volces.com/gmpi/gmp', // 请替换成自己的GMP的url
  finderAppId: 10000026, // 注意类型是number而非字符串，请替换成自己的Finder的app_id
  operatingMode: 'Auto',
  popupAppId: '1748182358462304256', // 请替换成自己的GMP的popupAppId
  initPage: 'pages/index/index',
  customEventTrigger(key, params) {
    console.log(key, 'customEventTrigger', params);
  },
  success(res) {
    console.log(res, 'success');
  },
  fail(res) {
    console.log(res, 'fail');
  },
  error(e) {
    console.log(e, 'e');
  },
});
// 如果设置完毕，就可以调用send方法标记可以上报事件了。
// 在SDK的初始化流程中，send方法必须被调用执行过，否则所有事件都不会上报
$$Rangers.send();

onLaunch(() => {
  console.log('App Launch');

  $$Rangers.config({
    user_unique_id: '16', //可以是open_id，也可以union_id等其他业务觉的可以用来标识用户唯一性的值
    user_unique_id_type: 'baseid',
  });

  if (platform === 'wechat') {
    nextTick(() => {
      // 将 finder 实例挂载到全局
      getApp().$$Rangers = $$Rangers;
      
      // 将 弹窗SDK 实例也挂载到全局
    // 这里命名必须与视图 SDK 组件传入的 key 保持一致，如：
    // <gmp-popup gmpEventKey="gmpEventTrigger" />，则这里属性名为 gmpEventTrigger
      getApp().gmp = gmp;
    });
  } else {
    // 将 finder 实例挂载到全局
    getApp().$$Rangers = $$Rangers;
    
    // 将 弹窗SDK 实例也挂载到全局
    // 这里命名必须与视图 SDK 组件传入的 key 保持一致，如：
    // <gmp-popup gmpEventKey="gmpEventTrigger" />，则这里属性名为 gmpEventTrigger
    getApp().gmp = gmp;
  }

  // 参数配置见 3.4.3
  GmpSdk.config({
    id: '16',
    idType: 'baseid',
    platform,
  });

  nextTick(() => {
    // 参数配置见 3.4.4
    GmpSdk.on((key: string) => {
      if (getApp()) {
        (getApp() as any).reportPopupKey = key;
      }
      console.log('reportKey:', key);
    });
  });
});
</script>
<style></style>

3.3 引入弹窗组件

以首页 pages/index/index 弹窗为例

在pages/index/index.vue 文件中引入
❗️注意：在 3.2 中挂载的代码片段 getApp().gmp = gmp，属性名 为 gmp，刚好对应下面传入 <gmp-popup> 的 gmpEventKey 值

<template>
  <view>
    <view className="index"></view>
    <Popup gmpEventKey="gmp" />
  </view>
</template>

<script setup lang="ts">
import Popup from '@byte-gmp/gmp-mutil-mini-popup-uni-app/dist/components/Popup/index.vue';
</script>

<style></style>

3.4 API

3.4.1 $$Rangers.init 参数

3.4.2 GmpSdk.init 参数

3.4.3 GmpSdk.config 参数

3.4.4 GmpSdk.on

3.4.5 SDK 参数获取

在 GMP 打开**「管理中心」** -> 「通道管理」 -> 「多端小程序弹窗」 -> 「SDK参数」

其中，Finder app_id 的值可能有多个，触达时要用哪个应用，这里就选择应用对应后面括号里的 app_id

3.4.6 手动模式

GmpSdk.init 设置为 'Manual'，则进入手动模式。手动模式在调用 GmpSdk.config之后，需要使用 GmpSdk.on 方法进行监听，如果有弹窗将要弹出时，会将 弹窗 Key 以回调函数参数的形式给出来，例如：

function App({ children }: PropsWithChildren<any>) {
  useLaunch(() => {
    $$Rangers.config({
      user_unique_id: '16', //可以是open_id，也可以union_id等其他业务觉的可以用来标识用户唯一性的值
      user_unique_id_type: 'baseid',
    });

    if (Current.app) {
    // 将 弹窗SDK 实例也挂载到全局
    // 这里命名必须与视图 SDK 组件传入的 key 保持一致，如：
    // <gmp-popup gmpEventKey="gmpEventTrigger" />，则这里属性名为 gmpEventTrigger
      (Current.app as any).gmp = gmp;
      
      // 将 finder 实例挂载到全局
      (Current.app as any).$$Rangers = $$Rangers;
      (Current.app as any).initd = false;
      (Current.app as any).reportPopupKey = '';
    }
    
    // 参数配置见 3.4.3
    GmpSdk.config({
      id: '16',
      idType: 'baseid',
      platform,
    });

    // 参数配置见 3.4.4
    GmpSdk.on((key: string) => {
      // 这里 key 可以做任意处理，比如存到全局变量中
      console.log('reportKey:', key);
          
      // 可以在这里做任何逻辑
          
      // 需要弹窗的时候调用以下方法可以触发弹窗
      (Current.app as any).gmpEventTrigger.triggerPopupData(key);
    });

    console.log('App launched.');
  });

  // children 是将要会渲染的页面
  return children;
}

onLaunch(() => {
  console.log('App Launch');

  $$Rangers.config({
    user_unique_id: '16', //可以是open_id，也可以union_id等其他业务觉的可以用来标识用户唯一性的值
    user_unique_id_type: 'baseid',
  });

  if (platform === 'wechat') {
    nextTick(() => {
      // 将 finder 实例挂载到全局
      getApp().$$Rangers = $$Rangers;
      
      // 将 弹窗SDK 实例也挂载到全局
    // 这里命名必须与视图 SDK 组件传入的 key 保持一致，如：
    // <gmp-popup gmpEventKey="gmpEventTrigger" />，则这里属性名为 gmpEventTrigger
      getApp().gmp = gmp;
    });
  } else {
    // 将 finder 实例挂载到全局
    getApp().$$Rangers = $$Rangers;
    
    // 将 弹窗SDK 实例也挂载到全局
    // 这里命名必须与视图 SDK 组件传入的 key 保持一致，如：
    // <gmp-popup gmpEventKey="gmpEventTrigger" />，则这里属性名为 gmpEventTrigger
    getApp().gmp = gmp;
  }

  // 参数配置见 3.4.3
  GmpSdk.config({
    id: '16',
    idType: 'baseid',
    platform,
  });

  nextTick(() => {
    // 参数配置见 3.4.4
    GmpSdk.on((key: string) => {
      if (getApp()) {
        // 这里 key 可以做任意处理，比如存到全局变量中
        console.log('reportKey:', key);
          
        // 可以在这里做任何逻辑
          
        // 需要弹窗的时候调用以下方法可以触发弹窗
        (getApp() as any).gmp.triggerPopupData(key);
      }
      console.log('reportKey:', key);
    });
  });
});

3.4.7 上报 params

在手动上报时，会遇到上报 params 场景，如下：

(getApp() as any).gmp.eventTrigger(key, params)

params 代表触发事件时的属性集合，类型为可被 JSON.parse的对象，例如：

{
  // 停留时长
  duration: 100,
  // 当前触发页面
  path: "pages/index/index",
  // 场景值
  scene: 1001,
}

上述的 停留时长（duration），会用于与**「触达任务」** -> **「触发条件」**做比较，以此来判断是否符合触发条件：

假如触达任务中没有判断属性满足条件，则该值不必传。

将上述 3.4.1 中 channel_domain（Finder 上报域名），3.4.2 中 origin （GMP 域名），配置到下面三个小程序后台里：

4.1 微信小程序管理后台

配置到「request 合法域名」里

4.2 支付宝小程序管理后台

4.3 百度小程序管理后台

5.1 创建触达任务

❗️注意：测试之前，必须先确保已经导入行为事件；测试只限在小程序本地调试、体验版进行，不能直接发布正式版
创建**「触达任务」，选择「微信小程序弹窗」和 「任务关联应用」（未购买 Finder 可忽略，与 3.4.1 参数 app_id 保持一致），点击「确定」**

选择**「受众用户」（建议选择「全部用户」进行测试验证）

触发条件中选择任一事件，并记住这里的「事件英文名」，如图中为 request_status__

触达配置选择任一模板，点击弹窗，编辑「点击行为」为「关闭弹窗」**，然后创建触达任务并审批

5.2 任务弹窗测试

5.2.1 使用 Finder SDK的场景

在**「引入弹窗组件」**（即引入 <gmp-popup> 组件）的页面代码里（例如首页是 pages/index/index.tsx），加入下述代码，触发 4.1 中创建触达任务选择的事件英文名，本例子为：request_status__

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import Popup from '@byte-gmp/gmp-mutil-mini-popup-uni-app/dist/components/Popup/index.vue';

onShow(() => {
  // 本例子中以下 eventName 为 request_status__
  getApp().$$Rangers.event('request_status__');
});
</script>

如果弹出弹窗，则代表接入测试成功，可以把上述测试代码删除，创建正式触达任务弹窗

5.2.2 自带 UBA 的场景

在 UBA 监听到事件触发时，手动触发 GMP SDK 的 eventTrigger 方法，key 为事件名，本例子为：request_status__

// UBA 监听事件触发之后插入下面代码：
// key 表示事件名,本例子中以下 key 为 request_status__
// params 指触发事件时某些属性的值，非必传，用法可参考 3.4.7
(getApp() as any).gmp.eventTrigger(key, params)

如果弹出弹窗，则代表接入测试成功，可以创建正式触达任务弹窗

5.3 测试完整代码

// src/App.vue
<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
import $$Rangers from '@datarangers/sdk-mp';
import GmpSdk from '@byte-gmp/gmp-mutil-mini-popup-uni-app';
import { nextTick } from 'vue';

const platform =
  uni.getSystemInfoSync().uniPlatform === 'mp-weixin'
    ? 'wechat'
    : uni.getSystemInfoSync().uniPlatform === 'mp-baidu'
    ? 'baidu'
    : uni.getSystemInfoSync().uniPlatform === 'mp-alipay'
    ? 'zhifubao'
    : 'wechat';

$$Rangers.init({
  app_id: 10000026, // 注意类型是number而非字符串
  channel_domain: 'https://sdk168-238-42gmp.datarangers-onpremise.volces.com',
  log: false, // 是否开启日志打印
  auto_report: true, // 是否开启预置事件采集
  enable_ab_test: false,
});
let gmp = GmpSdk.init({
  finderRangers: $$Rangers,
  appId: 1,
  mainAccountId: -1,
  wechatAppId: 'wxbee437cfe27aec05',
  idType: 'app_id+open_id',
  origin: 'https://e168-238-42gmp.datarangers-onpremise.volces.com/gmpi/gmp',
  finderAppId: 10000026, // 注意类型是number而非字符串
  operatingMode: 'Auto',
  popupAppId: '1748182358462304256',
  initPage: 'pages/index/index',
  customEventTrigger(key, params) {
    console.log(key, 'customEventTrigger', params);
  },
  success(res) {
    console.log(res, 'success');
  },
  fail(res) {
    console.log(res, 'fail');
  },
  error(e) {
    console.log(e, 'e');
  },
});
// 如果设置完毕，就可以调用send方法标记可以上报事件了。
// 在SDK的初始化流程中，send方法必须被调用执行过，否则所有事件都不会上报
$$Rangers.send();

onLaunch(() => {
  console.log('App Launch');

  $$Rangers.config({
    user_unique_id: '16', //可以是open_id，也可以union_id等其他业务觉的可以用来标识用户唯一性的值
    user_unique_id_type: 'baseid',
  });

  if (platform === 'wechat') {
    nextTick(() => {
      getApp().$$Rangers = $$Rangers;
      getApp().gmp = gmp;
    });
  } else {
    getApp().$$Rangers = $$Rangers;
    getApp().gmp = gmp;
  }

  GmpSdk.config({
    id: '16',
    idType: 'baseid',
    platform,
  });

  nextTick(() => {
    GmpSdk.on((key: string) => {
      if (getApp()) {
        (getApp() as any).reportPopupKey = key;
      }
      console.log('reportKey:', key);
    });
  });
});

onShow(() => {
  console.log('App Show');
});
onHide(() => {
  console.log('App Hide');
});
</script>
<style></style>


// src/pages/index/index.vue
<template>
  <view>
    <view className="index"></view>
    <Popup gmpEventKey="gmp" />
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import Popup from '@byte-gmp/gmp-mutil-mini-popup-uni-app/dist/components/Popup/index.vue';

onShow(() => {
  // 本例子中以下 eventName 为 request_status__
  getApp().$$Rangers.event('request_status__');
});
</script>

<style></style>

uniapp-1707196787.zip

89.13KB

7.1 弹窗没有正常弹出

1. 检查 GmpSdk.init 配置的 success 回调是否有进入
2. 检查SDK初始化后，是否正常触发gmp/openapi/v3/popup/get_miniprogram_sdk_status、openapi/v3/rule_engine/get_popup_rule_list接口，有无出现接口报错
3. 检查希望出现弹窗的页面是否正常接入了弹窗组件，页面中元素是否出现gmp-popup标签，是否在触发事件后出现内容

7.2 数据分析展示异常

1. 检查异常的数据分析的项目id和初始化时传入的项目id是否一致
2. 检查DataFinder的SDK是否正常接入以及是否触发上报函数
3. 检查DataFinder的上报函数是否存在异常，且在DataFinder中是否存在上报的数据