Api Javascript

FILE ASSEMBLY:

It is important to meet mandatorily with all the following steps to create Rich Media ads as much for self-management as for sending the complete material to the Rich Media Support area, so that we are able to proceed with the programming:

- The ad must be accompanied with every file and/or resources that uses inside a .zip compressed file.

- The ad inside the .zip file must be named “index.html”.

- All images, CSS and Javascript routes (along with every extra file that might be used in the ad) have to be relatives, as for example:
video.mp4 // ok
http://www.dominio.com/carpeta/video.mp4 // ERROR

The .zip assembling process is described in the following image:

IMPORTANT: inside the ".zip" must be all the files that compose the creativity.

It should also include the library: "eplBuilder.js".

Download Sample

PROGRAMMING JAVASCRIPT ADS:

Every documentation shown here is Javascript related to HTML5 ad programming.

The library "eplBuilder.js" must be included in the <head> tag inside the HTML file.

Download the library here

How to create a format with Javascript:

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

As a parameter to our "create" function, we must assign one of the following options that correspond to each of our available formats:

eplFormats.bannerGenerico
eplFormats.bannerSkin
eplFormats.layerGenerico
eplFormats.bannerLayer
eplFormats.layerBoton
eplFormats.layerScroll
eplFormats.anuncioPrevio
eplFormats.unionLayers
eplFormats.expandibleMultiple
eplFormats.folding
eplFormats.expandiblePush
eplFormats.expandibleRollover
eplFormats.takeover
eplFormats.zocalo
eplFormats.tripleImpacto
eplFormats.multipleImpacto
eplFormats.quintupleImpacto
eplFormats.inline
eplFormats.filmstrip
eplFormats.videoCounterExpandible
eplFormats.videoPreview

Example:

                var EPL = new eplBuilder().create(eplFormats.anuncioPrevio);

The library must be included in the <head> tag inside the HTML file.

                <head>
                    <script src="eplBuilder.js" type="text/javascript"></script>
                </head>

Every ad functionality is referred in Javascript as a method to the EPL object. The executed functions will only be the ones specified per format.

The functionalities per format here described must be added in the instances where the banner performs the respective interactions, as for example:

If a Expandable Push needs to expand, the "EPL.adExpand();" function must be added inside the action where the creative is programmed, which will result in the expansion of the EPL ad on a graphic level.

If a Layer must close, the "EPL.adClose();" function has to be added inside the Close button.

CLICKTAG:

The clicktag is generic and the same for all format types and programmed creatives, its implementation is as follows:

               <a onclick="window.open(window.clickTag); return false" href="#!"> </a>

If we require a specific area to execute the clicktag (such as a <div>), we do the following:

                    <a onclick="window.open(window.clickTag); return false" href="#!">
                        <div id="clickTag"> //here goes my creative </div>
                    </a>

We comprise our HTML element with the <a> tag so that the active area can become a functional clicktag.

Javascript functions depending on the format:

Generic Banner

- EPL.adStartTimer(); // this indicates when the ad has to start the stay time metric.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric.

Generic Layer

- EPL.adClose(); // this indicates the Layer has to be closed.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer, and will close the creative automatically.

Layer to Button

- EPL.adClose(); // this indicates the Layer has to be closed.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Banner to Layer

- EPL.adExpand(); // this indicates the Layer has to be expanded and shown.

- EPL.adClose(); // this indicates the Layer has to be closed.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Preview

- EPL.adClose(); // this indicates the Layer has to be closed.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Multiple Expandable

- EPL.adExpand(); // this indicates the ad has to be expanded and shown.

- EPL.adShrink(); // this indicates the ad to shrink its expanded state.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Folding

- EPL.adExpand(); // this indicates the ad has to be expanded and shown.

- EPL.setImages(img1,img2,img3,img4, img5,img6); // it receives the multiple image ids as parameters to be uploaded for the animation. These ids have to be passed as Strings, example: EPL.setImages(“imagen1”,”imagen2”,”imagen3”, ”imagen4”,”imagen5”,”imagen6”);
The images must be inserted into the HTML with the very same multiple ids.

- EPL.initAnimation(fps); // it starts the animation showing each one of the images, receives “fps” as an additional parameter that gives the ad a desired speed based on frame rate.

