HLS.js (Web)
Integrate Gumlet Insights with HLS.js and monitor playback performance.
Step 1: Install the Gumlet Insights SDK
Include HLS.js first, then the Insights SDK:
<!-- Include HLS.js -->
<script src="/path/to/hls.js"></script>
<!-- Include gumlet insights sdk after HLS.js -->
<script type="module" src="https://cdn.gumlytics.com/insights/4.0/main.mjs"></script>
Step 2: Initialise the player
<script type="module">
const video = document.getElementById('my-video');
const hls = new Hls({
autoStartLoad: false, // disable preload
});
hls.attachMedia(video);
hls.loadSource('<VIDEO URL>');
video.addEventListener('play', function () {
hls.startLoad();
});
</script>
Step 3: Create the config
All data is associated with a workspace ID from Workspaces. Pass it as workspace_id — this is the only required field.
Optional first-party metadata: custom data options.
<script type="module">
const gumletConfig = {
workspace_id: 'YOUR_WORKSPACE_ID', // required
};
</script>
Step 4: Attach Insights to the HLS.js instance
<script type="module">
const gumletInsights = new gumlet.GumletInsights(gumletConfig);
await gumletInsights.attach(hls);
</script>
Done!
Once integrated, 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/hls.js/1.1.1/hls.min.js"></script>
<script type="module" src="https://cdn.gumlytics.com/insights/4.0/main.mjs"></script>
</head>
<body>
<h1>Gumlet Insights SDK</h1>
<video id="my-video" preload="true" width="640" height="264" controls></video>
<script type="module">
const video = document.getElementById('my-video');
const hls = new Hls({
autoStartLoad: false,
});
hls.attachMedia(video);
hls.loadSource('https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8');
video.addEventListener('play', function () {
hls.startLoad();
});
const gumletConfig = {
workspace_id: 'YOUR_WORKSPACE_ID', // required
};
const gumletInsights = new gumlet.GumletInsights(gumletConfig);
await gumletInsights.attach(hls);
</script>
</body>
</html>
How to?
Add custom data
Pass supported first-party fields on the config object. Full list: custom data options.
const gumletConfig = {
workspace_id: 'YOUR_WORKSPACE_ID', // required
userId: '123',
userEMail: 'oceane.bourgeois@example.com',
customVideoId: 'HIMYMSeason1Episode1',
customVideoTitle: 'Pilot',
customData1: 'campaign-a',
customData2: 'variant-b',
customData3: '',
customData4: '',
customData5: '',
};
const gumletInsights = new gumlet.GumletInsights(gumletConfig);
await gumletInsights.attach(hls);
Update user details after login
gumletInsights.updateCustomUserData({
userId: '123',
userEMail: 'christelle.robert@example.com',
});
Update video metadata when the title changes
gumletInsights.updateCustomVideoData({
customVideoId: 'HIMYMSeason1Episode2',
customVideoTitle: 'Episode 2',
});
Update additional slots
gumletInsights.updateCustomData({
customData1: 'campaign-b',
customData2: 'variant-c',
customData3: '',
customData4: '',
customData5: '',
});
API documentation
Full API reference: https://www.npmjs.com/package/@gumlet/insights-js-core
