Sdkblm-tracking-js NPM

SDKBLMTracking JS

Install

npm install --save sdkblm-tracking-js

Usage

Call the sdk blm js library in our project

<script src="../dist/sdkblm.min.js"></script>

Instantiate the class to be able to use the methods as required

const sdk = new sdkblm.events(document.getElementById('adsJson').value);

Methods

Once we instantiate our sdkblmTracking class we can call the methods

getAds

This method returns the called json structure and adds the time in milliseconds at each required level, adding the elements startTimeInMiliSeconds and durationInMiliSeconds

const ads = await sdk.getAds();

getAvailPosition

This method will return the avails object that corresponds to the time parameter based on startTime and endTime, endTime is calculated by adding starTime and the duration of the ad

@param int time

const avail = await sdk.getAvailPosition(time);

sendEvent

This method will return the elements contained in trackingEvents that correspond to the current time of the player and the perse event.

In addition, it performs the fetch action to each beacon Url contained in the response except for the clickThrough event in which case it will only return the object

@param int time

@param string action

const objavails = await sdk.sendEvent(time, actiontype);

Below we can see an example of the implementation of the class

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div className="main-content">
      <form>
        <div className="inputUrl">
          <label htmlFor="adsJson">Url:</label>
          <input
            type="text"
            id="adsJson"
            value="https://servicios.site/BLDash/ads.json"
          />
        </div>
        <div>
          <label htmlFor="actiontype">Action:</label>
          <select id="actiontype">
            <option value="mute">mute</option>
            <option value="midpoint">midpoint</option>
            <option value="firstQuartile">firstQuartile</option>
            <option value="thirdQuartile">thirdQuartile</option>
            <option value="unmute">unmute</option>
            <option value="complete">complete</option>
            <option value="fullscreen">fullscreen</option>
            <option value="impression">impression</option>
            <option value="pause">pause</option>
            <option value="start">start</option>
            <option value="clickThrough">clickThrough</option>
          </select>
        </div>
        <div>
          <label htmlFor="time">Time:</label>
          <select id="time">
            <option value="660000">660000</option>
            <option value="1295845">1295845</option>
            <option value="1265145">1265145</option>
            <option value="52.033">52033</option>
          </select>
        </div>
        <div className="controls">
          <button type="button" onClick="getEvents()">Send Event</button>
          <button type="button" onClick="getAds()">Get Ads</button>
          <button type="button" onClick="getAvailPosition()">
            Get Avail Position
          </button>
        </div>
      </form>
    </div>

    <script src="../dist/sdkblm.min.js"></script>
    <script language="javascript">
      const sdk = new sdkblm.events(document.getElementById('adsJson').value);

      async function getAds() {
        let res = await sdk.getAds();
        console.log(res);
      }

      async function getEvents() {
        const objavails = await sdk.sendEvent(
          document.getElementById('time').value,
          document.getElementById('actiontype').value
        );
        console.log(objavails);
      }

      async function getAvailPosition() {
        const avail = await sdk.getAvailPosition(
          document.getElementById('time').value
        );
        console.log(avail);
      }
    </script>
  </body>
</html>

@infinitebrahmanuniverse/nolb-sdk @everything-registry/sub-chunk-2723

1.0.0

3 years ago