- EPL.endAnimation(fps); // it ends the animation by shrinking each image, receives “fps” as an additional parameter that gives the ad a desired speed based on frame rate.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Push Expandable

- EPL.adExpand(); // this indicates the ad has to be expanded and shown.

- EPL.adShrink(); // this indicates the ad to shrink its expanded state.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

- EPL.initExpanded();// this indicates if the ad has to start expanded or not, this option is set up manually from the e-planning platform when loading the ad.

Sample code to check if the ad has to start expanded or not:
if(EPL.initExpanded()){
EPL.adExpand();
//Add here the code that allows the visual expansion of the creative.
}

Expandable Rollover

- EPL.adExpand(); // this indicates the ad has to be expanded and shown.

- EPL.adShrink(); // this indicates the ad to shrink its expanded state.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Filmstrip

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric.

- EPL.setContent(divContenedor, divContenido); // it receives as parameters the following data:

divContenedor:

Div id that comprises the entire ad, its width and height must be specified in 300x600 pixels exactly while having the overflow property set in “hidden“.

divContenido:

Div id that contains all the elements in the ad, the real height of the entire content must be specified in order to execute the automatic scrolling.

Triple Impact

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

- EPL.adShowLeft(); // this indicates to show the left ad.

- EPL.adShowRight(); // this indicates to show the right ad.

- EPL.adShowLayer(); // this indicates to expand the Layer ad.

- EPL.adHideLeft(); // this indicates to close the left ad.

- EPL.adHideRight(); // this indicates to close the right ad.

- EPL.adHideLayer(); // this indicates the Layer has to be closed.

Multiple Impact

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

- EPL.adShowLeft(); // this indicates to show the left ad.

- EPL.adShowRight(); // this indicates to show the right ad.

- EPL.adShowTop(); // this indicates to show the upper/top ad.

- EPL.adShowLayer(); // this indicates to expand the Layer ad.

- EPL.adHideLeft(); // this indicates to close the left ad.

- EPL.adHideRight(); // this indicates to close the right ad.

- EPL.adHideTop(); // this indicates to close the upper/top ad.

- EPL.adHideLayer(); // this indicates the Layer has to be closed.

Quintuple Impact

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

- EPL.adShowLeft(); // this indicates to show the left ad.

- EPL.adShowRight(); // this indicates to show the right ad.

- EPL.adShowTop(); // this indicates to show the upper/top ad.

- EPL.adShowBottom(); // this indicates to show the lower/bottom ad.

- EPL.adShowLayer(); // this indicates to expand the Layer ad.

- EPL.adHideLeft(); // this indicates to close the left ad.

- EPL.adHideRight(); // ithis indicates to close the right ad.

- EPL.adHideTop(); // this indicates to close the upper/top ad.

- EPL.adHideBottom(); // this indicates to close the lower/bottom ad.

- EPL.adHideLayer(); // this indicates the Layer has to be closed.

Banner with Skin

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric.

- EPL.adShowSkin(id, fixed); // this indicates to show the skin with its matching id, which is passed as the first parameter. The second parameter indicates if the skin will have a fixed position or not, its value is passed as true or false. The ids can only be as follows: 1 or 2 or 3 or 4, since only a maximum of 4 skin images are allowed.

Takeover

- EPL.adExpand(); // this indicates the ad has to be expanded and shown.

- EPL.adClose(); // this indicates the Layer has to be closed.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Layer Fusion

- EPL.adJoin(); // this indicates the ad to animate the union of both sidebars.

- EPL.adClose(); // this indicates the Layer has to be closed.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Docking

- EPL.adExpand(); // this indicates the ad has to be expanded and shown.

- EPL.adShrink(); // this indicates the ad to shrink its expanded state.

- EPL.adClose(); // this indicates the Layer has to be closed.

- EPL.adComplete(); // this indicates the moment when the ad has to send the Complete metric, it must be set up in the Layer and will close the creative automatically.

Video

- EPL.setVideo(videoId); // video id from which metrics are required.

- EPL.adStartTimer(); // this indicates when the ad has to start the stay time metric (Video Banner exclusively).

- EPL.adClose(); // this indicates the Layer has to be closed (Video Layer exclusively).

Inline Video

- EPL.setVideoInline(videoId); // video id from which metrics are required.

- EPL.adShrink(); // this indicates the ad to shrink completely.

