Rich media HTML5 ads are comprised in a great diversity of formats and effects, including video (expandible, takeover, skins, rising, stars, multiple impact, etc.). These ads have a weight limitation of 30MB (or the contracted one) and support standard metrics (impression and click), interaction metrics (time, ad starting, close, expand, download, social buttons, among others) and visibility metric (viewability).

All Rich Media formats may be completely set in HTML5. E-planning specifications should be followed for this task and then, the material should be sent to be programmed to the Rich Media Programming team (tag Rich Media) or it should be directly uploaded through self-management, from the system's registration forms (files that make up the ad).

The following tools are suggested for the ads' setting in HTML5:

AD STUDIO: E-planning tool (Integrated to AdServer) to design mobile and desktop ads. Easily developed and very intuitive tool.
Google Web Designer: Google tool to create ads.
Adobe Dreamweaver: Adobe software that enables to create ads from a website. It works in native HTML5.
Adobe Animate: New Adobe flash version. It enables to create and export ads for HTML5 canvas.

ADS CREATION

It is important to compulsorily comply with all the following steps to create Rich Media ads:

- The ad as well as all files and resources used should be sent or loaded in .zip format.

- The ad comprised within the zip should compulsorily contain the“index.html” name.

- All image, css, JavaScript routes should be of relative type, for example:

video.mp4 // CORRECT

http://www.dominio.com/carpeta/video.mp4 // INCORRECT

In the following image, we describe how the zip should be created:

DOWNLOAD AD SAMPLE

Programming Ads with JavaScript

All documents make reference to the JavaScript language applied to the html5 of ads.

The “eplBuilder.js” book store should be included in the head of the html file. LIBRARY DOWNLOAD

To create a format with JavaScript:

var EPL = new eplBuilder().create([FORMAT]);

As a parameter to our “create” function, we should pass one of the following options related to each format:

eplFormats.bannerGeneric

eplFormats.bannerSkin

eplFormats.layerGeneric

eplFormats.bannerLayer

eplFormats.layerButton

eplFormats.layerScroll

eplFormats.previousAd

eplFormats.unionLayers

eplFormats.expandibleMultiple

eplFormats.folding

eplFormats.expandiblePush

eplFormats.expandibleRollover

eplFormats.takeover

eplFormats.baseboard

eplFormats.tripleImpact

eplFormats.multipleImpact

eplFormats.quintupleImpact

eplFormats.inline

eplFormats.filmstrip

Example: var EPL = new eplBuilder().create(eplFormats.expandiblePush);

The library may be included in the ad's <head>.

All the ad functionalities will be referred to as the EPL object methods in JavaScript, functions specified per format should be executed.

Those following functionalities described per format should be entered in those actions where the banner interacts, for example:

If an expandible push should expand, the function “EPL.adExpand()” should be added to the action where the creativity is programmed, which will expand the epl at a graphic level.

If a layer should be closed, execute the function “EPL.adClose();” when actioning the close button in the creativity.

ClickTag:

The clicktag is generic for all types of formats and programmed ads, which implementation is shown as follows:

In case we ask a specific area, a div for example, to make the clicktag, the following should be done:

We encompass our html element by means of a label for the active zone to be applied.

GENERIC BANNER:

- EPL.adComplete(); // indicates when the ad should display the complete metric

GENERIC LAYER:

- EPL.adClose(); // indicates the layer should be closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

LAYER TO BUTTON:

- EPL.adClose(); // indicates the layer should be closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

BANNER TO LAYER:

- EPL.adExpand(); // indicates the layer should be expanded and displayed

- EPL.adClose(); // indicates the layer should be closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

PREVIEW:

- EPL.adClose(); // indicates the layer should be closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

MULTIPLE EXPANDABLE:

- EPL.adExpand(); // indicates the ad should be expanded

- EPL.adShrink(); // indicates the ad should be collapsed

- EPL.adComplete(); // indicates when the ad should display the complete metric

FOLDING:

- EPL.setImages(img1,img2,img3,img4,img5,img6); // receives the images id as parameters and loads them for animation. Ids should passed on as Strings, i.e.: EPL.setImages(“image1”,”image2”,”image3”,”image4”,”image5”,”image6”); Images should be included in the html with the same ids.

- EPL.initAnimation(fps); // Starts the animation by displaying each image, receives “fps” as an optional parameter enabling to offer the desired speed in frames per second.

- EPL.endAnimation(fps); // Ends the animation by collapsing each image, receives “fps” as an optional parameter enabling to offer the desired speed in frames per second.

EXPANDABLE PUSH:

- EPL.adExpand(); // indicates the ad should be expanded

- EPL.adShrink(); // indicates the ad should be collapsed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

- EPL.initExpanded();// indicates if the ad should start expanded or not, this option is set from the e-planning platform when the ad is loaded.

Example code to check if the ad should start expanded or not:

if(EPL.initExpanded()){

EPL.adExpand();

//Add here the code the ad visually expands in the creativity

}

