弹窗 SDK( RN)
在集成无埋点RN SDK的基础上,可额外集成弹窗RN SDK

参考Demo

Demo里有本文档提到的api示例与混合开发的代码示例,建议您运行并体验。

环境配置

请确保已经添加埋点SDK触达原生端SDK,如果没有,请依次移步至React Native埋点SDK集成文档,弹窗原生端SDK集成文档(Android)弹窗原生端SDK集成文档(iOS)

添加依赖

$ npm install react-native-growing-touch --save

自动安装 (React Native 0.6.0版本及其以上可以跳过该步骤)

$ react-native link react-native-growing-touch

手动安装

iOS
  1. 1.
    打开Xcode,在您的工程目录中点击 LibrariesAdd Files to [your project's name]
  2. 2.
    选择添加 node_modulesreact-native-growing-touchRNGrowingTouch.xcodeproj
  3. 3.
    选择您的目标项目, Build PhasesLink Binary With Libraries添加 libRNGrowingTouch.a
  4. 4.
    运行项目 (Cmd+R)<
Android
  1. 1.
    打开您的首页Activity android/app/src/main/java/[...]/MainActivity.java
    • 导入包文件 import com.growingio.android.sdk.gtouch.rn.RNGrowingTouchPackage;
    • getPackages() 方法中添加 new RNGrowingTouchPackage()
  2. 2.
    引入Android Native工程 android/settings.gradle:
    1
    include ':react-native-growing-touch'
    2
    project(':react-native-growing-touch').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-growing-touch/android')
    Copied!
  3. 3.
    在app中添加Android Native依赖 android/app/build.gradle:
    1
    compile project(':react-native-growing-touch')
    Copied!

引入到文件

1
import GrowingTouch from 'react-native-growing-touch';
2
3
// TODO: What to do with the module?
4
GrowingTouch;
Copied!

API说明

1 设置弹窗开关

1.1 GrowingTouch.setEventPopupEnable(enable)
设置弹窗的开关,可以在初始化的时候选择关闭弹窗功能,这样弹窗SDK就不会在APP的logo页和闪屏页显示弹窗,然后在APP的内容页打开时再打开弹窗开关。
1.2 参数说明
参数名
类型
必填
默认值
说明
enable
boolean
true
开关触达弹窗功能,true开启,false关闭
1.3 代码示例
1
GrowingTouch.setEventPopupEnable(true)
Copied!

2 获取弹窗开关状态

2.1 GrowingTouch.isEventPopupEnabled()
获取弹窗开关状态。
2.2 代码示例
1
let enable = await GrowingTouch.isEventPopupEnabled();
Copied!

3 打开弹窗并触发"打开APP"事件

3.1 GrowingTouch.enableEventPopupAndGenerateAppOpenEvent()
打开弹窗并触发"打开APP"事件。
应用场景时:担心弹窗SDK在APP启动的Logo页或者闪屏页显示弹窗,这时可以选择在初始化时关闭弹窗开关,然后在APP的内容页打开时再打开弹窗开关。
如果只是单纯调用GrowingTouch.setEventPopupEnable(true)只会打开弹窗开关,并不会触发"打开APP"的弹窗事件。调用该API则会打开弹窗的同时触发一个"打开APP"的弹窗事件。("打开APP" 对应的是触发时机选择“打开App时”)。
3.2 代码示例
1
let enable = await GrowingTouch.isEventPopupEnabled();
2
if (!enable) {
3
GrowingTouch.enableEventPopupAndGenerateAppOpenEvent();
4
}
Copied!

4 弹窗是否正在显示

4.1 GrowingTouch.isEventPopupShowing()
弹窗是否正在显示
4.2 代码示例
1
let showing = await GrowingTouch.isEventPopupShowing();
Copied!

5 弹窗的事件监听

5.1 GrowingTouch.setEventPopupListener(listener)
通过监听获取事件和参数,您可以根据事件和参数以及您的业务场景执行相关的交互。
5.2 代码示例
1
GrowingTouch.setEventPopupListener({
2
/**
3
* 弹窗显示成功
4
*
5
* @param eventId 埋点事件名称
6
* @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
7
*/
8
onLoadSuccess: (eventId, eventType) => {
9
console.log('RNApp onLoadSuccess: eventId = ' + eventId + ', eventType = ' + eventType);
10
},
11
12
/**
13
* 弹窗加载失败
14
*
15
* @param eventId 埋点事件名称
16
* @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
17
* @param errorCode 错误码
18
* @param description 错误描述
19
*/
20
onLoadFailed: (eventId, eventType, errorCode, description) => {
21
console.log('RNApp onLoadFailed: eventId = ' + eventId + ', eventType = ' + eventType + ', errorCode = ' + errorCode + ', description = ' + description);
22
},
23
24
/**
25
* 用户点击了弹窗的有效内容。弹窗SDK现在只提供跳转APP内部界面和H5界面两种处理方式。
26
* 您可以在这里接管跳转事件,处理需要跳转的url。您也可以自定义Url协议,实现更多业务和交互功能。
27
*
28
* @param eventId 埋点事件名称
29
* @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
30
* @param openUrl 跳转的url
31
*/
32
onClicked: (eventId, eventType, openUrl) => {
33
console.log('RNApp onClicked: eventId = ' + eventId + ', eventType = ' + eventType + ', openUrl = ' + openUrl);
34
},
35
36
/**
37
* 用户关闭了弹窗
38
*
39
* @param eventId 埋点事件名称
40
* @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
41
*/
42
onCancel: (eventId, eventType) => {
43
console.log('RNApp onCancel: eventId = ' + eventId + ', eventType = ' + eventType);
44
},
45
46
/**
47
* 弹窗显示超时
48
*
49
* @param eventId 埋点事件名称
50
* @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
51
*/
52
onTimeout: (eventId, eventType) => {
53
console.log('RNApp onTimeout: eventId = ' + eventId + ', eventType = ' + eventType);
54
},
55
});
Copied!
Last modified 2yr ago