React Native Player (iOS + Android)

React Native Video is very popular player to play videos on mobile applications build in React Native.

Step 1: Install the Gumlet Insights React Native Video package and it's dependencies

npm i @gumlet/insights-react-native react-native-crypto react-native-device-info @react-native-async-storage/async-storage react-native-uuid react-native-video react-native-url-polyfill

Step 2: Import package in code

import gumletReactNativeVideo from '@gumlet/insights-react-native';

If you have not already imported React-Native-Video import that as well

import Video from 'react-native-video';

Step 3: Initialise gumletReactNativeVideo wrapper with react-native-video object

const GumletVideo = gumletReactNativeVideo(Video);

Step 6: Call the GumletVideo component

Create a config object which would be passed to the the Gumlet Video component to track the data

const gumletConfig = {
    property_id: 'BNVzRZKD',
    screen_name : 'ABCD',
    customData1: 'customData1',
    customData2: 'customData2',
    videoId: 'Sintel',
    userId: 'customer#1',
    screen_type:'RN',
    player_integration_version:'1.0.0',
    player_name:'react-native-video',
}

Call the component

<GumletVideo
        muted={false}
        ref={ref => (videoPlayer.current = ref)}
        source={{
          uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
        }}
        style={styles.mediaPlayer}
        volume={10}
        config={config}
/>

You will have to create a reference to the videoPlayer and pass it

const videoPlayer = React.useRef(null);

👍

Done

Once you integrate with these steps, you should start seeing data on your customised dashboard.

How to?

Add custom data

You can send first party user data to our dashboard via the SDK. While building the configuration to initialise the SDK object you can pass these parameters. 

const gumletConfig = {
		property_id : 'PROPERTY_ID_GOES_HERE', // required:  please replace with correct property id.
		userId : '123',
	  screen_name : 'ABCD',
		userName : 'Océane Bourgeois',
		userEMail : '[email protected]',
		userPhone  : '(840)-295-4133',
		userProfileImage : 'https://assets.gumlet.io/assets/gumlet-logo-white-font.png?w=240&format=auto',
		userAddressLine1 : '8774, Rue de la Mairie',
		userAddressLine2 : '',
		userCity : 'Reims',
		userState : 'Landes',
		userCountry : 'France',
		userZipcode : '83894',
		customContentType : 'episode',
		customVideoDurationMillis : 2600000, // 43 minutes 20 seconds
		customEncodingVariant : 'test1',
		customVideoLanguage : 'English',
		customVideoId : 'HIMYMSeason1Episode1',
		customVideoSeries : 'HIMYMSeason1',
		customVideoProducer : 'Ece Tekelioglu',
		customVideoTitle : 'Pilot',
		customVideoVariantName : '',
		customVideoVariant : '',
		customPlayerIntegrationVersion : 'v1.1',
		customPlayerName : 'Trailer',
		customPageType : 'Homepage',
		customData1 : '',
		customData2 : '',
		customData3 : '',
		customData4 : '',
		customData5 : '',
		customData6 : '',
		customData7 : '',
		customData8 : '',
		customData9 : '',
		customData10 : ''
 };