ENABLER HTML5

Documentation DCO Enabler -> ENABLER HTML5

INTRODUCTION

ADventori-HTML-Logo

The ADventori technology can boost HTML5 ads. The starting point is a creation respecting the IAB standards :

  • It must be in the form of a zip file containing a single HTML file and all the necessary elements ( img, js, css ).
  • URLs in the HTML file must all be related.
  • To speed ADserving, JavaScript and CSS can be present directly in the main HTML file, and smaller images to be base64 encoded in HTML.
  • Don’t forget to produce the backup GIF for each format.
  • Thanks to respect the same naming convention for all assets in all formats.

There is an excellent tutorial HTML5 in this guide written by AdMob.

 

We are at your disposal to help you use the library ADventori, contact us at op@adventori.com

basics

Install Enabler

Install Enabler

Documentation DCO Enabler -> ENABLER HTML5 -> Install Enabler INSTALLATION OF THE ADVENTORI’S ENABLER   The ADventori’s enabler is a simple JS library : you must insert the library in your design to interact with our AdServer. The library creates a namespace ADventori and provides a lightweight CSS Reset. Here’s the code to insert : … Continued

Manage Click

Manage Click

Documentation DCO Enabler -> ENABLER HTML5 -> Manage Click MANAGE THE CLICK Banner with a redirect :Clicks on advertising should be sent to the AdServer, to account for and redirect the user to the correct page.A <a>Tag will include the contents of your creation, placed in display:block;with a width:100%; and height:100%. Here’s an example :See the Pen … Continued

DYNAMICS SETTINGS

DYNAMICS SETTINGS

Documentation DCO Enabler -> ENABLER HTML5 -> DYNAMICS SETTINGS DYNAMICS SETTINGS The dynamic values are available in a map data.To test your ad, you can set defaults after loading the script. These values will be automatically replaced with dynamic values at the time of AdServing.<script src=”https://adventori.com/lp/enabler/ADventori-2.0.0.js” crossorigin=”anonymous” type=”text/javascript”></script> <script type=”text/javascript”> var demo = ADventori.initData( { ‘wording’:’Lorem … Continued

Test Page

Test Page

Documentation DCO Enabler -> Test Page TEST YOUR BANNERS  To test your banner, upload your zip file containing your creatives into the test page, accessible here: Test page You have a banner with the following dynamic parameters ADventori.initData({ background : “bg-01.jpg”, logo: “img/logo_carre_vert.svg”, title : “A Title”, description : “A description of variable length”, cta … Continued

Text Dynamisation

Dynamize a text area

Dynamize a text area

Documentation DCO Enabler -> ENABLER HTML5 -> Dynamize a text area DYNAMIZE A TEXT ZONE To create a dynamic HTML tag, add a unique id or class attribute, and set the value of the text (setText).Once created driven by our AdServer, the texts will change based on established parameters (Geolocation, weather, date/time, cookies, retargeting…)To dynamize text … Continued

ADAPT THE TEXT SIZE

ADAPT THE TEXT SIZE

Documentation DCO Enabler -> ENABLER HTML5 -> ADAPT THE TEXT SIZE ADAPT THE TEXT SIZE If you want to insert dynamic text in your advertising, but this text may take, in some cases more space than the space reserved for it in its Div, you can use theadaptTextmethod.The adaptText method reduced the font size on a … Continued

VERTICALLY ALIGN YOUR TEXT

VERTICALLY ALIGN YOUR TEXT

Documentation DCO Enabler -> ENABLER HTML5 -> VERTICALLY ALIGN YOUR TEXT VERTICALLY ALIGN YOUR TEXT You have a banner with different text to be displayed based on your campaign scenarios and you want these automatically centered in their Div.The verticalAlign method adapts vertically a block of text and automatically centers it in its Div.Important: To properly … Continued

Images Dynamisation

DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE

DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE

Documentation DCO Enabler -> ENABLER HTML5 -> DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE It is possible to boost the images of your ad without them being distorded and keeping their full visibility .To create a zone of dynamic’s images, add a uniqueid attribute, and set the … Continued

Components

Carousel ADventori

Carousel ADventori

Documentation DCO Enabler -> ENABLER HTML5 -> Carousel ADventori CReate your carousel You can create your own carousel through the enabler :See the Pen adaptImg V2 by ADventori (@adventori) on CodePen.First declare all our html elements:myAd : div who will hold our Ad .myBrand : div who will hold our Brand .myCarousel : div who will … Continued

SlidingBanner ADventori

SlidingBanner ADventori

SlidingBanner ADventori The slidingBanner of ADventori allows you to have a banner with two superimposed layers. For the second layer to be visible, user interaction is required: either when over the banner with the mouse, or by moving the finger on a touch device. This format is more suitable for large advertising formats rather than … Continued

ADD map

ADD map

DYNAMIZE AND ADD A MAPThe ADventori enabler allows you to easily add a Google map (static or dynamic).Google authorization key:Before using the google maps service you must generate a google maps security key at this  adress, and activate the appropriate service (static map or javascript google API).Term of use google maps : linkStatic map :official documentation … Continued

Viewability

Viewability

VISIBILITY MANAGEMENTVisibility Management lets you play a creative’s animation only when it’s visible.To implement this solution, we must manage the visibility event in the banner and execute the animation when the event is captured.Case where the banner is not visible: First of all, you must modify your banner for the default display (image, div …), … Continued

ADD VIDEO

ADD VIDEO

Documentation DCO Enabler -> ENABLER HTML5 -> ADD VIDEO DYNAMIZING AND ADAPTING THE SIZE OF A VIDEO It’s possible to dynamize a video in your ad without it being distorted, and while keeping its full visibility.Once the banner is activated by our AdServer, the video will change according to the set parameters (geolocation, weather, date / time, … Continued