sdkblm-tracking-js
v1.0.0
Published
Ads Event Tracking
Downloads
2
Readme
SDKBLMTracking JS
Install
npm install --save sdkblm-tracking-jsUsage
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>