Shaka Player (Web)
Integrate Gumlet insights with Shaka player and monitor video playback performance.
Shaka Player is a popular player for playing videos on the web.
Step 1: Gumlet SDK Installation
The best and easiest way to install this library is by including it in the <head> section of the pages after the Shaka Player has been included in the page.
<!-- Include other shaka player files here -->
<script src="/path/to/shaka-player.js"></script>
<!-- Include gumlet insights sdk after Shaka-Player.js -->
<script type="module" src="https://cdn.gumlytics.com/insights/3.0/main.mjs"></script>
Step 2: Initialise the player
Initialise the Shaka player with the appropriate player options and the video URL to be played.
<script type="module">
let manifestUri = 'https://video.gumlet.io/5f462c1561cf8a766464ffc4/61dd877c6ec832ab2aaa1837/7.mpd'
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
function initPlayer() {
var startTime = new Date().getTime();
// Create a Player instance.
var video = document.getElementById('my-video');
var player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
player.load(manifestUri).then(function() {
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
// onError is executed if the asynchronous load fails.
}).catch(onError);
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error('Error code', error.code, 'object', error);
}
document.addEventListener('DOMContentLoaded', initApp);
</script>
Step 3: 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
var gumletConfig = {
workspace_id: 'YOUR_WORKSPACE_ID', // required: please replace with correct workspace id.
};
</script>
Step 4: Initialise Gumlet SDK
Initialise the Gumlet Insights SDK with the config JSON to start receiving data on your dashboard. You will then have to attach the player object in the initPlayer function, which we created in step 2.
<script type="module">
var analytics = new gumlet.GumletInsights(config);
function initPlayer() {
...
var player = new shaka.Player(video);
analytics.attach(player, {mediaElement: video}); // passing mediaElement is required for Shaka player
window.player = player;
}
</script>
Pass the video object as mediaElement
Please be sure to pass the mediaElement to the attach as well.
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 Insights SDK</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.1.2/shaka-player.compiled.js"></script>
<script type="module" src="`https://cdn.gumlytics.com/insights/3.0/main.mjs"></script>
</head>
<body>
<h1>Gumlet Insights SDK</h1>
<div id="player" style="width: 400px">
<video id="my-video" preload="true" width="640" height="264" controls></video>
</div>
<script type="module">
var config = {
workspace_id: 'YOUR_WORKSPACE_ID', // required: please replace with correct workspace id.
};
var analytics = new gumlet.GumletInsights(config);
let manifestUri = 'https://video.gumlet.io/5f462c1561cf8a766464ffc4/61dd877c6ec832ab2aaa1837/7.mpd'
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
function initPlayer() {
var startTime = new Date().getTime();
// Create a Player instance.
var video = document.getElementById('my-video');
var player = new shaka.Player(video);
analytics.attach(player, {mediaElement: video});
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
player.load(manifestUri).then(function() {
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
// onError is executed if the asynchronous load fails.
}).catch(onError);
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error('Error code', error.code, 'object', error);
}
document.addEventListener('DOMContentLoaded', initApp);
</script>
</body>
</html>
How to?
Add custom data
The SDK allows you to send first-party user data to our dashboard. 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 : '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 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 : '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
You can read full API documentation for this library at: https://www.npmjs.com/package/@gumlet/insights-js-core
