Bannertime Tutorial: How to Automate Your Banner Ad Campaigns

There is a famous saying among software developers:

Be lazy.

Banner development is no exception.

Don’t do manual labor when with a bit of work up front you can set up the automated system which will save tons of time in the long run.

Especially, when there’s completely free and open source solution – Bannertime.

Bannertime takes tedious tasks off your plate so you could focus on the fun stuff.

That is creating animations.

And with browser sync preview and timeline scrubber, it’s easier than ever.

What Bannertime does:

  • Adds a click tag
  • Loads platform specific scripts and files
  • Adds a mini library with useful functions
  • Adds the ability to write SCSS
  • Autoprefixes CSS
  • Adds timeline scrubber
  • Minifies code
  • Optimizes images
  • Generates a backup image
  • Deploys src files to a remote git repository
  • Creates zip
  • And more…

In this tutorial, I’ll go into how to use Bannertime and all its features. Also how to customise and save your version of this generator.

  • How to use Bannertime smartObjects.
  • How to quickly make a banner for retina displays.
  • How to use helper functions that’ll speed up development.
  • How to polite load banner.
  • How to customise Bannertime to save your templates.

Before we begin, you’ll have to set up your environment and install Bannertime. There is easy to follow official documentation how to get started.

Here are some tips for using Bannertime:

  • Commands: Read here about gulp commands and how to load Google hosted GreenSock scripts.
  • Browser sync: If you want to stop browser sync press ctrl + c/cmd + c in the console.
  • Scrubber controls: double click to pause/resume animation or move the cursor away from the window to continue playback.

SmartObject in Bannertime is a function that creates DOM elements. Since you’re building DOM with JavaScript, that allows using polite load.

I’ll talk about polite loading in more detail later in this tutorial.

Now, let’s look at the default banner code.

The path to your banner is something like this: your-campaignsrcyour-campaign-300x250

Inside js folder and you’ll see three js files.

banner.loader.js stores polite loading functions and inserts clicktag.

banner.js is just a mini library with some functions that you call inside banner.animation.js.

I suggest to stare at these files, read the code and try to understand how it works.

But if at the moment it’s beyond your grasp – I advise learning more about JavaScript objects. It will help you make sense how Bannertime works, and you’ll grow as the developer.

Now, open banner.animation.js file. This where you’ll write your code.

On line 30 you’ll see this smartObject:

Banner.prototype.createElements = function () {
  this.logo = this.smartObject({
    backgroundImage: 'images/logo.png',
    retina: true,
    parent: this.banner

By default every smartObject will initialise a <div> with a style of:

position: absolute; top: 0; left: 0;

As you can see this particular smartObject uses the background image.

If you set backgroundImage for a div it will automatically get the following CSS:

background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;

Also, smartObject has a property retina set to true. What it does it divides container width and height by 2, so it makes very easy to develop for high DPI displays.

I recommend to always use assets 2x as large for a sharper look on retina screens. If you have size restrictions at least use retina for copy text and logo.

Last property is parent where you specify the container for a smartObject.

parent: this.yourDiv
id: 'string'
type: 'img' // Default is div, but other possible types are: canvas, video, img
innerHTML: 'string' // Adds text so If you're using fonts this can be useful
retina: true // Default is false
autoplay: true // If not set video will not autoplay
loop: true // Default is no loop
controls: true // If you set to true, the browser will offer controls buttons for the video
muted: true // If not set the audio will be played with the video
poster: '/images/poster.jpg' // Shows an image instead of first frame while the video is downloading, or until the user hits the play button.
preload: 'auto' // Possible values: none, metadata, auto. The preload attribute is ignored if you use autoplay.
playsinline: true // Set to true if you want to use muted autoplay on mobile. It keeps a video inline because by default videos on iOS will play full screen.
src: 'videos/video.mp4' // Place your videos in the separate "videos" folder to follow Bannertime structure.
sources: ['videos/video.mp4', 'videos/video.webm'] // It's always recommended to use multiple sources. For support across all major browsers use MP4 and either WebM or Ogg.

Note: At the time I’m writing there is a known bug which doesn’t add sources.

src: 'images/logo.png'
alt: 'Company logo'.

You can use any CSS property inside smartObject if it’s written in camel case instead of dashes e.g: backgroundColor: '#fff'

Here is a list of currently available functions with comments what each of them does.

// Adds an array of children to a parent element

// Shorter function for: TweenLite.set(this.element, {autoAlpha: 0});
this.element.set({autoAlpha: 0});

// Returns cached transform values from GreenSock _gsTransform object as well as any CSS value

// Returns original element settings that you set in smartObject

// Centers element using top left and negative margin;

Polite loading delays the loading of banner assets (like images) until the parent page has finished loading completely.

Polite load delivers the best user experience for readers because it decreases waiting time for the main content to load. Because of this, some publishers require that you use polite load.

So if you get into the habit of making your all banners load politely – you won’t have any troubles with the clients. And you’ll raise the quality of your work.

This is how polite load works with Bannertime:

  1. The index.html is fetched immediately as the page loads but without any images or HTML elements. Besides the main banner container.
  2. The publisher’s page finishes loading.
  3. All banner elements are created and images with scripts loaded using JavaScript.

All you have to do to load ad politely is use smartObjects. I already showed that.

In addition, add all your images inside image array on line 13:

this.images = [

That’s it!

Now, there’s one more thing I want to show…

I noticed many developers have their preferred way of coding banners but would still like to benefit from Bannertime features.

Well, the solution is to modify template files, and there are a couple of ways how you can do it.

The easiest way is to make changes to template files in the global generator-bannertime install. On PC the path is:


Of course, this approach has many downsides. If you update Bannertime, your changes will be lost. Also, if you want to set up standardised workflow with your colleagues, this method is not ideal as well.

Which leads us to a better but more complex solution…

This way requires some basic Git and GitHub knowledge. But I’ll briefly explain the steps without turning this into git tutorial.

First, go to generator-bannertime GitHub repo and fork it by pressing “Fork” button in the top right corner. Forking is making a copy of a repository to which you can make changes.

Github forking

Now, in your forked repo press green “Clone or download” button and copy the URL.

github cloning

Open your console and cd into the dir you want to clone the repo. Write git clone and paste your URL:

git clone

At the moment, you have cloned the repo and can make the changes to the templates.

Once you’ve done some modifications, you need to update your remote repo on GitHub. There are three steps to push changes to the repo.

Add all files with the changes.

git add .

Commit added files with a message.

git commit -m "description of changes"

Push changes to the remote repository.

git push origin master

When generator-bannertime release a new version you can update your local repo with this command:

git pull --ff upstream master

Then just skip to the Step 3 and push the changes to your remote repo.

At the moment Bannertime is the best workflow tool available in open source. However, beyond setting it up, it lacked guidance how to use all its features.

Hopefully, now that you know all Bannertime capabilities and how to use it you’ll come on board.

And if your JavaScript skills are advanced I encourage you to contribute to Bannertime.

If you have any questions just shoot in the comments below.

  • Share this post

6 thoughts on “Bannertime Tutorial: How to Automate Your Banner Ad Campaigns

    1. Glad it was valuable.

      What exactly you’re looking for? How to write and structure animations in Bannertime?

  1. Excellent write up. With your help (and bannertime) I just built a banner ad in no time! From a newbie point of view, why do I have to pick an Advertising Platform? Seems like an odd dependency to throw in there right at the start, I have no idea which one I’ll use. I imagine there will be some click tags added at some point, but I don’t get to decide which platform. Thanks for this!

Leave a Reply

Your email address will not be published. Required fields are marked *