HTML5 (Web)

HTML video player is very popular player to play videos on the web.

Step 1: Gumlet Insights SDK Installation

The best and easiest way to install this library is by including it in the `` section of the pages.

<!-- Include gumlet insights sdk -->
<script type="module" src="https://cdn.gumlytics.com/insights/3.0/main.mjs"></script>

Step 2: Create Gumlet Configuration JSON

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

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

<script type="module">

  // Create the Gumlet Configuration JSON
  const gumletConfig = {
     workspace_id: 'YOUR_WORKSPACE_ID', // required:  please replace with correct workspace id.
  };

</script>

Step 3: Initialise Gumlet Insights SDK

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

<script type="module">
	
  const video = document.getElementById('my-video');
  const gumletInsights = new gumlet.GumletInsights(gumletConfig);
  gumletInsights.attach(video);

</script>

👍
Done!
Once you integrate with these steps, you should start seeing data on your real-time dashboard.

Full Code Example

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Gumlet </title>
    <script type="module" type="text/javascript" src="https://cdn.gumlytics.com/insights/3.0/main.mjs"></script>
  </head>
  <body>
    <h1>Gumlet Insights SDK</h1>
    <div id="player" style="width: 400px"></div>
    
    <video id="my-video" width="640" height="264">
      <source src="https://gumlet.sgp1.digitaloceanspaces.com/video/sample_1.mp4" type="video/mp4" />
    </video>

    <script type="module">

      // Player configuration
      var playerOptions = {
        preload: false
      };

      // Create the Gumlet Configuration JSON
      const gumletConfig = {
         workspace_id: 'YOUR_WORKSPACE_ID', // required:  please replace with correct workspace id.
      };

      const video = document.getElementById('my-video');
      
      const gumletInsights = new gumlet.GumletInsights(gumletConfig);
      gumletInsights.attach(video);

    </script>
  </body>
</html>

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.

var gumletConfig = {
		 workspace_id: 'YOUR_WORKSPACE_ID', // required:  please replace with correct workspace id.
		userId : '123',
		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 : ''
 };

 const gumletInsights = new gumlet.GumletInsights(gumletConfig);

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

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

Use the updateCustomUserData() function available in the SDK.

gumletInsights.updateCustomUserData({
		userId            : '123',
		userName          : 'Christelle Robert',
		userEMail         : '[email protected]',
});

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

You can read full API documentation for this library at: https://www.npmjs.com/package/@gumlet/insights-js-core