Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

appAlias value should be sent differently for iOS and Android apps (excluding Expo apps)

Example;

const appAlias = Platform.OS === "ios" ? "RelatedStoreIOS" : "RelatedStoreAndroid";

Usage

Code Block
languagejs
import React, { useState, useEffect } addEventListener, 
  removeEventListener,from 'react';
import {
    requestPermissionsSafeAreaView,
    EuroMessageApiStyleSheet,
 } from 'react-native-related-digital'

const appAlias = 'alias'  ScrollView,
    Button,
    Text,
   // GetPlatform
it} from RMC team
 
export const euroMessageApi = new EuroMessageApi(appAlias);
export const AddEventListener =  addEventListener;
export const RequestPermissions = requestPermissions;

 

Usage

Note

You can review the lines about VisilabsApi here.

If you are not using Visilabs, remove lines 9, 22, and 36

Code Block
languagejs
import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, ScrollView, Button, View, ActivityIndicator, Platform } from 'react-native';
 
import { 
  addEventListener, 
  removeEventListener, 
  requestPermissions, 
  EuroMessageApi, 
  VisilabsApi 'react-native';

import {
    addEventListener,
    removeEventListener,
    requestPermissions,
    requestIDFA,
    EuroMessageApi,
    VisilabsApi,
    setApplicationIconBadgeNumber,
    logToConsole,
    RDStoryView,
    RecommendationAttribute,
    RecommendationFilterType
} from 'react-native-related-digital'


const App = () => {
    const [loadingtoken, setLoadingsetToken] = useState(falsenull)

    const appAlias = Platform.OS === 'android' ? 'ANDROID_APP_ALIAS' '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 = "datasourceSOURCE"; // 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) => {
       const subscribeResult = await     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')
        await euroMessageApi.setUserProperty('RecipientType', "BIREYSEL")
        await euroMessageApi.setUserProperty('ConsentSource', "HS_MOBIL")

        await euroMessageApi.setUserProperty('Email', "example@domain.com")
        await euroMessageApi.setUserProperty('keyid', "1A2B3C")
    }

    const setBadgeNumber = ('extra', 1)
  }
 
  const removeListeners = () => {
    removeEventListener('register')
    removeEventListener('registrationError')
  }
 
  return (
    <>
      <SafeAreaView>
       ) => {
        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()
  loading ? }


    const getPushMessages = <ActivityIndicatorasync () => {
        const messages size='large'
= await euroMessageApi.getPushMessages()
        console.log('messages', messages)
    }

     animating={loading} /> :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()
                    }}
                />

              </ScrollView>  <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()
                    }}
                />
            </SafeAreaView>ScrollView>
        </>SafeAreaView>
    );
};


const styles = StyleSheet.create({
    scrollView: {
        backgroundColor: '#FFF',
        padding: 20
    },
    divider: {
        height: 20
    }
});


export default App;

Ui button
colorgreen
titleNext Step
urlhttps://relateddigital.atlassian.net/wiki/spaces/KB/pages/1093861419/React+Native-+Register+Token