Sdkblm-tracking NPM

SDKBLMTracking

Install

npm install --save sdkblm-tracking

Usage

After install the library the next step is to import the sdkblmTracking library in our project

import sdkblmTracking from 'sdkblm-tracking'

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

events = new sdkblmTracking('http://ads.json')

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 events.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 events.getAvailPosition(this.state.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 events.sendEvent(this.state.time, this.state.action)

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

import React from 'react'

import sdkblmTracking from 'sdkblm-tracking'
import 'sdkblm-tracking/dist/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      action: 'mute',
      adId: '_PT10M_0',
      time: 660000,
      events: new sdkblmTracking('http://ads.json')
    }

    this.handleChangeUrl = this.handleChangeUrl.bind(this)
    this.handleChangeAction = this.handleChangeAction.bind(this)
    this.handleChangeTime = this.handleChangeTime.bind(this)
    this.handleCallEvets = this.handleCallEvets.bind(this)
    this.handleAdAction = this.handleAdAction.bind(this)
    this.handleAvailAction = this.handleAvailAction.bind(this)
  }

  handleChangeUrl(e) {
    this.setState({ url: e.target.value })
  }

  handleChangeAction(e) {
    this.setState({ action: e.target.value })
  }

  handleChangeTime(e) {
    this.setState({ time: e.target.value })
  }

  async handleAvailAction() {
    const avail = await this.state.events.getAvailPosition(this.state.time)
    console.log(avail)
  }

  async handleAdAction() {
    // const events = new sdkblmTracking()
    const ads = await this.state.events.getAds()
    console.log(ads)
  }

  async handleCallEvets() {
    const objavails = await this.state.events.sendEvent(
      this.state.time,
      this.state.action
    )
    console.log(objavails)
  }

  render() {
    return (
      <div className='main-content'>
        <form>
          <div className='inputUrl'>
            <label htmlFor='adsJson'>Url:</label>
            <input
              type='text'
              id='adsJson'
              onChange={this.handleChangeUrl}
              value='https://servicios.site/BLDash/ads.json'
            />
          </div>
          <div>
            <label htmlFor='actiontype'>Action:</label>
            <select id='actiontype' onChange={this.handleChangeAction}>
              <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' onChange={this.handleChangeTime}>
              <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={this.handleCallEvets}>
              Send Event
            </button>
            <button type='button' onClick={this.handleAdAction}>
              Get Ads
            </button>
            <button type='button' onClick={this.handleAvailAction}>
              Get Avail Position
            </button>
          </div>
        </form>
      </div>
    )
  }
}

export default App