amp-adsenginejs

0.3.0-telkom • Public • Published

Advertisement Engine JS Library by PT. Amandjaja Multifortuna Perkasa

npm version

Dependencies

  1. JQuery
  2. @verzth/uuid-js
  3. @verzth/statisticjs

Installation

Node Package Manager

npm install --save amp-adsenginejs

Yarn

yarn add amp-adsenginejs

How to Use

  1. 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>
  2. 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"
    });
  3. 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 as image or video, 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 in img tag of advertisement. Sample usage data-class="img200 active bg-red".
    5 resize Resize advertisement image with your own size, you have to use same scale to prevent image stretched. Use data-resize="true" and specify data-width and data-height. Or data-resize="class" to override size with css style, and inject your css class with data-class.
    6 width Set Image width. Sample usages data-width="320", data-width="50%", data-width="auto".
    7 height Set Image height. Sample usages data-height="320", data-height="50%", data-height="auto".
    8 components Inject data attributes for some case. JSON Object format is a must. Sample data-components="{'city':'Jakarta'}".
    9 remove Remove advertisement tag if ads not found. Sample usage data-remove="true".
  4. Call globally advertisement delivery engine in your javascript.

    ads.push();
  5. 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.

Package Sidebar

Install

npm i amp-adsenginejs

Weekly Downloads

0

Version

0.3.0-telkom

License

MIT

Unpacked Size

835 kB

Total Files

21

Last publish

Collaborators

  • silveriusdodi