...
appAlias value should be sent differently for iOS and Android apps (excluding Expo apps)
Example;
const appAlias = Platform.OS === "ios" ? "RelatedStoreIOS" : "RelatedStoreAndroid";Don't forget to ask the RMC team for your alias, SID, OID and datasource values.
Usage
| Code Block | ||
|---|---|---|
| ||
import import React, { useState, useEffect } from 'react'; import { SafeAreaView, StyleSheet, ScrollView, Button, Text, Platform } from 'react-native'; import { addEventListener, removeEventListener, requestPermissions, requestIDFA, EuroMessageApi, VisilabsApi, EuroMessageApi, } from setApplicationIconBadgeNumber, logToConsole, RDStoryView, RecommendationAttribute, RecommendationFilterType } from 'react-native-related-digital' const App = () => { const [token, setToken] = useState(null) const appAlias = 'alias' Platform.OS === 'android' ? 'ANDROID_APP_ALIAS' : 'IOS_APP_ALIAS' // Get it from RMC team const siteId = "SID"; // Get it from RMC team const organizationId = "OID"; // Get it from RMC team const dataSource = "datasource" const SOURCE"; // Get it from RMC team const euroMessageApi = new EuroMessageApi(appAlias) const visilabsApi = new VisilabsApi(appAlias, siteId, organizationId, dataSource) useEffect(() => { logToConsole(true) addExtra() addListeners() return () => removeListeners() }, []) const addListeners = () => { addEventListener('register', async (token) => { setToken(token); addExtra().then((res) => euroMessageApi.subscribe(token)); visilabsApi.register(token, (result) = new EuroMessageApi(appAlias) |
Event Submission
A sample category page display event. All Visilabs events are sent with a function named customEvent. The parameters that this function takes are performed event name and data.
Event Name : They are event names defined by Visilabs. Here you can find information about which name will come in which event. In this example the event name is Category View.
Data : It is the information sent next to the relevant event. Values are sent to certain parameter names according to the operation performed. The parameters are OM. gets the prefix.
| Code Block |
|---|
var data = {
"OM.clist": 123
};
visilabsApi.customEvent("Category View", data); |
...
> {
console.log('visilabsApi result', result)
})
}, (notificationPayload) => {
console.log('notification payload', notificationPayload)
}, euroMessageApi, visilabsApi)
addEventListener('registrationError', async (registrationError) => {
console.log('registrationError is ', registrationError)
}, euroMessageApi)
addEventListener('carouselItemClicked', async (carouselItemInfo) => {
console.log('carouselItemInfo is ', carouselItemInfo)
}, euroMessageApi)
}
const addExtra = async () => {
await euroMessageApi.setUserProperty('ConsentTime', '2021-06-05 10:00:00') // Only for IYS customers
await euroMessageApi.setUserProperty('RecipientType', "BIREYSEL") // Only for IYS customers
await euroMessageApi.setUserProperty('ConsentSource', "HS_MOBIL") // Only for IYS customers
await euroMessageApi.setUserProperty("pushPermit","Y or N"); // Y= active, N=passive
await euroMessageApi.setUserProperty("gsmPermit","Y or N"); // Y= active, N=passive
await euroMessageApi.setUserProperty("emailPermit","Y or N"); // Y= active, N=passive
await euroMessageApi.setUserProperty('email', "example@domain.com")
await euroMessageApi.setUserProperty('keyid', "1A2B3C")
}
const setBadgeNumber = () => {
const number = 3
setApplicationIconBadgeNumber(number)
}
const sendCustomEvent = () => {
visilabsApi.customEvent('HomePage', {
'OM.pv': '77',
'OM.pn': 'Nectarine Blossom & Honey Body & Hand Lotion',
'OM.ppr': '39',
'OM.exvisitorid': "1A2B3C",
})
}
const getRecommendations = async () => {
try {
const zoneId = '1'
const productCode = ''
const properties = {
// "OM.cat": "409",
}
// optional
const filters = [{
attribute: RecommendationAttribute.PRODUCTNAME,
filterType: RecommendationFilterType.like,
value: 'laptop'
}]
const recommendations = await visilabsApi.getRecommendations(zoneId, productCode, properties, filters)
// const recommendations = await visilabsApi.getRecommendations(zoneId, productCode, properties)
}
catch (e) {
console.log('recommendations error', e)
}
}
const trackRecommendationClick = (qs) => {
visilabsApi.trackRecommendationClick(qs)
}
const getFavoriteAttributeActions = async () => {
try {
const actionId = '474'
const favoriteAttrs = await visilabsApi.getFavoriteAttributeActions(actionId)
console.log('favoriteAttributeActions', favoriteAttrs)
}
catch (e) {
console.log('favoriteAttributeActions error', e)
}
}
const trackInstalledApps = async () => {
await visilabsApi.sendTheListOfAppsInstalled()
}
const sendLocationPermissionEvent = async () => {
await visilabsApi.sendLocationPermission()
}
const getPushMessages = async () => {
const messages = await euroMessageApi.getPushMessages()
console.log('messages', messages)
}
const removeListeners = () => {
removeEventListener('register')
removeEventListener('registrationError')
removeEventListener('carouselItemClicked')
}
return (
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<RDStoryView
actionId={'459'} // Optional
onItemClicked={(data) => {
console.log('Story data', data)
}}
style={{ flex: 1 }}
/>
<Text>Token:{token}</Text>
<Button
title='REQUEST PERMISSONS'
onPress={() => {
const isProvisional = false
requestPermissions(isProvisional)
}}
/>
<Button
title='REQUEST IDFA'
onPress={() => {
requestIDFA()
}}
/>
<Button
title='SET BADGE NUMBER TO 3 (IOS)'
onPress={() => {
setBadgeNumber()
}}
/>
<Button
title='SEND CUSTOM EVENT'
onPress={() => {
sendCustomEvent()
}}
/>
<Button
title='GET RECOMMENDATIONS'
onPress={async () => {
await getRecommendations()
}}
/>
<Button
title='Track Recommendation Click'
onPress={() => {
trackRecommendationClick("OM.zn=You Viewed-w60&OM.zpc=1147091")
}} />
<Button
title='GET FAVORITE ATTRIBUTE ACTIONS'
onPress={async () => {
await getFavoriteAttributeActions()
}}
/>
<Button
title='TRACK INSTALLED APPS'
onPress={() => {
trackInstalledApps()
}}
/>
<Button
title='SEND LOCATION PERMISSION'
onPress={() => {
sendLocationPermissionEvent()
}}
/>
<Button
title='GET PUSH MESSAGES'
onPress={() => {
getPushMessages()
}}
/>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: '#FFF',
padding: 20
},
divider: {
height: 20
}
});
export default App; |
| Ui button | ||||||
|---|---|---|---|---|---|---|
|
...
|
...
|
...
|
...
|
...
|