Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basil79/ads-manager
HTML5 Video Ads Manager based on @dailymotion/vast-client
https://github.com/basil79/ads-manager
ad ad-manager adpod ads-manager advertising iab instream-video-ads javascript outstream-video-ads vast vast-client vast-client-js video video-ads video-player vmap vpaid
Last synced: 2 months ago
JSON representation
HTML5 Video Ads Manager based on @dailymotion/vast-client
- Host: GitHub
- URL: https://github.com/basil79/ads-manager
- Owner: basil79
- License: apache-2.0
- Created: 2021-12-18T09:31:44.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-12T16:59:47.000Z (8 months ago)
- Last Synced: 2024-10-02T14:47:35.646Z (4 months ago)
- Topics: ad, ad-manager, adpod, ads-manager, advertising, iab, instream-video-ads, javascript, outstream-video-ads, vast, vast-client, vast-client-js, video, video-ads, video-player, vmap, vpaid
- Language: JavaScript
- Homepage: https://adserve.tv
- Size: 1.12 MB
- Stars: 25
- Watchers: 4
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badgen.net/npm/v/ads-manager)
[](https://badgen.net/npm/dw/ads-manager)
[](https://badgen.net/github/license/basil79/ads-manager)
# ads-manager
> HTML5 Video Ads Manager based on @dailymotion/vast-client
This SDK supports:
- VAST versions 2.0, 3.0 and 4.0+ up to 4.2 (included) - Complies with the [VAST 4.2 specification](https://iabtechlab.com/wp-content/uploads/2019/06/VAST_4.2_final_june26.pdf) provided by the [Interactive Advertising Bureau (IAB)](https://www.iab.com/).
- Inline Linear
- Wrapper
- AdPod
- Tracker for VAST tracking events
- Media Types (Assets):
- `video/mp4; codecs=“avc1.42E01E, mp4a.40.2”`
- `video/webm; codecs=“vp8, vorbis”`
- `video/ogg; codecs=“theora, vorbis”`
- `video/3gpp; codecs=“mp4v.20.8, samr”` (Safari)
- `application/javascript` (VPAID)
- [VPAID 2.0](https://iabtechlab.com/wp-content/uploads/2016/04/VPAID_2_0_Final_04-10-2012.pdf)
This README is for developers who want to use and/or contribute to ads-manager.
**Table of Contents**
- [Usage](#Usage)
- [Documentation](#Documentation)
- [Install](#Install)
- [Build](#Build)
- [Run](#Run)
- [Contribute](#Contribute)
## Usage
```javascript
import AdsManager from 'ads-manager';
// Get your video element
const videoElement = document.getElementById('video-element');
// Get your HTML element for ad container
const adContainer = document.getElementById('ad-container');
// Define ads manager and pass ad container
const adsManager = new AdsManager(adContainer);
// Subscribe for events
// AdsManagerLoaded
adsManager.addEventListener('AdsManagerLoaded', function() {
// Get height and width of your video element
let width = videoElement.clientWidth;
let height = videoElement.clientHeight;
let viewMode = 'normal'; // fullscreen
// Init
try {
adsManager.init(width, height, viewMode);
} catch (adError) {
// Play your context without ads, if an error occurs
}
});
// AdError
adsManager.addEventListener('AdError', function(adError) {
if(adsManager) {
// Removes ad assets loaded at runtime that need to be properly removed at the time of ad completion
// and stops the ad and all tracking.
adsManager.abort();
}
// ...
});
// AdLoaded
adsManager.addEventListener('AdLoaded', function(adEvent) {
// Ad loaded, awaiting start
// Check if ad type is linear
if(adEvent.isLinear()) {
try {
// Start ad
adsManager.start();
} catch (adError) {
// Play video content without ads in case of error
}
} else {
// Ad is not linear
}
});
// AdStarted
adsManager.addEventListener('AdStarted', function() {
// Pause your video content
videoElement.pause();
});
// ...
// AdDurationChange
// AdSizeChange
// AdImpression
// AdVideoStart
// AdVideoFirstQuartile
// AdVideoMidpoint
// AdVideoThirdQuartile
// AdVideoComplete
// AdPaused
// AdPlaying
// AdStopped
// AdSkipped
// AdClickThru
// ...
// AllAdsCompleted
adsManager.addEventListener('AllAdsCompleted', function() {
// Play your video content
videoElement.play();
});
// VAST tag url
let vastUrl = 'your VAST tag url';
// Request Ads
adsManager.requestAds(vastUrl);
/*
// VAST XML
let vastXML = `
`;
adsManager.requestAds(vastXML);
*/
```
## Documentation
For the full documentation:
* [AdsManager](docs/ADSMANAGER.md)
### Pre-bundled versions
#### Browser script
A pre-bundled version of ads-manager is available: [`ads-manager.js`](dist/ads-manager.js) [minified].
You can add the script directly to your page and access the library's components through the `adserve` object.
```html
```
```javascript
// Get your HTML element for ad container
const adContainer = document.getElementById('ad-container');
// Define ads manager and pass ad container
const adsManager = new adserve.AdsManager(adContainer);
```
## Install
### Get Started
ads-manager is available as an NPM package and can be easily installed with:
$ npm i ads-manager
### Using Git
$ git clone https://github.com/basil79/ads-manager
$ cd ads-manager
$ npm ci
## Build
To build the project for development:
$ npm run build:dev
To build the project for production:
$ npm run build:prod
This will generate the following file:
+ `./dist/ads-manager.js` - Minified browser production code
## Run
$ npm start
Then navigate to: http://localhost:8081 in your browser
### Supported Browsers
ads-manager is supported all modern browsers.
## Contribute
See [CONTRIBUTING](./CONTRIBUTING.md)