弹窗SDK(微信小程序)
- 1.
- 2.登陆微信小程序后台,进入配置打开开发设置,到服务器域名配置部分在
request合法域名
中添加:https://messages.growingio.comdownloadFile请求合法域名列表
中添加:https://statics.growingio.com和https://growing-statics-public.cn-bj.ufileos.com
域名必须设置,否则线上不会弹窗
进入GrowingIO官网 -> 用户运营,点击左上角的新建按钮,选择弹窗,然后选择小程序,即可进入微信小程序的弹窗配置页面
根据您的需要,选择对应的产品、触发时机、触发次数、图片素材、点击事件后、上线时间、停止时间后,保存上线即可。
这里以原生小程序应用与Taro应用为例,其余微信小程序框架可参考对应框架对于小程序原生组件的使用方式。如果是第一次集成小程序SDK,建议下载最新GIOSDK全量替换。
1. 在app.json文件中的usingComponents属性中,添加gio-marketing组件
"usingComponents": {
"gio-marketing": "utils/es/components/gio-marketing/gio-marketing"
},
2. 在每一个page页面的wxml文件里,引入gio-marketing组件
(原则上只需要在需要弹窗的页面引入组件)
3.7.3 版本支持跳转H5 和 第三方小程序,需要添加标签属性
h5-page和 env-version
// 例:pages/index/index.wxml, 假如H5承接页面为/pages/webview/index
<gio-marketing h5-page="/pages/webview/index" env-version="release"/>
<View>Welcome to GrowingIO</View>
小程序是无法直接跳转到浏览器的,要实现h5页面的跳转就需要在小程序内提供一个带有webview的承接页来展示h5页面,该页面要用户提供并配置,弹窗和资源位提供新的标签属性
h5-page
。属性 | 类型 | 默认值 | 说明 |
h5-page | String | /pages/h5/h5 | 配置h5页面的承接页 |
如承接页为:
/pages/webview/index
,应该如下配置<gio-marketing h5-page="/pages/webview/index" />承接页示例如下:
// pages/webview/index.js
Page({
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
url: this.options.url
})
}
})
// pages/webview/index.wxml
<view>
<web-view src="{{url}}"></web-view>
</view>
注:承接页必须不为
tabBar
页面。属性 | 类型 | 默认值 | 说明 |
env-version | String | release | 三方小程序的版本,仅开发测试使用支持: develop, trial, release |
在每一个page页面的config配置项里通过usingComponents属性引入组件,接着在render方法中使用组件(原则上只需要在需要埋点的页面引入组件)。
// 例:pages/index/index.js
export default class Index extends Component {
config = {
navigationBarTitleText: 'GrowingIO',
usingComponents: {
'gio-marketing': 'utils/es/components/gio-marketing/gio-marketing'
}
}
...
render() {
return (
<View>
<gio-marketing />
<View>Welcome to GrowingIO</View>
</View>
)
}
}
- 1.将SDK文件包解压后放到/src/utils下
- 2.将其中的components目录移动到/static下
- 3.在/src/pages/下具体页面的main.json中或/src/app.json中使用usingComponents引入组件
{
"usingComponents": {
"gio-marketing": "../static/components/gio-marketing/gio-marketing"
}
}
4. 在具体渲染组件的template中使用
<template>
<div>
<gio-marketing />
</div>
</template>
在每一个page页面的wpy文件里,引入gio-marketing组件(原则上只需要在需要弹窗的页面引入组件)
// 例:pages/index.wpy
// template
<template>
<gio-marketing />
// ...more
</template>
<config>
// usingComponents
"usingComponents": {
"gio-marketing": "../utils/gio-minp/components/gio-marketing/gio-marketing"
}
</config>
宽度是窗口的80%,高度随内容的高度自动伸缩
使用特殊 登陆用户变量,注册至今
需要在代码设置一下登陆用户变量 注册日期 CreateAt,需要保证key 是 CreateAt , 值是YYYYMMDD
SDK 版本3.3.0以上
//参考
gio('setUser', {'CreateAt':'20200107'})
建议放在onShow 后,官网onLoad 有时不触发
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
Last modified 1yr ago