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 unitYour frame Unit ID. 2 typeFrame advertisement type, can be specify as imageorvideo, make sure when you create Unit in our Publisher Dashboard you specify a right type.3 sizeAdvertisement size, use our standardization size code. 4 classDefine your css class to inject it in imgtag of advertisement. Sample usagedata-class="img200 active bg-red".5 resizeResize advertisement image with your own size, you have to use same scale to prevent image stretched. Use data-resize="true"and specifydata-widthanddata-height. Ordata-resize="class"to override size with css style, and inject your css class withdata-class.6 widthSet Image width. Sample usages data-width="320",data-width="50%",data-width="auto".7 heightSet Image height. Sample usages data-height="320",data-height="50%",data-height="auto".8 componentsInject data attributes for some case. JSON Object format is a must. Sample data-components="{'city':'Jakarta'}".9 removeRemove advertisement tag if ads not found. Sample usage data-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. IMAGESpecify image advertisement type. 2 Adsengine. VIDEOSpecify video advertisement type. Table of Ads Size.
No Tag Description 1 Adsengine. IMG_640_320Advertisement with image size 640px x 320px. 2 Adsengine. IMG_320_100Advertisement with image size 320px x 100px. 3 Adsengine. IMG_180_150Advertisement with image size 180px x 150px. 4 Adsengine. IMG_300_250Advertisement with image size 300px x 250px. 5 Adsengine. REC_336_280Advertisement with image size 336px x 280px. 6 Adsengine. IMG_200_200Advertisement with image size 200px x 200px. 7 Adsengine. IMG_250_250Advertisement with image size 250px x 250px. 8 Adsengine. IMG_619_197Advertisement with image size 619px x 197px. 9 Adsengine. IMG_500_500Advertisement with image size 500px x 500px. 10 Adsengine. IMG_640_1280Advertisement with image size 640px x 1280px. 11 Adsengine. IMG_645_360Advertisement with image size 645px x 360px. 12 Adsengine. IMG_645_1048Advertisement with image size 645px x 1048px. 13 Adsengine. IMG_950_525Advertisement with image size 950px x 525px. 14 Adsengine. IMG_950_250Advertisement with image size 950px x 250px. 15 Adsengine. IMG_640_720Advertisement with image size 640px x 720px. 16 Adsengine. IMG_645_180Advertisement with image size 645px x 180px. 17 Adsengine. IMG_970_600Advertisement with image size 970px x 600px. 18 Adsengine. IMG_970_250Advertisement with image size 970px x 250px. 19 Adsengine. IMG_785_440Advertisement with image size 785px x 440px. 20 Adsengine. IMG_120_600Advertisement with image size 120px x 600px. 21 Adsengine. IMG_728_90Advertisement with image size 728px x 90px. 22 Adsengine. IMG_310_110Advertisement with image size 310px x 110px. 23 Adsengine. IMG_320_600Advertisement with image size 320px x 600px. 24 Adsengine. IMG_320_150Advertisement with image size 320px x 150px. 25 Adsengine. IMG_350_50Advertisement with image size 350px x 50px. 26 Adsengine. IMG_320_427Advertisement with image size 320px x 427px.
-