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:
|
...
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:
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>.
<script src=”eplBuilder.js” type=”text/javascript”></script>
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: <a onclick=”window.open(window.clickTag); return false” href=”#!”></a> In case we ask a specific area, a div for example, to make the clicktag, the following should be done: <a onclick=”window.open(window.clickTag); return false” href=”#!”> |
...
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.
...
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:
<video id=”video1” width=”320” height=”320” controls autoplay muted>
<source src=”video.mp4” type=”video/mp4”>
</video>
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:
<video id=”v1” width=”320” height=”320” controls autoplay muted>
<source src=”video.mp4” type=”video/mp4”>
</video>
The properties shown in bold in the label are set ones.