集成 SDK
uni-app 弹窗 SDK 集成可以参考 uni-app SDK
初始化 SDK
在 App.vue 或 main.js 文件中初始化 SDK
import sensors from '神策 uni-app JS SDK 路径/index.js';
// #ifdef MP-WEIXIN
import popups from '神策 uni-app JS SDK 路径/plugin/wx-popup.esm.min.js';
// #endif
sensors.setPara({
name: 'sensors',
server_url: '',
// 全埋点控制开关
autoTrack: {
appLaunch: true, // 默认为 true,false 则关闭 $MPLaunch 事件采集
appShow: true, // 默认为 true,false 则关闭 $MPShow 事件采集
appHide: true, // 默认为 true,false 则关闭 $MPHide 事件采集
pageShow: true, // 默认为 true,false 则关闭 $MPViewScreen 事件采集
pageShare: true, // 默认为 true,false 则关闭 $MPShare 事件采集
mpClick: true, // 默认为 false,true 则开启 $MPClick 事件采集
}
});
//弹窗初始化
sensors.popupInit({
// 是否打印 log 日志
show_log: true,
// 弹窗 SFO 地址,请联系运营人员获取
api_base_url: '',
// 小程序 id
app_id: ''
});
sensors.init();
引入弹窗组件
将插件目录的 wxcomponents 里内容复制到本地 uni-app 工程的 wxcomponents 下:
在小程序项目的所有需要渲染弹窗的页面中引入弹窗组件。例如在 index 页面引入:
//uniapp 官方目录结构
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid App端存放本地html文件的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
// pages.json 注意组件目录存放结构与组件路径
"pages": [
{
"path": "pages/index/index",
"style": {
"usingComponents": {
"popup-component": "/wxcomponents/popup-component/popup-component",// 注意组件所在路径
}
}
},
]
// index.vue
<popup-component id="sensors_popup"></popup-component> // 把此组件放在 index.vue template内
注意格式
<template>
<view class="content">
<popup-component id="sensors_popup"></popup-component> // 把此组件放在 index.vue 的页面的任意位置
</view>
</template>
配置 Scheme
获取项目 Scheme
- 项目的 Scheme 需要管理员账户进行获取
- App 工程中可以同时配置多个项目的 Scheme
若您使用的神策系统版本较高,则您可以尝试通过「顶部数据管理 Tab - 数据接入」或「数据融合 - 埋点接入 - 数据接入引导」这两种路径之一,来进入该配置页面。
uni-app 中配置 Scheme
在 manifest.json 配置文件中找到「App 常用其他配置」,将上一步获取到的 Scheme 分别配置到 「Android 配置」和 「iOS 配置」中 UrlSchemes 选项中
实现弹窗回调
设置弹窗开始触达回调
注意 sensors 需要在 main.js 设置全局
/**
* @param {string} plan_id 计划ID
* @param {object} valueObj 弹窗内容对象(在 sf 中配置的弹窗内容)
*/
sensors.popupLoadSuccess(function (data) {
console.log('加载弹窗成功: ', data);
});
设置弹窗触达结束回调
注意 sensors 需要在 main.js 设置全局
/**
* 对弹窗点击事件,绑定事件处理函数
* @param {string} plan_id 计划ID
* @param {object} valueObj 弹窗内容对象(在 sf 中配置的弹窗内容)
*/
sensors.popupClose(function (plan_id, valueObj) {
console.log('plan_id: ', plan_id, ' valueObj: ', valueObj);
});
设置弹窗按钮点击回调
注意 sensors 需要在 main.js 设置全局
/**
* @param {object} valueObj 弹窗内容对象(在 sf 中配置的弹窗内容)
*/
sensors.popupClick(function (valueObj) {
console.log('click:',valueObj);
});
弹窗调试
创建运营计划并测试弹窗
首先在神策智能运营中创建运营计划,并且“触发条件”中的“平台类型”选择 iOS,然后配置好“触达配置”就可以点击右侧的“测试弹窗”按钮以打开二维码。
扫描二维码
使用已安装了测试 App 的设备,通过手机自带的系统相机扫描二维码,扫码后会在浏览器中打开二维码对应的网页。
唤起 App
若 App 已经成功集成 SDK 则会直接唤起 App 或提示询问是否唤起 App。
若 App 集成 SDK 存在问题或未安装 App,则会进入到如下报错界面,请检查您的 App 配置。
测试弹窗效果
跳转成功后,会在 App 内弹出弹窗。
弹窗后的关闭弹窗、点击按钮等效果与创建的运营计划一致。