Extole 反应原生 SDK
这个集成指南向您演示了如何与我们的Resact Industrial SDK一起尽快建立并启动一个Extole程序.
所需资源
Extole React Introduct SDK支持iOS 13.0或后期,而Android支持minSdkVersion 21或后期.
安装 SDK 依赖
添加数据 extole-mobile-sdk 依赖性 :
npm install @extole/react-native-sdk react-native-webview
在iOS上,将Extole iOS SDK添加到应用程序中 Podfile在应用目标内部 CocoaPods干线没有SDK所需的版本,因此出自GitHub:
pod 'ExtoleMobileSDK', :git => 'https://github.com/extole/ios-sdk.git', :tag => '0.0.103'
pod 'ExtoleConsumerAPI', :git => 'https://github.com/extole/ios-consumer-api.git', :tag => '0.0.24'
然后,在 ios 目录, 运行 pod install。一个已经拥有这些被子的应用程序 Podfile.lock 运行 pod update ExtoleMobileSDK ExtoleConsumerAPI extole-mobile-sdk 换句话说.
初始化 SDK
初始化 extole :
import {Extole} from '@extole/extole-mobile-sdk';
const extole = new Extole('share.client.com');
您需要提供您的 Extole 程序域以取代 'share.client.com'。 。 。 .
初始化视图
在代码中,通过配置 view 和回调 :
const [extoleView, setExtoleView] = React.useState<React.ReactNode>(<View />);
extole.configure(extoleView, setExtoleView, () => {
navigation.navigate('Promo');
});
// Use the extole.view
function ExtoleScreen(): ReactElement {
return return extole.view as ReactElement;
}
// The ExtoleScreen() method is used as a Screen
<Stack.Screen name='Promo' component={ExtoleScreen} />
默认情况下,Extole会使用这个单一视图与客户互动.
与 extole 交换数据
客户信息
发送关于客户的删除信息 :
extole.identify("<[email protected]>", {"partner_user_id": "123"})
您可以选择通过任何类型的数据来描述客户. 关于你的客户的更丰富的数据 给了你的营销团队 他们需要的信息 更好地划分你的程序参与者 并以适当的运动瞄准他们.
活动
发送删除事件, 如注册、 签名、 转换、 账户打开等 :
extole.sendEvent("cta_viewed", {"key": "value"}))
对于每个事件类型,可以发送额外数据. 例如,在转换事件上,您可能想要通过,以排列ID或顺序值等.
行动呼吁内容
使用 Extole 的内容发布一个行动呼吁( CTA) .
移动菜单项目等CTA可以在"我的Extole Campaign"编辑器中完全定制. 每个CTA都有指定区. 以下代码是通过取取区内容来取回CTA的例子:
const [zone, setZone] = React.useState<Zone | null>(null);
React.useEffect(() => {
extole
.fetchZone('mobile_cta')
.then(([zone, _campaign]) => {
setZone(zone);
});
}, []);
// On CTA tap send the event to Extole
const onShareButtonPress = () => {
extole.sendEvent(cta?.touch_event, { extole_zone_name: 'microsite' });
};
. . .
// Usage example:
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={{
uri: zone?.getData().image || '<default image link>',
}}
/>
<View style={styles.space} />
<Button title={zone?.getData().title || ''} onPress={onShareButtonPress} />
<View style={styles.space} />
</View>
为了能够取回 cta 区域,该区域应在 My Extole 中配置,并应返回包含 image 财务报告和审定财务报表 title。 。 。 .
重要注意:我们鼓励您从My Extole中调取 CTA 内容, 因为这样做可以确保您的菜单项目或上覆信件会反映副本, 并提供您为竞选所配置的.
高级使用
以下话题涵盖Extole React Independent SDK的高级使用案例. 如果你们想探讨其中任何一种选择,请联系我们的支助小组 支持@extole.com。 。 。 .
从事件中配置动作
您可以设置一个特定动作, 当一个事件被发射时发生 。 例如,当客户在您的菜单项目CTA上点击时,您可能会希望事件触发一个动作来加载您的微站并显示共享体验.
要设置这种类型的配置, 您需要与 Extole 支持合作, 在 My Extole 中设置一个带条件和行动返回 JSON 配置的区域 。 SDK 对特定事件通过的条件执行动作 :
{
"operations": [
{
"conditions": [
{
"type": "EVENT",
"event_names": [
"cta_tap"
]
}
],
"actions": [
{
"type": "VIEW_FULLSCREEN",
"zone_name": "microsite"
}
]
}
]
}
支持的行动
以下类型的动作在我们的SDK中默认支持.
| 动作名称 | 说明 |
PROMPT
|
显示 iOS 的弹出通知 。 例如,当折扣码或优惠券码被成功应用时,就可能出现这种情况. |
NATIVE_SHARING
|
以客户可以通过短信或任何已启用的社会应用程序发送的预定义消息和链接打开本地共享表. |
VIEW_FULLSCREEN
|
触发全屏移动网络视图 。 例如,这可能是您在 My Extole 中配置的用于显示共享体验的微站点 . |
自定义动作
如果您想要创建超出默认的自定义动作, 请使用以下示例中显示的格式 。 请联系支援小组 支持@extole.com 如果你有任何问题.
实例自定义动作
export class CustomReactAction implements Action {
type = 'CUSTOM';
title = 'REACT_ACTION';
execute(_event: AppEvent, _extole: Extole) {
console.log('Custom Action was executed', this);
}
}
注册自定义动作
extole.registerAction('CUSTOM', CustomReactAction.prototype);
附 录
高级动作
装入操作
装入额外操作
{
"type": "LOAD_OPERATIONS",
"zones": [
"<zone_name>"
],
"data": {
"key": "value"
}
}
获取
获取和缓存内容
{
"type": "FETCH",
"zones": [
"<zone_name_1>",
"<zone_name_2>"
]
}
设置日志级别
用于配置日志级别(DEBUG、INFO、WARN、ERROR)
{
"type": "SET_LOG_LEVEL",
"log_level": "WARN"
}