@gumlet/insights-js-core 1.0.1 → 1.1.0

package/.github/workflows/main.yml

@@ -0,0 +1,87 @@
+name: Test and deploy
+on:
+  push:
+    tags:
+    - "*"
+
+jobs:
+  # test:
+  #   runs-on: ubuntu-20.04
+
+  #   steps:
+  #   - uses: actions/checkout@v3
+  #   - uses: actions/setup-node@v3
+  #     with:
+  #       node-version: 16
+
+  #   - name: Test
+  #     run: |
+  #       sudo apt-get update
+  #       sudo apt-get install -y gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget libgbm-dev
+  #       npm ci
+  #       npm test
+
+  build_and_publish:
+    runs-on: ubuntu-latest
+    # needs: [test]
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        registry-url: 'https://registry.npmjs.org'
+    - name: Build
+      run: |
+        npm ci
+        npm run build:release
+        npm publish
+      env:
+        NODE_ENV: "production"
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+    - name: Upload artifact
+      uses: actions/upload-artifact@v3
+      with:
+        name: insights-js-core-build
+        path: build/
+        retention-days: 5
+
+  deploy_to_s3:
+    runs-on: ubuntu-20.04
+    needs: [build_and_publish]
+
+    steps:
+      - name: Download artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: insights-js-core-build
+          path: ./build
+
+      - name: Set up Python
+        uses: actions/setup-python@v3
+        with:
+          python-version: '3.10'
+
+      - name: Deploy to S3
+        run: |
+          pip install awscli
+          aws s3 cp ./build/release/ s3://gumlet-cdn/insights/1.0/ --cache-control "public, s-maxage=31536000, max-age=172800" --region us-east-1 --recursive --acl public-read
+          curl -X PURGE -H Fastly-Key:$FASTLY_API_TOKEN https://cdn.gumlytics.com/insights/1.0/gumlet-insights.min.js
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          FASTLY_API_TOKEN: ${{ secrets.FASTLY_API_TOKEN }}
+
+
+      - name: Slack Notification
+        if: always()
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_WEBHOOK: https://hooks.slack.com/services/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
+          SLACK_USERNAME: Github-Slack
+          SLACK_ICON_EMOJI: ":cat:"
+          SLACK_COLOR: ${{ job.status }}
+          SLACK_TITLE: ${{ github.repository }}:${{github.ref_name}}
+          SLACK_MESSAGE: ${{ job.status }}
+          SLACK_FOOTER: ""

package/.gitlab-ci.yml

@@ -0,0 +1,54 @@
+stages:
+  # - test
+  - build
+  - deploy
+
+# test_js:
+#   stage: test
+#   image: node:16
+#   script:
+#     - apt-get update && apt-get install -y gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget libgbm-dev
+#     - npm ci
+#     - npm test
+#   rules:
+#    - if: '$CI_COMMIT_TAG == "prod"'
+
+build_js:
+  stage: build
+  image: node:16
+  script:
+    - npm ci
+    - npm run build:release
+  artifacts:
+    paths:
+      - build/
+    expire_in: 1 day
+  only:
+    - tags
+  except:
+    - branches
+
+deploy_to_npm:
+  stage: deploy
+  image: node:16
+  script:
+    - 'echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc'
+    - cd build/release/ && npm publish --access public
+  only:
+    - tags
+  except:
+    - branches
+
+deploy_to_s3:
+  stage: deploy
+  image: python:3.9
+  script:
+    - apt-get update && apt-get install -y curl
+    - pip install awscli
+    - aws s3 cp ./build/release/ s3://gumlet-cdn/insights/1.0/ --cache-control "public, s-maxage=31536000, max-age=172800" --region us-east-1 --recursive --acl public-read
+    - curl -X PURGE -H Fastly-Key:$FASTLY_API_TOKEN https://cdn.gumlytics.com/insights/1.0/gumlet-insights.min.js
+  only:
+    - tags
+  except:
+    - branches
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Gumlet Pte. Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# Gumlet Analytics Collector
+
+## Prerequisites
+
+* Node >= 8.x
+* Yarn package manager: https://yarnpkg.com
+
+NOTE: `npm` will also work with the same scripts added the `run ...` command.
+
+## Setup
+
+```
+yarn install
+```
+
+## Build scripts
+
+```
+yarn build:debug
+```
+
+```
+yarn build:release
+```
+
+## Dev mode
+
+```
+yarn start // run webpack-dev-server
+```

