Transferring Variables in Query string

Transferring variables to the query string is often desired when a user inputs some data interactively in a Flash banner, e.g. his/her e-mail or telephone number, etc. This can be achieved by appending a ";cppar=1&" parameter to a clickTAG. The method of transferring these variables in the querystring is the best described by the example below:

ActionScript 2.0 code:

var EmailFlashVariable = "aa@aa.com";
on (release) {
    getURL(_root.clickTAG+";cppar=1&EmailURLVariable="+ EmailFlashVariable, _root.landingPageTarget);
}

ActionScript 3.0 code:

var EmailFlashVariable = "aa@aa.com";
button.addEventListener(MouseEvent.CLICK, ADFclicked);
function ADFclicked(event:MouseEvent) {
    AdfURLNavigator.navigateToUrl( AdfFlashVarsUtil.getParameter("clickTAG")
        + ";cppar=1&EmailURLVariable=" + EmailFlashVariable);
}

If the clickTAG is, for example, set to http://www.site.com the user gets redirected to http://www.site.com?EmailURLVariable= aa@aa.com when the Flash banner is clicked.

This method can be used for multiple querystring values:

ActionScript 2.0 code:

var a = 1;
var b = 2;
var c = "Hello";
on (release) {
    getURL(_root.clickTAG+";cppar=1&a="+a+"&b="+b+"&c="+c, _root.landingPageTarget);
}

ActionScript 3.0 code:

var a = 1;
var b = 2;
var c = "Hello";
button.addEventListener(MouseEvent.CLICK, ADFclicked);
function ADFclicked(event:MouseEvent) {
    AdfURLNavigator.navigateToUrl( AdfFlashVarsUtil.getParameter("clickTAG")
        + ";cppar=1&a=" + a + "&b=" + b + "&c=" + c;);
}

The corresponding target URL then becomes http://www.site.com?a=1&b=2&c=hello.

However the parameter ";cppar=1&" works only when landing page contains symbol "?". In other cases there should be used ";urlappend=" parameter:

ActionScript 2.0 code:

var DestinationVariable = "London";
on (release) {
    getURL(_root.clickTAG+";urlappend=" + DestinationVariable, _root.landingPageTarget);
}

ActionScript 3.0 code:

var DestinationVariable = "London";
button.addEventListener(MouseEvent.CLICK, ADFclicked);
function ADFclicked(event:MouseEvent) {
    AdfURLNavigator.navigateToUrl( AdfFlashVarsUtil.getParameter("clickTAG")
        + ";urlappend=" + DestinationVariable);
}

Avoiding Pop-Up Blockers

Due to constantly increasing online security measures in internet browsers, the pop-up blocking is becoming a common problem in the online advertising. Adform has compiled a list of tips how to create banners that do not trigger the pop-up blockers.

1. Always make sure you attach the Action Script code that opens a new browser window to an instance of a button, not a movie clip.

2. Make sure that the opening of a new browser window is the first action that happens after a user clicks the banner/button (any delay between a click and a call to the function that opens a new window increases the possibility of triggering the pop-up blocker). E.g. the code in green is much less likely to trigger the pop-up blockers than the code in red:

  • When using ActionScript 2:

Correct:

on(release) {
         getURL (_root.clickTAG, _root.landingPageTarget);
         SOME_FUNCTION();
         }

Incorrect:

on (release) {
         SOME_FUNCTION();
         getURL (_root.clickTAG, _root.landingPageTarget);
         }
  • When using ActionScript 3:

Correct:

button.addEventListener(MouseEvent.CLICK, ADFclicked);
         function ADFclicked(event:MouseEvent) {
         AdfURLNavigator.navigateToUrl(AdfFlashVarsUtil.getParameter("clickTAG"), AdfFlashVarsUtil.getParameter("landingPageTarget"));
         SOME_FUNCTION();
         }

Incorrect:

button.addEventListener(MouseEvent.CLICK, ADFclicked);
        function ADFclicked(event:MouseEvent) {
        SOME_FUNCTION();
        AdfURLNavigator.navigateToUrl(AdfFlashVarsUtil.getParameter("clickTAG"), AdfFlashVarsUtil.getParameter("landingPageTarget"));
        }

3. Make sure the clickTAG method is implemented exactly as it is described below.

  • When using ActionScript 2:
on(release) {
      getURL(_root.clickTAG, _root.landingPageTarget);
}

