React Native Video is a very popular player to play videos on mobile applications built in React Native.
Step 1: Install the Gumlet Insights React Native Video package and its 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 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 video player and pass i.t
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 : ''
};