EXPANDABLE ROLLOVER:

- EPL.adExpand(); // indicates the ad should be expanded

- EPL.adShrink(); // indicates the ad should be collapsed

- EPL.adComplete(); // indicates when the ad should display the complete metric

TRIPLE IMPACT:

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

- EPL.adShowLeft(); // indicates the left ad should be expanded

- EPL.adShowRight(); // indicates the right ad should be expanded

- EPL.adShowLayer(); // indicates the Layer should be expanded

- EPL.adHideLeft(); // indicates the left ad should be closed

- EPL.adHideRight(); // indicates the right ad should be closed

- EPL.HideLayer(); // indicates the layer should be closed

MULTIPLE IMPACT:

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

- EPL.adShowLeft(); // indicates the left ad should be expanded

- EPL.adShowRight(); // indicates the right ad should be expanded

- EPL.adShowTop(); // indicates the upper ad should be expanded

- EPL.adShowLayer(); // indicates the Layer should be expanded

- EPL.adHideLeft(); // indicates the left ad should be closed

- EPL.adHideRight(); // indicates the right ad should be closed

- EPL.adHideTop(); // indicates the upper ad should be closed

- EPL.HideLayer(); // indicates the layer should be closed

QUINTUPLE IMPACT:

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

- EPL.adShowLeft(); // indicates the left ad should be expanded

- EPL.adShowRight(); // indicates the right ad should be expanded

- EPL.adShowTop(); // indicates the upper ad should be expanded

- EPL.adShowBottom(); // indicates the lower ad should be expanded

- EPL.adShowLayer(); // indicates the Layer should be expanded

- EPL.adHideLeft(); // indicates the left ad should be closed

- EPL.adHideRight(); // indicates the right ad should be closed

- EPL.adHideTop(); // indicates the upper ad should be closed

- EPL.HideBottom(); // indicates the lower ad should be closed

- EPL.HideLayer(); // indicates the layer should be closed

SKIN:

- EPL.adComplete(); // indicates when the ad should display the complete metric

- EPL.adShowSkin(id, fixed); // indicates the skin should be displayed with the corresponding id passed as first parameter. The second parameter indicates if the skin should be of fixed or not position, if the value passed is true or false. Ids may only be the following: 1 or 2 or 3 or 4 as a maximum of 4 images as skin are allowed.

TAKEOVER:

- EPL.adExpand(); // indicates the ad should be expanded

- EPL.adClose(); // indicates the ad should be closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

LAYERS FUSION:

- EPL.adJoin(); // indicates both on the sides should be animated

- EPL.adClose(); // indicates the ad should be completely closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

DOCKING:

- EPL.adExpand(); // indicates the ad should be expanded

- EPL.adShrink(); // indicates the ad should be collapsed

- EPL.adClose(); // indicates the ad should be closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

VIDEO BANNER:

- EPL.setVideo(videoId); // video id required for metrics to be accounted

- EPL.adComplete(); // indicates when the ad should display the complete metric

VIDEO LAYER:

- EPL.setVideo(videoId); // video id required for metrics to be accounted

- EPL.adClose(); // indicates the layer should be closed

- EPL.adComplete(); // indicates when the ad should display the complete metric, it should be set in the layer and will be automatically closed upon completion.

INLINE:

- EPL.setVideoInline(videoId); // video required for metrics to be accounted

- EPL.adShrink(); // indicates the ad should be collapsed

FILMSTRIP:

- EPL.adComplete(); // indicates when the ad should display the complete metric

- EPL.setContent(divContenedor, divContenido); // receives the following data per parameter:

divContainer: Div id comprising the whole ad, width and height to be set in 300x600 and overflow in hidden.

divContent: Div id containing all the ad's elements, it is the div performing the automatic scroll; the real content height should be set.

SAMPLE AD (FILMSTRIP)

VIDEO

Specifications for Video should be followed to add a video to the html ad:

For metrics to be accounted in a video, the tag should be firstly added to the corresponding html, for example:

We mainly find the “<video>” tag and within it, we may find the tag “<source>” , corresponding to the video address to be loaded.

The video tag should bear a specific id, which, in this example, may be: “video1”, for metrics to be accounted, it is necessary to use the PL.setVideo function, which receives the video id as a parameter.In our case taken as example, it would be as follows:

EPL.setVideo(“video1”);

Automatically, the Rich Media book store recognizes and adjusts the metrics to its controls.

Rich Media formats support a maximum of 5 videos:

EPL.setVideo(“video1”); //OK

EPL.setVideo(“video2”); //OK

EPL.setVideo(“video3”); //OK

EPL.setVideo(“video4”); //OK

EPL.setVideo(“video5”); //OK

EPL.setVideo(“video6”); // ERROR

Video Options:

In case you need a video to start in auto play, pause, on/off sound, directly set it from the tag “<video>” with the corresponding properties.

In the following example we show how to make a video to start muted, in auto play and with visible controls:

The properties shown in bold in the label are set ones.