React Native- Usage
After the SDK setup is complete, add the codes to your application as below.
appAlias
value should be sent differently for iOS and Android apps (excluding Expo apps)
Example;
const appAlias = Platform.OS === "ios" ? "RelatedStoreIOS" : "RelatedStoreAndroid";
Usage
import React, { useState, useEffect } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
Button,
Text,
Platform
} from 'react-native';
import {
addEventListener,
removeEventListener,
requestPermissions,
requestIDFA,
EuroMessageApi,
VisilabsApi,
setApplicationIconBadgeNumber,
logToConsole,
RDStoryView,
RecommendationAttribute,
RecommendationFilterType
} from 'react-native-related-digital'
const App = () => {
const [token, setToken] = useState(null)
const appAlias = 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 = "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) => {
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;
Â
Copyright 2020 Related Digital