npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sdkblm-tracking

v1.2.0

Published

Ads Event Tracking

Downloads

2

Readme

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

License

MIT ©