package/bitbucket-pipelines.yml

@@ -0,0 +1,35 @@
+pipelines:
+  tags:
+    '*':
+      # - step:
+      #     name: Test
+      #     image: node:16
+      #     caches:
+      #       - node
+      #     script:
+      #       - apt-get update
+      #       - apt-get install -y gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget libgbm-dev
+      #       - npm ci
+      #       - npm test
+      - step:
+          name: Build and Publish
+          image: node:16
+          caches:
+            - node
+          artifacts:
+            - build/**
+          script:
+            - 'echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc'
+            - export NODE_ENV="production"
+            - npm ci
+            - npm run build:release
+            - npm publish
+      - step:
+            name: Deploy to S3
+            image: python:3.10
+            caches:
+              - pip
+            script:
+              - pip install awscli
+              - aws s3 cp ./build/release/ s3://gumlet-cdn/insights/1.1/ --cache-control "public, s-maxage=31536000, max-age=172800" --region us-east-1 --recursive --acl public-read
+              - curl -X PURGE -H Fastly-Key:$FASTLY_API_TOKEN https://cdn.gumlytics.com/insights/1.1/gumlet-insights.min.js

package/docs/payload-documentation.md

@@ -0,0 +1,72 @@
+# Analytics Payload Documentation
+
+Bitmovin Analytics collects information about playback behavior in samples. Each sample has a `timestamp` as well as a `duration` and thus represents a chunk of time that passed on the client in which the player was in a distinct state.
+
+To illustrate here is the beginning of a typical session while the player is going through the different states. Each line represents one JSON payload that gets sent back to the client.
+
+```
+player startup:                  +----+
+video startup:                        +-+
+video playback @500kbps:                +--------+
+video playback @1mbps:                           +---------+
+```
+
+If we look at the first sample the json payload would contain the following information:
+
+```
+time: <client timestamp>
+state: 'startup'
+duration: 300ms
+playerStartupTime: 300ms
+videoStartupTime: 0ms
+videoBitrate: 0
+```
+
+The second sample that represents the video startup would therefore look like this:
+
+```
+time: <client timestamp>
+state: 'video startup'
+duration: 60ms
+playerStartupTime: 0
+videoStartupTime: 60ms
+videoBitrate: 0
+```
+
+and the third that represents the initial playout at 500 kbps over 1 second:
+
+```
+time: <client timestamp>
+state: 'playing'
+duration: 1000ms
+playerStartupTime: 0
+videoStartupTime: 0
+videoBitrate: 500000
+```
+
+as well as the last sample that gets sent after the quality switch up:
+
+```
+time: <client timestamp>
+state: 'playing'
+duration: 1000ms
+playerStartupTime: 0
+videoStartupTime: 0
+videoBitrate: 1000000
+```
+
+As you can see a lot of fields with `0` are being sent subsequently. The JSON payload always has the same fields, but depending on the state the player is in they are either set or not. There are some fields that are always set, notably the custom data fields like `videoId`, `cdnProvider`, `customData1-5` as well as fields that don't represent a distinct state change but rather information about the state of the player during the current sample, regardless of it's state like `streamFormat` (which stream technology was used, DASH/HLS or Progressive) or the `playerTech` (either native, html5 or flash).
+
+A full list of the JSON payload fields and their description can be found here:
+
+[Payload Field Documentation](https://docs.google.com/spreadsheets/d/1sSFGtKfOS-efQFDB6FFbNPYFXUnauHBqhyP5AFt4ZJA/edit?usp=sharing)
+
+All these fields need to be supplied with the right datatype for the ingest to accept them.
+
+## Custom Integrations
+
+When developing a custom integration we strongly recommend you follow roughly the same model as the web collector. The code is open source and can be viewed on GitHub: [bitmovin-analytics-collector](https://github.com/bitmovin/bitmovin-analytics-collector)
+
+The web collector follows the following approach:
+
+A core class that maintains the current analytics sample that will be sent to the server once an event happens. This sample contains all the background non-event based information about the state we discussed earlier (streamFormat, videoId etc..). A state machine keeps is hooked up to the player events and whenever the state machine transitions to a new state the current analytics sample is being sent off to the server along with the relevant information from the state transition.

package/html/bitmovin.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+
+  <link rel="icon" href="https://ox4zindgwb3p1qdp2lznn7zb-wpengine.netdna-ssl.com/wp-content/uploads/2016/02/cropped-icon-32x32.png" sizes="32x32" />
+  <link rel="icon" href="https://ox4zindgwb3p1qdp2lznn7zb-wpengine.netdna-ssl.com/wp-content/uploads/2016/02/cropped-icon-192x192.png" sizes="192x192" />
+  <link rel="apple-touch-icon-precomposed" href="https://ox4zindgwb3p1qdp2lznn7zb-wpengine.netdna-ssl.com/wp-content/uploads/2016/02/cropped-icon-180x180.png" />
+  <meta name="msapplication-TileImage" content="https://bitmovin.com/wp-content/uploads/2016/02/cropped-icon-270x270.png" />
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
+  </script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
+  </script>
+
+  <title>Bitdash Analytics</title>
+
+  <!-- <script type="text/javascript" src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/7.5/bitmovinplayer.js"></script> -->
+  <script type="text/javascript" src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/8/bitmovinplayer.js"></script>
+  <script type="text/javascript" src="/build/debug/gumlet-insights.min.js"></script>
+</head>
+<body>
+<div id="player" style="width: 400px"></div>
+    <a href="bitmovin.html">Click</a>
+    <a href="#" id="click">Click</a>
+  <script type="text/javascript">
+
+    /* global bitmovin */
+
+    var config = {
+      // Your bitmovin analytics key
+      // TODO: remove the key after testing
+      key: 'e73a3577-d91c-4214-9e6d-938fb936818a',
+      property_id: '6Xlq31eG',
+      // Your player key (bitmovin, jw, ..) (optional)
+      playerKey: 'a6e31908-550a-4f75-b4bc-a9d89880a733',
+      player: gumlet.insights.Players.BITMOVIN,
+      cdnProvider: gumlet.insights.CdnProviders.AKAMAI,
+      debug: true,
+      customData1: 'customData1',
+      customData2: 'customData2',
+      experimentName: 'bitmovinanalytics-local',
+      videoId: 'Sintel',
+      userId: 'customer#1'
+    };
+    var analytics = gumlet.insights(config);
+
+    var conf = {
+      key: 'a6e31908-550a-4f75-b4bc-a9d89880a733',
+      playback: {
+        autoplay: true
+      },
+      source:    {
+        dash: 'http://bitdash-a.akamaihd.net/content/sintel/sintel.mpd',
+        hls:  'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
+        progressive:  [{
+          url:  'https://bitdash-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
+          type: 'video/mp4'
+        }]
+      }
+    };
+    var player = bitmovin.player('player');
+    player.setup(conf);
+
+    analytics.register(player);
+
+    document.getElementById('click').onclick = function () {
+      analytics.setCustomDataOnce({ customData1: 'after-click' });
+    };
+
+// window.setTimeout(function () {
+//   player.load({
+//       hls:  "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
+//   });
+// }, 5000)
+
+  </script>
+</body>
+</html>