VideoPreview:

- EPL.init(direction); // initializes the layer to full screen and the direction parameter takes the following values:

• "RL" - right to left animation.

• "LR" - left to right animation.

• "BT" - bottom to top animation.

• "TB" - top to bottom animation.

If you do not pass the parameter, the announcement will not have an input animation and will be instantly displayed on the screen.

VideoCounter Expandible:

- EPL.init(); // initializes the entire advertisement and loads the logic and videos attached to the zip automatically.

video implementation:

To add a video to the HTML ad, follow the instructions corresponding to its own specifications:

In order for video metrics to be counted, the following tag has to be added to the respective HTML code. For example:

               <video id="video1" width="320" height="320" controls autoplay muted>
                <source src="video.mp4" type=”video/mp4”>
                </video>

We find the <video> tag, where the <source> tag can be found inside. The latter contains the video URL route that will load the video in the ad.

The video tag must have a specified id, in this example it is: "video1", to be able to realize that it counts metrics it is necessary to use the function EPL.setVideo (videoId, trackComplete, callback) which receives as parameters the following information:

- videoId: String, id of the video html5.

- trackComplete: true or false, indicates whether to perform the Ad Complete [EPL.adComplete ()] at the end of the video.

- callback: Function or null, function that is passed as a parameter to run once the video ends

Example

EPL.setVideo ("video1", true, function () {console.log ("Full Video");});

The Rich Media library recognizes the video automatically and adjusts the metrics to its controls.

A clicktag will also be added dynamically to the video.

Youtube video metrics:

• Sonido On

• Sonido Off

• Start

• Pause

• Restart

• Complete Ad

• 1/4 video viewed

• 1/2 video viewed

• 3/4 video viewed

Video options:

Rich Media formats bear up a maximum of 5 videos.

If a video that starts in auto play, stop or with sound on/off is to be added, these properties must be accordingly set up directly from the <video> tag.

This next example shows how to program a video that starts in auto play with its sound off and, finally, with visible controls:

The blue text shows the respective properties being set up.

YOUTUBE VIDEO IMPLEMENTATION:

For the implementation of a youtube video it is necessary to have in the ad implemented a div with an id defined specifically to load the youtube video, for example:

               <div id="videoYoutube">
               </div>

In order to perform the load of the video and count metrics, it is necessary to use the function:

EPL.setVideoYoutube(idDiv, idVideo, width, high, autoPlay, sound, loop, trackComplete, callback) which receives the following information as parameters:

- idDiv: String, id of the div where the youtube video should be uploaded.

- idVideo: String, youtube video id (obtained from the url of the video on youtube) example:

www.youtube.com/watch?v=AkA-WK0ORMQ&feature=youtu.be

The idVideo is: AkA-WK0ORMQ

- width: Number, width of the video.

- height: Number, height of the video.

- autoPlay: true o false, indicates whether to start in autoplay or not (true: yes, false: no).

- sound: true o false, indicates whether to start with sound on or off (true: yes, false: no).

- loop: true o false, indicates whether the video should loop (true: yes, false: no).

- trackComplete: true o false, indicates whether to run Ad Complete [EPL.adComplete ()] at the end of the video.

- callback: Function o null, function to be executed when the video is finished (Optional).

To initialize the videos you must call the function: EPL.initYoutubeVideos();

Youtube video metrics:

• Sonido On

• Sonido Off

• Start

• Pause

• Restart

• Complete Ad

• 1/4 video viewed

• 1/2 video viewed

• 3/4 video viewed

IMPORTANT: If a video has set the loop parameter to true, it will issue the Ad Complete metric but trackComplete will not be evaluated.

This causes that in an Expandable Push format, for example, the iframe is not automatically retracted at the end of the video.

AdConnector:

AdConnector is a new functionality that makes a connection between ads on the same web page. Allows the interaction of the user with all creatives of the banner. View demo

Functionality to SEND a message to an ad:

- EPL.sendMessage(message); message = name of the message .

Functionality to RECEIVE a message to an ad:

- EPL.onMessage(message, callBack); message = name of the message, callBack = function for ejecute when receive the message.

How is it used?

• Download demo here

• Prepare yours pieces with the functionalitys SEND and RECEIVE messages.

• Download and add the librery in to the .zip