SDKs

Shaka Player (Web)

Integrate Gumlet Insights with Shaka Player and monitor playback performance.

Step 1: Install the Gumlet Insights SDK

Include Shaka Player first, then the Insights SDK:

<!-- Include Shaka Player -->
<script src="/path/to/shaka-player.js"></script>

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

Step 2: Initialise the player 

<script type="module">
  const manifestUri =
    'https://video.gumlet.io/5f462c1561cf8a766464ffc4/61dd877c6ec832ab2aaa1837/7.mpd';

  function initApp() {
    shaka.polyfill.installAll();

    if (shaka.Player.isBrowserSupported()) {
      initPlayer();
    } else {
      console.error('Browser not supported!');
    }
  }

  async function initPlayer() {
    const video = document.getElementById('my-video');
    const player = new shaka.Player(video);
    window.player = player;

    player.addEventListener('error', onErrorEvent);

    try {
      await player.load(manifestUri);
      console.log('The video has now been loaded!');
    } catch (error) {
      onError(error);
    }
  }

  function onErrorEvent(event) {
    onError(event.detail);
  }

  function onError(error) {
    console.error('Error code', error.code, 'object', error);
  }

  document.addEventListener('DOMContentLoaded', initApp);
</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 Shaka player

Create Insights once, then attach inside initPlayer. mediaElement is required for Shaka.

<script type="module">
  const gumletInsights = new gumlet.GumletInsights(gumletConfig);

  async function initPlayer() {
    const video = document.getElementById('my-video');
    const player = new shaka.Player(video);

    await gumletInsights.attach(player, { mediaElement: video });

    window.player = player;
    // ... load manifest, error handlers, etc.
  }
</script>

Pass the video element as mediaElement

Shaka attach requires { mediaElement: video } in addition to the shaka.Player instance.

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/shaka-player/4.1.2/shaka-player.compiled.js"></script>
    <script type="module" src="https://cdn.gumlytics.com/insights/4.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">
      const gumletConfig = {
        workspace_id: 'YOUR_WORKSPACE_ID', // required
      };
      const gumletInsights = new gumlet.GumletInsights(gumletConfig);

      const manifestUri =
        'https://video.gumlet.io/5f462c1561cf8a766464ffc4/61dd877c6ec832ab2aaa1837/7.mpd';

      function initApp() {
        shaka.polyfill.installAll();

        if (shaka.Player.isBrowserSupported()) {
          initPlayer();
        } else {
          console.error('Browser not supported!');
        }
      }

      async function initPlayer() {
        const video = document.getElementById('my-video');
        const player = new shaka.Player(video);

        await gumletInsights.attach(player, { mediaElement: video });

        window.player = player;
        player.addEventListener('error', onErrorEvent);

        try {
          await player.load(manifestUri);
          console.log('The video has now been loaded!');
        } catch (error) {
          onError(error);
        }
      }

      function onErrorEvent(event) {
        onError(event.detail);
      }

      function onError(error) {
        console.error('Error code', error.code, 'object', error);
      }

      document.addEventListener('DOMContentLoaded', initApp);
    </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(player, { mediaElement: 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


Previous
HLS.js (Web)
Next
React Player (Web)