package/html/dashjs.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+
+  <link rel="icon" href="https://assets.gumlet.io/assets/round-logo.png?w=32" sizes="32x32" />
+  <link rel="icon" href="https://assets.gumlet.io/assets/round-logo.png?w=192" sizes="192x192" />
+  <link rel="apple-touch-icon-precomposed" href="https://assets.gumlet.io/assets/round-logo.png?w=180" />
+  <meta name="msapplication-TileImage" content="https://assets.gumlet.io/assets/round-logo.png?w=270" />
+  
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
+  </script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
+  </script>
+
+  <title>DashJS Player Insights</title>
+
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.6/dash.all.debug.js"></script> -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.1.0/dash.all.debug.min.js"></script>
+
+  <script type="text/javascript" src="/build/debug/gumlet-insights.min.js"></script>
+
+</head>
+<body>
+<div id="player" style="width: 400px"></div>
+
+  <video id="my-video" preload="none" width="640" height="264" controls></video>
+
+  <p><a href="/html/dashjs.html">Click</a></p>
+
+  <script type="text/javascript">
+
+    var config = {
+      property_id: 'BNVzRZKD',
+      customData1: 'some custom data',
+      customData2: 'customData2',
+      videoId: 'Sintel',
+      userId: 'customer#1'
+    };
+
+    var analytics = gumlet.insights(config);
+    var url = "https://video.gumlet.io/5f462c1561cf8a766464ffc4/61dd877c6ec832ab2aaa1837/7.mpd";
+    var player = dashjs.MediaPlayer().create();
+    
+    analytics.registerDashJSPlayer(player);
+
+    player.initialize(document.querySelector("#my-video"), url, true);
+
+  </script>
+
+</body>
+</html>

