amp-adsenginejs
v0.3.0-telkom
Published
Ads Engine JS Library
Downloads
7
Maintainers
Readme
Advertisement Engine JS Library by PT. Amandjaja Multifortuna Perkasa
Dependencies
Installation
Node Package Manager
npm install --save amp-adsenginejs
Yarn
yarn add amp-adsenginejs
How 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 asimage
orvideo
, 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 inimg
tag 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-width
anddata-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.|