React Player is a popular player to play videos on reactive websites. It can play both HLS and DASH streams.

Step 1: Initialise the player

Initialise the player with the player options you want to configure it with. Pass the video URL to be played.
You need to add a reference to the player component, this will be used by Gumlet SDK to hook on.

import logo from './logo.svg';
import './App.css';
import React, { useRef, useEffect } from "react";
import ReactPlayer from 'react-player';

function App() {
  const playerRef = useRef();
  
  return (
    <div className="App">
      <div>
        <ReactPlayer
          url='https://video.gumlet.io/5f462c1561cf8a766464ffc4/61b8ac77b7e0439691e7c2af/1.m3u8'
          autoPlay={true}
          controls={true}
          width="1200"
          height="auto"
          ref={playerRef}
        />
      </div>
    </div>
  );
}
export default App;

Step 2: Gumlet Insights SDK Installation

The easiest way to integrate Gumlet Insights SDK with React Player is to load and append a script in the document body via a function.

import logo from './logo.svg';
import './App.css';
import React, { useRef, useEffect } from "react";
import ReactPlayer from 'react-player';


function App() {
  const playerRef = useRef();

  const loadGumletScript = () => {
    return new Promise(function (resolve, reject){
      // Checks if the script is already loaded on the page
      if(document.querySelector("script#gumlet-sdk-script")){
        resolve();
      }else {
        // Loads the script and appends it on the page
        const script = document.createElement("script");
        script.src = "https://cdn.gumlytics.com/insights/1.1/gumlet-insights.min.js";
        script.id = "gumlet-sdk-script";
        script.sync = true;
        script.onload = () => resolve();
        document.body.appendChild(script);
      }
    });
  }

  useEffect(() => {
    loadGumletScript().then(() => {
    });
  });
  
  return (
    <div className="App">
      <div>
        <ReactPlayer
          url='https://video.gumlet.io/5f462c1561cf8a766464ffc4/61b8ac77b7e0439691e7c2af/1.m3u8'
          autoPlay={true}
          controls={true}
          width="1200"
          height="auto"
          ref={playerRef}
        />
      </div>
    </div>
  );
}
export default App;

Step 3: Create Gumlet Configuration JSON

All the data is associated with a property ID, which you need to get from our dashboard. Pass it in the config JSON as property_id. This is the only required field.

There is an option to pass extra data such as the user specific data and video meta data which can be viewed in the dashboard as data breakdowns. A full list of variables is available here.

import logo from './logo.svg';
import './App.css';
import React, { useRef, useEffect } from "react";
import ReactPlayer from 'react-player';


function App() {
  const playerRef = useRef();
  
  // Create the Gumlet Configuration JSON
  const gumletConfig = {
    property_id: 'PROPERTY_ID_GOES_HERE', // required:  please replace with correct property id.
  };

  const loadGumletScript = () => {
    return new Promise(function (resolve, reject){
      if(document.querySelector("script#gumlet-sdk-script")){
        resolve();
      }else {
        const script = document.createElement("script");
        script.src = "https://cdn.gumlytics.com/insights/1.1/gumlet-insights.min.js";
        script.id = "gumlet-sdk-script";
        script.sync = true;
        script.onload = () => resolve();
        document.body.appendChild(script);
      }
    });
  }

  useEffect(() => {
    loadGumletScript().then(() => {
    });
  });
  
  return (
    <div className="App">
      <div>
        <ReactPlayer
          url='https://video.gumlet.io/5f462c1561cf8a766464ffc4/61b8ac77b7e0439691e7c2af/1.m3u8'
          autoPlay={true}
          controls={true}
          width="1200"
          height="auto"
          ref={playerRef}
        />
      </div>
    </div>
  );
}
export default App;

Step 4: Initialise Gumlet Insights SDK

Initialise the Gumlet Insights SDK with the config JSON to start receiving data on your dashboard. Pass the player object you created in the previous step to the Gumlet Insights object.

import logo from './logo.svg';
import './App.css';
import React, { useRef, useEffect } from "react";
import ReactPlayer from 'react-player';