package/html/hlsjs.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+
+  <link rel="icon" href="https://assets.gumlet.io/assets/round-logo.png?w=32" sizes="32x32" />
+  <link rel="icon" href="https://assets.gumlet.io/assets/round-logo.png?w=192" sizes="192x192" />
+  <link rel="apple-touch-icon-precomposed" href="https://assets.gumlet.io/assets/round-logo.png?w=180" />
+  <meta name="msapplication-TileImage" content="https://assets.gumlet.io/assets/round-logo.png?w=270" />
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
+  </script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
+  </script>
+
+  <title>HlsJS Player Insights</title>
+
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.7.11/hls.min.js"></script> -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.1.1/hls.min.js"></script>
+  <script type="text/javascript" src="/build/debug/gumlet-insights.min.js"></script>
+
+</head>
+<body>
+<div id="player" style="width: 400px"></div>
+
+  <video id="my-video" preload="true" autoplay width="640" height="264" controls></video>
+
+  <p><a href="/html/hlsjs.html">Click</a></p>
+
+  <script type="text/javascript">
+
+    var config = {
+      property_id: 'BNVzRZKD',
+      debug: true,
+      customData1: 'customData1',
+      customData2: 'customData2',
+      videoId: 'Sintel',
+      userId: 'customer#1'
+    };
+
+    var analytics = gumlet.insights(config);
+
+    if(Hls.isSupported()) {
+
+      var video = document.getElementById('my-video');
+      var time = new Date().getTime();
+      var hls = new Hls({
+        // disable preload
+        autoStartLoad: true
+      });
+
+      analytics.registerHLSJSPlayer(hls, {starttime: time});
+
+      hls.attachMedia(video);
+      hls.loadSource('https://video.gumlet.io/5f462c1561cf8a766464ffc4/61b8ac77b7e0439691e7c2af/1.m3u8');
+
+      video.addEventListener('play', function() {
+        // needed for when preload disabled
+        hls.startLoad();
+      });
+
+    } else {
+      window.alert('Hls.js can not run in this browser');
+    }
+
+  </script>
+
+</body>
+</html>

package/html/html5.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+
+  <link rel="icon" href="https://assets.gumlet.io/assets/round-logo.png?w=32" sizes="32x32" />
+  <link rel="icon" href="https://assets.gumlet.io/assets/round-logo.png?w=192" sizes="192x192" />
+  <link rel="apple-touch-icon-precomposed" href="https://assets.gumlet.io/assets/round-logo.png?w=180" />
+  <meta name="msapplication-TileImage" content="https://assets.gumlet.io/assets/round-logo.png?w=270" />
+  
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
+  </script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
+  </script>
+
+  <title>HTML5 Player Insights</title>
+
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.6/dash.all.debug.js"></script> -->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.1.0/dash.all.debug.min.js"></script> -->
+
+  <script type="text/javascript" src="/build/debug/gumlet-insights.min.js"></script>
+
+</head>
+<body>
+<div id="player" style="width: 400px">
+
+  <video id="my-video" preload="none" autoplay controls style="width:100%;">
+    <source src="https://gumlet.sgp1.digitaloceanspaces.com/video/sample_1.mp4" type="video/mp4">
+  </video>
+</div>
+
+  <p><a href="dashjs.html">Click</a></p>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
+
+  <script type="text/javascript">
+
+    var config = {
+      property_id: 'BNVzRZKD',
+      customData1: 'some custom data',
+      customData2: 'customData2',
+      experimentName: 'bitmovinanalytics-local',
+      videoId: 'Sintel',
+      userId: 'customer#1'
+    };
+
+    var analytics = gumlet.insights(config);
+
+    var video = document.getElementById('my-video');
+
+    analytics.registerHTML5Player(video);
+
+  </script>
+
+</body>
+</html>