Note: The event, which triggers the opening of a new window, must be “release”, not “press” because opening a new window on “press” event will definitely trigger the pop-up blockers.

  • When using the ActionScript 3:

Create a button symbol on Flash API stage, and give it a name (e.g. button – pic. below).

Download Adform Core Component and paste this code to the same Flash API timeline frame where you created the button (replace the name "button" with how you actually called the button):

button.addEventListener(MouseEvent.CLICK, ADFclicked);
function ADFclicked(event:MouseEvent) {
AdfURLNavigator.navigateToUrl(
AdfFlashVarsUtil.getParameter("clickTAG"), AdfFlashVarsUtil.getParameter("landingPageTarget"));
}

4. Banners should be compiled with the Flash 8 or a higher version. According to the Adobe bug (http://bugs.adobe.com/jira/browse/FP-1065) there might be pop-up problems when interacting with lower version banners in the Internet Explorer 7.

5. Test the Flash banner in the live web environment for the pop-up blocking. You can use Adform Creative Test Module which can be found here.

clickTAG variables

Methods for implementing the clickTAG variables in Flash banners depend on the ActionScript version used in the banners. The methods do the same job and are only different in the coding. Adform supports both the ActionScript 2 and ActionScript 3 coded banners. If there is more than one target URL, please see the naming convention below:

var clickTAG;  // variable no. 1
var clickTAG2; // variable no. 2
var clickTAG3; // variable no. 3
var clickTAG4; // variable no. 4
var clickTAG5; // variable no. 5

Implementation of clickTAG variable

Implementation of the clickTAG variable depends on the version of the ActionScript you are using. Also, due to constantly increasing online security measures in internet browsers, pop-up blocking is becoming a common problem in the online advertising.

ActionScript 2.0 code:

on (release) {
    getURL(_root.clickTAG, _root.landingPageTarget);
}

ActionScript 3.0 code:

  1. Download and install the Adform Creative Toolkit extension (detailed info can be found here);
  2. When the Adform Creative Toolkit is installed, all the Adform components are placed in your Adobe Flash installation directory. You are able to see them by selecting WindowComponents in the top Flash API menu;


     
  3. Then drag and drop the AdformCore on the stage;
  4. Create a button symbol on Flash API stage, and give it an instance name (e.g. button);
  5. ClickTAG then can be implemented as follows:
button.addEventListener(MouseEvent.CLICK, ADFclicked);

function ADFclicked(event:MouseEvent) {
    AdfURLNavigator.navigateToUrl( AdfFlashVarsUtil.getParameter("clickTAG"), AdfFlashVarsUtil.getParameter("landingPageTarget"));
}

Note: always make sure you attach the ActionScript code that opens a new browser window to an instance of a button, not a movie clip. Also, the event, which triggers the opening of a new window, must be "release", not "press" because opening a new window on "press" event will definitely trigger the pop-up blockers.

Note: AdformCore can also be used in the Flex 2/Flex 3/Flash Builder 4 by adding its swc in to the project library and using the following ActionScript 3 code:

var adformCore:AdformCore = new AdformCore(this.stage);

For testing the clickTAG implementation, please use the Test Section.
 

Implementation of clickTAG in banners for Spotify

ActionScript2:

on (release) {
    getURL(_root.clickTAG, "_blank");
}

 

ActionScript3:

import flash.events.MouseEvent;
import flash.net.URLRequest;

myButton.addEventListener(MouseEvent.CLICK, function(event: MouseEvent) : void {
   flash.net.navigateToURL(new URLRequest(root.loaderInfo.parameters.clickTAG), "_blank"); 
   }
);

Note: In the code above, myButton should be replaced with the name of your click-through button instance

Flash Banners Restrictions

Due to possible security issues Adform does not accept:

  • obfuscated Flash banners;
  • banners with some restricted AS functions;
  • banners which are Flash cookie dependant.

Please use the Test Section to check if banners meet the requirements. Alternatively, you can contact Adform Traffic department for testing and suggestions on compatibility.

Also, Adform warns that when using the dynamic publishing method in the Internet Explorer or Firefox on Mac stage.stageWidth and stage.stageHeight might initially return 0 (note that for the Internet Explorer the stage size will be available on first load, however when reloading or revisiting a page it will initially be 0). The solution is defining a resize handler in your ActionScript code:

stage.addEventListener(Event.RESIZE, resizeHandler);
stage.dispatchEvent(new Event(Event.RESIZE)); // force stage resize event for normal cases 

function resizeHandler(event:Event):void {
  if (stage.stageHeight > 0 && stage.stageWidth > 0) {
    stage.removeEventListener(Event.RESIZE, resizeHandler); // only execute once
    // your initialization code here
  }
}

CPU Recommendations

Complexive flash banners may be the reason of a high CPU usage. Some publishers are paying attention not only to the file size but also to the CPU usage. We recommend checking some common High CPU usage factors:

  1. Frame Rate is over 18 frames per second; reducing the number to 18 in most cases does not degrade the visual performance;
  2. Multiple animated sequences across many layers animating at the same time;
  3. Animated sequences set to be translucent and animating on top of an imported graphic (ex: jpeg, png, etc.);
  4. Action Script-generated events set to randomly generate (ex: fog and rain);
  5. Imported graphics scaled up over a long period of time;
  6. Masking and animated masking techniques can also require a large amount of CPU resources.

General

In order for ad-serving systems to track clicks when displaying Flash banners, the Flash banners must be programmed to use clickTAG variables instead of pre-defined URLs. The clickTAG variables are passed to the Flash file by an HTML page that shows the Flash banner. Thereby, the ad-serving systems can track the number of clicks and change the URL real-time, without having to modify the Flash banner.

  • File size is limited to 60 KB. However, please note that most of the Ad Exchanges only accept files up to 49 KB.
  • Flash banners must be compiled with the Flash 8 or higher versions.
  • Fallback *.gif banners must always be supplied for all formats.
  • Flash Clicks/Links use clickTAG’s.
  • Clicks/Links must avoid being blocked by pop-up blocks.
  • CPU usage must be limited.

Please also follow the Media (Publisher) restrictions for Loops, FPS, etc.

Info: In Safari 6.1 and above versions, a backup (image or HTML) is shown if a flash banner has a backup set. Alternatively, if there is no backup, the flash version is being displayed. Note that this modification does not apply for floating banners as they do not have the backup.

VPAID Ads

VPAID enables the cross-platform support for rich in-stream video ads. A valid VPAID object can be used in conjunction with the VAST and is highly recommended as VAST ads, which include VPAID protocols, can play in both VAST and VPAID-enabled video players.

With VPAID, both linear and non-linear ads are supported, including standard, expanding, overlay, or mixed ads.

Standard banners with the Adform Core components can function as VPAID ads. For advanced VPAID solutions, please see instructions below.

Note: currently, only flash VPAID ads are supported. 

Instructions

How to "Close" an ad:

  • add AdformCloseButton to the banner;
  • drag AdformCore component to the stage and dispatch 'close' AdformSharedEvent from your ad.
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('close'));