function App() {
  const playerRef = useRef();
  const gumletConfig = {
    property_id: 'PROPERTY_ID_GOES_HERE',
  };
  
  // The reference is used for a setInterval to wait for the player initliasation,
  const timer = useRef();
  var gumletInsights = null;

  const loadGumletScript = () => {
    return new Promise(function (resolve, reject){
      if(document.querySelector("script#gumlet-insights-sdk-script")){
        resolve();
      }else {
        const script = document.createElement("script");
        script.src = "https://cdn.gumlytics.com/insights/1.1/gumlet-insights.min.js";
        script.id = "gumlet-insights-sdk-script";
        script.sync = true;
        script.onload = () => resolve();
        document.body.appendChild(script);
      }
    });
  }

  useEffect(() => {
    loadGumletScript().then(() => {
     
      //Add a timer to load 
      timer.current = setInterval(async () => {
        if (playerRef.current.player.player && playerRef.current.player.player.hls) {

          gumletInsights = window.gumlet.insights(gumletConfig);
          gumletInsights.register(playerRef.current.player.player.hls);

          clearInterval(timer.current);
        }
      }, 100);
    });
  }, [playerRef.current]);
  
  return (
    <div className="App">
      <div>
        <ReactPlayer
          url='https://video.gumlet.io/5f462c1561cf8a766464ffc4/61b8ac77b7e0439691e7c2af/1.m3u8'
          autoPlay={true}
          controls={true}
          width="1200"
          height="auto"
          ref={playerRef}
        />
      </div>
    </div>
  );
}
export default App;

👍
Done!
Once you integrate with these steps, you should start seeing data on your 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',
		userName : 'Océane Bourgeois',
		userEMail : 'oceane.bourgeois@example.com',
		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 : ''
 };

Change the essential user details being sent to the Gumlet Dashboard.

If the user logs in after the Gumlet SDK is attached to the player, you can use the following function to update the data sent to the Gumlet backend.

Use the updateCustomUserData() function available in the SDK.

gumletInsights.updateCustomUserData({
		userId            : '123',
		userName          : 'Christelle Robert',
		userEMail         : 'christelle.robert@example.com',
});

Change the video title that is being played in the player.

If your app supports multiple videos in the same player after it is initialised, then you need to tell our SDK to track the new video details after the player finishes playing a video and is about to start the new video.

Use the updateCustomVideoData() function available in the SDK.

gumletInsights.updateCustomVideoData({
	  customVideoTitle : 'Episode2'
})

API Documentation

insights(config)

The Initialise method takes in a config JSON and returns a Gumlet Insights object which is then attached with a player. Only the property ID to which data is to be sent is a mandatory parameter, but there is an option to pass custom data as well; the whole list of parameters is available here

gumletInsights = window.gumlet.insights(gumletConfig);

register(player)

The register method takes in a video.js player object as an argument. After the SDK has been installed and initialised on the page, it needs a player object to listen to events from. The register event accepts this player object and attaches the Gumlet Insight object to it.

If there are multiple player windows on a page, please initialise the same number of Gumlet SDK objects and pass the different player objects to them.

❗️
Gumlet insights SDK won't start sending data to the dashboard unless the player is registered with it.

gumletInsights.register(playerRef.current.player.player.hls);

updateCustomUserData(data)

Gumlet Insights SDK allows you to pass user data, which is stored in the project's main database, to allow analysis at the user level. A complete list of user parameters is available here

The data can be updated via a function call while the SDK is already initialised with some user data.

gumletInsights.updateCustomUserData({
		userId            : '123',
		userName          : 'Christelle Robert',
		userEMail         : 'christelle.robert@example.com',
		userPhone         : '(078)-380-95-96',
		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',
  });

updateCustomVideoData(data)

Gumlet Insights SDK allows you to pass custom data related to a video to easily identify and drill down metrics for a particular video on the dashboard. A complete list of parameters is available here

gumletInsights.updateCustomVideoData({
		customContentType             : 'episode',
		customVideoDurationMillis     : 2405000, // 40 minutes 5 seconds
		customEncodingVariant         : 'test1',
		customVideoLanguage           : 'English',
		customVideoId                 : 'HIMYMSeason1Episode2',
		customVideoSeries             : 'HIMYMSeason1',
		customVideoProducer           : 'Ece Tekelioglu',
		customVideoTitle              : 'Episode2',
		customVideoVariantName        : '',
		customVideoVariant            : '',
})

updateCustomData(data)

Each SDK allows ten additional data points that can be used for a particular application use case. The values in these parameters can be anything which needs to be tracked. Each parameter is optional and accepts alphanumeric values. The whole list of parameters is available here

gumletInsights.updateCustomData({
		customData1   : '',
		customData2   : '',
		customData3   : '',
		customData4   : '',
		customData5   : '',
		customData6   : '',
		customData7   : '',
		customData8   : '',
		customData9   : '',
		customData10  : ''
});