Live Examples

1. Basic Ad Rotation (default config)

To initialize adRotator, you only need 2 parameters -

• The Element where the ad should be displayed
• The Ads.

The ads are provided in an array with the following format
[{url: '...', img: '...'}]

AdRotator also accepts a 3rd, yet completely optional parameter config which you can use to customize your Ads and its behaviour.

Then you can initialize and start adRotation as shown below

// initialise Ad Rotation
var rotator = new adRotator(
  document.querySelector('.className'),
  [{ url: 'xyz.com', img: '../xyz.jpg'}]
);
// start rotation (returns undefined by default)
rotator.start();
          

Here is a live example demonstrating basic Ad Rotation with default Config. (To see the default config, you can uncomment the last line)

Note that the above Ad's dimensions are set via CSS

            .defaultContainer {
              height: 300px;
              width: 250px;
            }
          

2. Ad Rotation - custom config: Size Leaderboard / Desktop-only / Prioritized Ads

This example uses a leaderboard Ad size (i.e. height: 90px, width: 728px) which is set via CSS. Since this ad would be cut-off on a mobile device given its long width, we set the target: "desktop" so that this Ad would be visible only on a desktop and hidden on a mobile device.
Note the 3rd and the 5th Ad unit. They have been assigned weights to increase their priority and thereby their chances of being shown first. However since it is randomized, only their chances are increased but there is no guarantee of it being shown first. To sort Ads by their weight (highest to lowest), set random: false. Ads with missing weights are automatically assigned a weight of 1.

// initialise Ad Rotation
var rotator = new adRotator(
  document.querySelector('.className'),
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    target: "desktop"
  }
);
// start rotation (returns undefined by default)
rotator.start();
          

A live example to go along with it. (Note: If you are simulating a mobile device, ensure you refresh the page for correct results)

3. Ad Rotation on a Mobile device

To show Ads specific to mobiles alone, we set the target as { target: "mobile"} meaning that these Ads will only be visible on a mobile device.

// initialise Ad Rotation
var rotator = new adRotator(
  document.querySelector('.className'),
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    target: "mobile",
  }
);
// start rotation (returns undefined by default)
rotator.start();
          

And here's a live example. (Note: If you are simulating a mobile device, ensure you refresh the page for correct results. This result of this live example would be hidden on a desktop device by default)

4. Ad Rotation with Sticky Ads

To show sticky Ads, if it sufficient to pass an empty { sticky: {} } object as the 3rd parameter. However, we can further customize sticky Ads by passing certain options as shown below

// initialise Ad Rotation
var rotator = rotator(
  document.querySelector('.className'),
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    sticky: {
      beforeEl: document.querySelector('.start'),
      afterEl: document.querySelector('.end'),
      offsetTop: '10', // or '10px' (defaults to 0px)
      offsetBottom: '150px', // or '150' (defaults to 0px)
      noMobile: true, // disable stickiness on mobile (defaults to false)
    }
    // beforeEl => Element after which the Ad becomes sticky
    // afterEl => Element before which Ad stops being sticky
  }
);
// start rotation (returns undefined by default)
rotator.start();
                    

And here's a live example. Try scrolling until the next live example to see it in action. To remove stickiness, set sticky: null. Note that we have set noMobile: true which means that this Ad will not be sticky on a mobile device.

5. Ad Rotation with Callbacks

We can setup 3 types of callbacks =>

• cb - This callback is executed after each rotation
• onHover - This callback is executed on hovering an Ad item
• onClick- This callback is executed on clicking of an Ad item

// initialise Ad Rotation
var rotatorInstance = rotator(
  document.querySelector('.className'),
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    cb: function() {
      // do something
    },
    onHover: function() {
      // do something
    },
    onClick: function() {
      // do something
    },
  }
);
// start rotation (returns undefined by default)
rotatorInstance.start();
          

And now lets get to the live example. You should see logs below when you hover, click and also when each Ad gets rotated. Note that sometimes it is possible that you do not see the logs due to a known issue with the live editor. (It has nothing to do with the Adrotator library). To fix the logs, you can comment & then uncomment the last line rotatorSidebar.start();

The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.

---

JOIN OUR NEWSLETTER

Subscribe Newsletter

subscribe