How to add a 'clickTag':

  • drag the AdformCore component to the stage;
  • draw a clickTag button on the stage;
  • give an instanceName 'clickTag' to the button;
  • import com.adform.events.AdformSharedEvent;
  • add MouseEvent.CLICK eventListener to the clickTag;
  • remove MouseEvent.CLICK eventListener on the clickTag click;
  • dispatch 'click' AdformSharedEvent.
import com.adform.events.AdformSharedEvent;
clickTag.addEventListener(MouseEvent.CLICK, onClickTagClick);

function onClickTagClick(e : MouseEvent) : void {
  clickTag.removeEventListener(MouseEvent.CLICK, onClickTagClick);
  root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('click'));
}

How to set 'expand':

  • drag the AdformCore component to stage;
  • dispatch 'expand' AdformSharedEvent from your ad.
import com.adform.events.AdformSharedEvent;

root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('expand'));

How to set 'collapse'

  • drag the AdformCore component to stage;
  • dispatch 'collapse' AdformSharedEvent from your ad.
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('collapse'));

How to implement a custom 'skipAd' button:

  • drag the AdformCore component to the stage;
  • draw skipAd button on the stage;
  • give an instanceName 'skipAdBtn' to the button;
  • import com.adform.events.AdformSharedEvent;
  • add MouseEvent.CLICK eventListener to skipAdBtn;
  • remove MouseEvent.CLICK eventListener on skipAdBtn click;
  • dispatch 'skip' AdformSharedEvent.
import com.adform.events.AdformSharedEvent;
skipAdButton.addEventListener(MouseEvent.CLICK, onSkipAdBtnClick);

function onSkipAdBtnClick(e : MouseEvent) : void {
    clickTag.removeEventListener(MouseEvent.CLICK, onSkipAdBtnClick);
    root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('skip'));
}

