How to use expandable Flashbanners and track via multi-flight option?

The following article applies to expandable flash banners that can be encoded in Brand Central to show a second banner on user interaction such as mouse-over which provides the effect of an expandable banner.

Requirements:

  • Mathematical understanding of coordinate systems to calculate offsets
  • Basic knowledge of Flash

User Experience:

First of all, the expandable banners on Brand Central work the following way from the user perspective:

  • A default banner e.g. 728×90 pixel is shown on screen (which can be clickable using normal click tags)
  • Upon user interaction of moving the mouse into the area of the default banner, a second banner is loaded (overlay or expandable banner). Typically, that second banner should be of larger size of the default banner and in most cases it will expand on either one of the sides (width or height) of the default banner, e.g. 728×400 pixel banner expanding towards the footer of the screen.
  • The expandable overlay banner is clickable similar to any other flash banner within Brand Central.
  • Upon user interaction of moving the mouse out of the area of the expanded banner, it will disappear and the default banner will appear again.
  • Alternatively, a close (X) button within the expanded Flash banner caters for user-controlled action to make the expanded banner disappear.

Creative Requirements:

Every expandable banner requires at least two creative banner executions:

  • The default banner can be in Flash or animated GIF/JPG or even a text based ad with or without a click tag. Please note that if you are using any streaming sound or video in the default banner, its should only be activated on user interaction and once the expandable banner is loaded, no conflicting sound elements played, e.g. sound on both banners.
  • The expandable overlay banner can also be in Flash (with transparent background) or animated FIG/JPG or text based and should have a call to action with a click tag. In most of the cases the banner size of the expandable banner will be just an extension of one of the edges of the default banner, e.g. either width or height. However, there is a certain flexibility on how the expanded banner can appear upon user interaction which is outlined in the graph below:

Expandable banner coordinates

The offset x represents the relative position of the expandable overlay banner on the x-axis (horizontal axis) whereas offset y represents the relative position of the expandable overlay banner on the y-axis (vertical axis) on a browser window. Please note that the (top, left) position of a screen is refered to as (0,0).

In the above example, the skyscraper is positioned on the right hand side of the publisher’s page and the expandable overlay banner would expand to the left, hence the offset x would be negative and the offset y=0 since there should be no vertical movement of the banner.

As a rule of thumb, for an expandable skyscraper right-to-left the offset x can be calculated as follows:

offset x = width sky - width expandable sky
e.g.
offset x = 120px - 400px
         = -280px

In the example of a top positioned leaderboard banner (728×90) which can expand vertically towards the footer of the screen into an expandable banner (728×400), the calculation would be as follows:

offset x = 0 (no movement horizontally)
offset y = 0 (as expandable fully overlays)

Click and Close Tags

Click and close tags need to be inserted within the Flash file(s) depending on the creative objective:

  • The default banner - which is primarily being used to mouse over and to trigger the user-interaction for the expanded banner to be shown - can have a Click Tag implemented as well. In case a user clicks that banner, the target URL of the default flight will be opened. If no Click Tag is implemented, no clicks will be recorded and the default banner will not be clickable.
  • The expanded banner - which expands upon user mouse over the default banner - can also have a Click Tag implemented which will link through to the target URL of the related expanded banner.
  • At least either one of the two banners - default or related - should have a Click Tag implemented, and there is no problem of having the Click Tag in both banners.
  • The expanded banner can have an additional close (X) button in order to manually trigger user-interaction to close the related expanded bannner without a mouse interaction. Please note that in case both Click Tag and Close (X) button being used in the related expanded banner, the hit area of the clickable banner should not overlap the hit area of the Close (X) button. Macromedia provides a Flash Designer Guide which might be useful to read. The syntax for the Close (X) button can be found below.
  • In addition to the user-interaction of the Close (X) button, the same tag can be used to auto-close the related expanded area. Instead of triggering the close tag as a user-controlled button, it can be also called as Actionscript code at the end of a movie clip animation or after a certain number of seconds in a timer control in order to auto-close the expanded banner. Please follow the syntax below.

Close Tag for button triggered by user-interaction through Flash button:

on(release) {
    getURL("javascript:bcExpHide();void(0);");
}

Close Tag for button triggered without user-interaction e.g. at the end of a movie clip timeline:

getURL("javascript:bcExpHide();void(0);");

Flight setup

The media trafficker needs to setup the flights in Brand Central and upload respective creative for the system to work on a publisher site. The following steps are required:

  • Create campaign and flight via media planner and quick flighting module for both default and overlay banner as if they were individual flights. Upload creative and set click tags and any other parameter.
  • Go to Media Planner | Select Flight | List Flights | Select flight with default banner | Click ‘Edit Flights’
  • In the ‘Edit Flight’ screen select the flight with the expandable banner from the drop down and modify the offset x/y coordinate accordingly

Expandable banner setup as multi-flights

Publisher codes and tracking

Publishers should insert the tracking tag of the default banner only within their ad server or website without any additional parameters. The expandable banner will be called from Brand Central automatically upon user interaction.

Please also note that Mozilla requires transparency which can be set through the wmode=transparent parameter that is explained in the ad tag page for publishers. Any other parameters such as frequency capping and anti-cache bursting technology still applies.

Please note that within the tracking module of Brand Central, both banners are tracked as individual flights. The default banner will in most cases have only impressions tracked wherease the expandable banner shows the number of expansions due to user interaction on the default banner as impression and both banners show clicks based on user interaction via the click tag.

On the expandable banner, only one impression is being logged even if the user interacts multiple time e.g. the banner is being called multiple times.

A sample banner can be found here and a FLA demo file can be downloaded here.