HTML5 (Web)
Integrate Gumlet Insights with an HTML5 <video> element and monitor playback performance.
Step 1: Install the Gumlet Insights SDK
Include the SDK in the <head> of your page:
<!-- Include gumlet insights sdk -->
<script type="module" src="https://cdn.gumlytics.com/insights/4.0/main.mjs"></script>
Step 2: 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 (user, video, customData1–5) is described in custom data options.
<script type="module">
const gumletConfig = {
workspace_id: 'YOUR_WORKSPACE_ID', // required
};
</script>
Step 3: Attach Insights to the video element
<script type="module">
const video = document.getElementById('my-video');
const gumletInsights = new gumlet.GumletInsights(gumletConfig);
await gumletInsights.attach(video);
</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 type="module" src="https://cdn.gumlytics.com/insights/4.0/main.mjs"></script>
</head>
<body>
<h1>Gumlet Insights SDK</h1>
<video id="my-video" width="640" height="264" controls>
<source src="https://gumlet.sgp1.digitaloceanspaces.com/video/sample_1.mp4" type="video/mp4" />
</video>
<script type="module">
const gumletConfig = {
workspace_id: 'YOUR_WORKSPACE_ID', // required
};
const video = document.getElementById('my-video');
const gumletInsights = new gumlet.GumletInsights(gumletConfig);
await gumletInsights.attach(video);
</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(video);
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