How to 'resize' an ad:

  • drag the AdformCore component to the stage;
  • import com.adform.events.AdformSharedEvent;
  • add 'resize' eventListener;
  • reposition ad elements according to data object from event.
root.loaderInfo.sharedEvents.addEventListener('resize', onAdResize);

function onAdResize(e : AdformSharedEvent) : void {
  // var data : Object = e.data;
  // data.playerWidth -> player width in pixels
  // data.playerHeight -> player width in pixels
  // data.viewMode -> "normal"/"thumbnail"/"fullscreen"
  // TODO : reposition ad elements according to data
}

How to update ad according to player 'start'

  • place your starting code in the firstFrame;

or

  • drag the AdformCore component to the stage;
  • import com.adform.events.AdformSharedEvent;
  • add 'start' eventListener;
  • update ad elements according to data object from event.

The code is as follows:

import com.adform.events.AdformSharedEvent;
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.addEventListener('start', onAdStart);

function onAdStart(e : AdformSharedEvent) : void {
  // var data : Object = e.data;
  // data.playerWidth -> player width in pixels
  // data.playerHeight -> player width in pixels
  // data.viewMode -> "normal"/"thumbnail"/"fullscreen"
  // TODO : update ad elements according to data
}

How to 'pause' ad:

  • drag the AdformCore component to the stage;
  • import com.adform.events.AdformSharedEvent;
  • add 'pause' eventListener;
  • pause the ad.

The code is as follows:

import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.addEventListener('pause', onAdPause);

function onAdPause(e : AdformSharedEvent) : void {
  // TODO : pause ad
}

How to 'resume' ad:

  • drag the AdformCore component to the stage;
  • import com.adform.events.AdformSharedEvent;
  • add 'resume' eventListener;
  • resume the ad.
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.addEventListener('pause', onAdPause);

function onAdPause(e : AdformSharedEvent) : void {
  // TODO : pause ad
}

How to 'update' volume:

  • drag the AdformCore component to the stage;
  • import com.adform.events.AdformSharedEvent;
  • add 'volume' eventListener;
  • update the ad volume.

The code is as follows:

import com.adform.events.AdformSharedEvent;
  root.loaderInfo.sharedEvents.addEventListener('volume', onAdVolumeChange);

  function onAdVolumeChange(e : AdformSharedEvent) : void {
    // var data : Object = e.data;
    // data.volume
    // TODO : change volume
  }

VAST setup:

Both Linear and Non-linear ads must have these AdParameters set:

linear → true/false

clickTAG → your clickTAG URL

the code is as follows:

