amp-adsenginejs
v0.3.0-telkom
Published
Ads Engine JS Library
Maintainers
silveriusdodiReadme
Advertisement Engine JS Library by PT. Amandjaja Multifortuna Perkasa
Dependencies
Installation
Node Package Manager
npm install --save amp-adsenginejsYarn
yarn add amp-adsenginejsHow to Use
Import below module in your html head script.
<script src="{location}/jquery.min.js"></script> <script src="{location}/statistic.bundle.js"></script> <script src="{location}/adsengine.bundle.js"></script>Config your Advertisement Engine Object on javascript.
var ads = new AdsEngine({ publisher_id: "YOUR_PUBLISHER_ID" });with global Unit ID
var ads = new AdsEngine({ publisher_id: "YOUR_PUBLISHER_ID", unit_id: "YOUR_UNIT_ID" });Embed html tag in your web script.
<body> <!-- SOMEWHERE IN YOUR PAGE --> <div id="ads1" class="adsengine" data-unit="YOUR_UNIT_ID" data-type="image" data-size="REC_640_320" data-remove="1"> </div> <!-- SOMEWHERE IN YOUR PAGE --> </body>Table of data tag (
data-*) to manage the advertisement.|No|Tag|Description| |:---:|---|--------| |1|
unit|Your frame Unit ID.| |2|type|Frame advertisement type, can be specify asimageorvideo, make sure when you create Unit in our Publisher Dashboard you specify a right type.| |3|size|Advertisement size, use our standardization size code.| |4|class|Define your css class to inject it inimgtag of advertisement. Sample usagedata-class="img200 active bg-red".| |5|resize|Resize advertisement image with your own size, you have to use same scale to prevent image stretched. Usedata-resize="true"and specifydata-widthanddata-height. Ordata-resize="class"to override size with css style, and inject your css class withdata-class.| |6|width|Set Image width. Sample usagesdata-width="320",data-width="50%",data-width="auto".| |7|height|Set Image height. Sample usagesdata-height="320",data-height="50%",data-height="auto".| |8|components|Inject data attributes for some case. JSON Object format is a must. Sampledata-components="{'city':'Jakarta'}".| |9|remove|Remove advertisement tag if ads not found. Sample usagedata-remove="true".|Call globally advertisement delivery engine in your javascript.
ads.push();Call advertisement delivery engine independently.
getAds(type, size, callback)Specifying Unit ID in global configuration is a must to use this function.
ads.getAds(Adsengine.IMAGE, Adsengine.IMG_640_320, function ($ads) { if($ads){ // HANDLE when ads found // Use below function if you want to place the ads to your // advertisement frame automatically, use 'id' is recommended. ads.bindAds('#ads1',$ads); }else{ // HANDLE function when ads not found $('#ads1').html("<h1>DEFAULT ADS</h1>") } });getAds(unit, type, size, filter, callback)Specifying Unit ID directly.
ads.getAds("YOUR_UNIT_ID", Adsengine.IMAGE, Adsengine.IMG_640_320, [], function ($ads) { if($ads){ // HANDLE when ads found // Use below function if you want to place the ads to your // advertisement frame automatically, use 'id' is recommended. ads.bindAds('#ads1',$ads); }else{ // HANDLE function when ads not found $('#ads1').html("<h1>DEFAULT ADS</h1>") } });Table of Ads Type.
|No|Tag|Description| |:---:|---|--------| |1|Adsengine.
IMAGE|Specify image advertisement type.| |2|Adsengine.VIDEO|Specify video advertisement type.|Table of Ads Size.
|No|Tag|Description| |:---:|---|--------| |1|Adsengine.
IMG_640_320|Advertisement with image size 640px x 320px.| |2|Adsengine.IMG_320_100|Advertisement with image size 320px x 100px.| |3|Adsengine.IMG_180_150|Advertisement with image size 180px x 150px.| |4|Adsengine.IMG_300_250|Advertisement with image size 300px x 250px.| |5|Adsengine.REC_336_280|Advertisement with image size 336px x 280px.| |6|Adsengine.IMG_200_200|Advertisement with image size 200px x 200px.| |7|Adsengine.IMG_250_250|Advertisement with image size 250px x 250px.| |8|Adsengine.IMG_619_197|Advertisement with image size 619px x 197px.| |9|Adsengine.IMG_500_500|Advertisement with image size 500px x 500px.| |10|Adsengine.IMG_640_1280|Advertisement with image size 640px x 1280px.| |11|Adsengine.IMG_645_360|Advertisement with image size 645px x 360px.| |12|Adsengine.IMG_645_1048|Advertisement with image size 645px x 1048px.| |13|Adsengine.IMG_950_525|Advertisement with image size 950px x 525px.| |14|Adsengine.IMG_950_250|Advertisement with image size 950px x 250px.| |15|Adsengine.IMG_640_720|Advertisement with image size 640px x 720px.| |16|Adsengine.IMG_645_180|Advertisement with image size 645px x 180px.| |17|Adsengine.IMG_970_600|Advertisement with image size 970px x 600px.| |18|Adsengine.IMG_970_250|Advertisement with image size 970px x 250px.| |19|Adsengine.IMG_785_440|Advertisement with image size 785px x 440px.| |20|Adsengine.IMG_120_600|Advertisement with image size 120px x 600px.| |21|Adsengine.IMG_728_90|Advertisement with image size 728px x 90px.| |22|Adsengine.IMG_310_110|Advertisement with image size 310px x 110px.| |23|Adsengine.IMG_320_600|Advertisement with image size 320px x 600px.| |24|Adsengine.IMG_320_150|Advertisement with image size 320px x 150px.| |25|Adsengine.IMG_350_50|Advertisement with image size 350px x 50px.| |26|Adsengine.IMG_320_427|Advertisement with image size 320px x 427px.|