<AdParameters>
  <linear>true</linear>
  <clickTAG><![CDATA[http://www.adform.com/site/]]></clickTAG>
</AdParameters>

Ad Unit flash vars in VAST

There is a possibility to add flash vars to the ad unit in MediaFile source:

plain:   VPAIDWrapper.swf?url=adUnit.swf?param1=value1&param2=value2
encoded: VPAIDWrapper.swf?url%3DadUnit.swf%3Fparam1%3Dvalue1%26param2%3Dvalue2

Note: all request parameters must be encoded.

Glider

Introduction

"Glider" is a rich media banner type with 3D effects which loads and animates custom contents. A full banner set consists of a minimum of 3 assets:

  • initial banner - usually it is a standard (300x250) or a single expanding (300x250 collapsed and 970x450 expanded) banner;
  • actual glider - SWF / PNG / JPG / GIF (gif animation is not supported).

Glider banner solution loads AdCapture snapshots from the Adform Servers.

Info: Read more on MSN Homepage Rich Media: Glider

Glider.fla structure

  • preloader - will be shown on the initial load in a small banner.
  • controls - custom control bar (add custom buttons here).
  • banner - a snapshot of banner in site → set X, Y positions according to the position in a website - position also can be set through the flashvars 'bannerX' and 'bannerY' (flash vars override the banner position in the flash).
  • site (site snapshot holder- a snapshot URL must be specified through the flash var 'snapshot'.

             - site → page → image → the site snapshot will be loaded in this holder.

             - site → page → add custom assets if needed.

  • content (content holder)

             - content → preloader → will be showed durring the content load.

             - content → content → the content panel will be loaded here (content must contain an invisible asset in order to pre-calculate content 'width' and 'height' for animations).

  • background (wallpaper of a glider)

             - add assets to this container in order for them to be displayed as a wallpaper during glide animations.

Public methods

  • addState (stateParamsObject) - adds transition state of a glide.

id - id of transition.
position - position where to glide (DEFAULT, LEFT, RIGHT, CLOSE).
contentURL - URL of content to be displayed after a glide animation.
- custom x position → works when the position is not defined.
- custom y position → works when the position is not defited.
angle - glide panel angle of transition.
duration - duration of transition.

Note: 'default' - state is mandatory while others are optional.

  • close() - closes Glider.
  • glideTo(transitionId) - glides according to the specified transition.

Flash vars

  • snapshot - a full URL to a snapshot image of a website.
  • bannerX - banner asset x position in flash (flash vars overrides banner position in flash).
  • bannerY - banner asset y position in flash (flash vars overrides banner position in flash).

Note

  • Write custom code in the 'init' frame.
  • Make sure that the 'content' and 'site' banners actionscript is not exported in the first frame.
  • Add GliderEvent.START listener in order to perform custom action on the start of an animation.
  • Add GliderEvent.END listener in order to perform custom action on the end of an animation.

GliderEvent

  • state - current transition 'id'

Example

import flash.events.MouseEvent;
import com.adform.glider.event.GliderEvent;
import com.adform.motion.AdformTween;
import com.adform.net.AdformEvents;
import com.adform.utils.AdformFlashVars;

stop();

addState({id: 'default', position: DEFAULT, contentURL: AdformFlashVars.getFlashVar( 'homePanel', 'homePanel.swf')}); 
addState({id: 'left', position: RIGHT, contentURL: AdformFlashVars.getFlashVar( 'leftPanel', 'leftPanel.swf')});
addState({id: 'right', position: LEFT, contentURL: AdformFlashVars.getFlashVar( 'rightPanel', 'rightPanel.swf') });

var homeBtn = controls.homeBtn;
var leftBtn = controls.leftBtn;
var rightBtn = controls.rightBtn;
var closeBtn = controls.closeButton;
var state : String = "";

leftBtn.addEventListener(MouseEvent.CLICK, onLeftBtnClick);
rightBtn.addEventListener(MouseEvent.CLICK, onRightBtnClick);
homeBtn.addEventListener(MouseEvent.CLICK, onHomeBtnClick);
closeBtn.addEventListener(MouseEvent.CLICK, onCloseBtnClick);

addEventListener(GliderEvent.START, onGlideStart);
addEventListener(GliderEvent.END, onGlideEnd);

disableControls();
controls.visible = false;

function disableControls() {
    controls.mouseEnabled = closeBtn.mouseEnabled = homeBtn.mouseEnabled = rightBtn.mouseEnabled = leftBtn.mouseEnabled = false;
}

function enableControls() : void {
    

    closeBtn.mouseEnabled = true;
    homeBtn.mouseEnabled = state != 'default';
    rightBtn.mouseEnabled = state != 'right';
    leftBtn.mouseEnabled = state != 'left';
    

    controls.mouseEnabled  = true;
}

function onGlideStart(event:GliderEvent) {
    AdformTween.to( controls, 0.2, { alpha : 0, onComplete: onControlsHideComplete } );
}

function onGlideEnd(event:GliderEvent) {
    

    state = event.state;
    

    enableControls();
    controls.alpha = 0;
    controls.visible = true;
    AdformTween.to( controls, 0.2, { alpha : 1 } );
}

function onLeftBtnClick(event:MouseEvent):void {
    AdformEvents.callEvent("165", "Left Panel shown");
    disableControls();
    glideTo('left');
}

function onRightBtnClick(event:MouseEvent):void {
    AdformEvents.callEvent("166", "Right Panel shown");
    disableControls();
    glideTo('right');
}

function onHomeBtnClick(event:MouseEvent):void {
    AdformEvents.callEvent("164", "Home Panel shown");
    disableControls();
    glideTo('default');
}

function onCloseBtnClick(event:MouseEvent):void {
    

    disableControls();
    close();
    AdformTween.to( controls, 0.2, { alpha : 0, onComplete: onControlsHideComplete } );
}

function onControlsHideComplete() {
    controls.visible = false;
}

IAB Mobile Full Page Flex

IAB Mobile Full Page Flex banner is simply delivered as HTML asset and rendered in rich media floating banner. The banner is supported in Windows, MAC OS and Mobile browsers.

More details can be found in IAB specifications.
 

Resize

Resize is handled with the help of Size Adapter component.
 

Visuals

The content and background for this format is picked and adjusted according to the screen resolution. There are 4 default IAB Input Designs for different resolutions. The creative content is always fully visible (showAll) and the background covers the rest of the visible area and is cropped (noBorder). If the resolution of the device is non of the pre-defined 4 design sizes, the next higher resolution assets will be picked and scaled down to the appropriate size. If the resolution is bigger than the biggest pre-defined design, it will be scaled-up. The assets will always maintain their aspect ratio.
 

Design formats


Swipe

Swipe can be used as desired, for example, for closing the ad. Swipe event returns:

  • directionY - The direction of swipe on the Y axis. Values: up, down
  • directionX- The direction of swipe on the X axis. Values: left, right
Element has to be at least document.documentElement (not document.body), or any specific <div>, for example close button element.
 

Example

	//document element or any <DIV>, ex.: close button element
var element = document.createElement('div');
document.body.appendChild(element);

dhtml.on(element, 'swipe', function(elem, event) {
    console.log('swipped ' + event.directionY  +',  ' + event.directionX);
    // dhtml.external.close();
    // directionX: left|right
    // directionY: up|down
});

Orientation

Orientation is always detected and there is a possibility to change background depending on the orientation - vertical or horizontal. By default the background isn't switched on device orientation change. For switching backgrounds on orientation change you need to have different assets for vertical and for horizontal orientation. As a result, 8 background images will be needed to setup the Full Page Flex banner.

Full Example/Template

To find the demo banner please follow this link.

You can download the full template by clicking here.

IAB Mobile Pull

The IAB Mobile Pull is a two component ad unit. The initial stage is a top or bottom screen banner ad which on user interaction vertically calls a full screen ad experience with visuals, sound, motion, and interaction capabilities over the publisher content.

More details can be found in IAB Specifications.
 
Currently this is a synchronized banner consisting of 2 assets: standard (Base Ad) and floating (Full Page Ad).
 

Plug & Play

  • Download PullBase.zip and PullBanner.zip. These are the ready and stable versions of templates including manifest.json and assets.
  • Upload it as an asset;
  • Create Rich Media Banners - Standard and Floating;
  • Create a SYNC Banner out of these banners;
  • Eventually, you can replace swipe functionality with Adform.showFloatingByBN(bn) method.

Known issues

  • With Google Chrome on Android operating system the CPU is slow until the actual PullBanner is seen;
  • Opera and Firefox  web browsers on Android operating system do not scale down the content and background correctly;
  • When using Opera mobile the video does not stop playing even if the user navigates through different features within the ad.

Entry

The IAB Mobile Pull Full Page Ad Component will expand vertically from the Base Ad Component. Alternatively, if vertical expansion is not possible, there is an option for the Full Page Ad Component to fade in.
 

Visuals

The banner consists of 2 assets: Base Ad and Full Page Ad (Full Page Flex).
 

Base Ad

A simple standard banner (320x50) which on swipe calls the Full Page Ad. It must have a clear call to action icon.
 

Example/Template

		<script>
document.write('<script src="' + (window.API_URL || 'http://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
</script>
<style>
html,body { padding: 0; margin: 0; }
</style>
<body>
  <div id="content">
    <img src="baseAd.png" width="320" height="50">
  </div>
  <script>
  (Ready = window.Ready || []).push(function () {
    var bn = dhtml.getVar('bn');
    if (bn && parent.ADFCall) {
      dhtml.on(document.documentElement, 'swipe', function (elem, event) {
        if (event.directionY == 'down') showFullPageFlex();
      });
    }

    function showFullPageFlex() {
      var fbn = dhtml.getVar('floatBN');
      if (fbn) parent.ADFCall(fbn, 'show');
      parent.ADFCall(bn, 'show');
    }
  });
  </script>

Full Page Ad

Full Page Ad is a Full Page Flex Ad Component. It includes:
 
  • Branded wallpaper - Static images, Full Page Flex background.
  • Content module - image, video, products, or any other desired content.
  • Navigation tray - holds up to 4 navigation icons, and it's used for navigation between different features within the ad.
  • Navigation Icon - Icon for the content. Default size: 74x69.
  • Close button.
  • Navigation indicator - Indicates the number of pages, and represents the current page.
All of these contents have 4 sizes for the best quality according to the screen size.
 

Example

To find the demo banner please follow this link.
 
To get the full template download these two files: PullBase and PullBanner.