CREATIVE LAB

ENABLER ADOBE EDGE

Documentation DCO Enabler -> ENABLER ADOBE EDGE

INTRODUCTION

ADventori-EdgeAnimate-Logo

In this tutorial, we’ll show you how to integrate ADventori library in Adobe Edge Animate CC to boost HTML5 ads.
The starting point is a creation respecting IAB’s standards :

  • It must be in the form of a zip file containing a single HTML file and all the necessary elements (img, js, css).
  • The URLs in the HTML file must all be relatives.
  • Note: ADventori is no limited on the weight of creation, but to optimize the delivery, we recommend keeping weight under 200kbytes.
  • Don’t forget to produce the backup GIF for each format
  • Thanks to respect the same naming convention for all assets in all formats

 

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 ADOBE EDGE -> Install Enabler INSTALLING THE ADVENTORI’S ENABLERCreate a new Edge project (Folder –> New ), in the section Library, click on Scripts and Add a JS file from URL… Then enter the URL of the library ADventori https://adventori.com/lp/enabler/ADventori-2.0.0.js and https://adventori.com/lp/enabler/ADventori-2.0.0.css  Links to the library should appear like this: EDGE: SETTING PUBLICATION Open the Publish … Continued

Manage Click

Manage Click

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> Manage Click MANAGE THE CLICK Banner with a redirectClicks on the advertisement must be sent to the AdServer, to account for and return the user to the correct page.Select the Stage of the ads, click on{} and choose the event clickAdd the code ADventori.click();to your function.  Result: Download the … Continued

DYNAMICS SETTINGS

DYNAMICS SETTINGS

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> DYNAMICS SETTINGS DYNAMICS SETTINGS Dynamic values are available in a map data.To test your creative, you can set default values after inserting the script in the event compositionReady. These values will be automatically replaced with dynamic values at the time of AdServing.ADventori.initData( {‘wording’:’Lorem Ipsum’, ‘photo’:’http://url.of/photo’}); console.log(ADventori.data.wording + ‘==’ … 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 ADOBE EDGE -> Dynamize a text area DYNAMISE A TEXT ZONE To create a dynamic HTML tag, add an attribute id unique (field properties), and set the value of the text (setText).Once created driven by our AdServer, texts will change according to established parameters (Geolocation, weather, date / time, cookies, retargeting … Continued

ADAPT THE TEXT SIZE

ADAPT THE TEXT SIZE

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> ADAPT THE TEXT SIZE ADJUST TEXT SIZE If you want to insert dynamic text into your banner, but this text may take, in some cases more space than the space reserved for it in the div, you can use the methodadaptText.The method adaptText reduces the font size on … Continued

VERTICALLY ALIGN YOUR TEXT

VERTICALLY ALIGN YOUR TEXT

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> VERTICALLY ALIGN YOUR TEXT VERTICALLY ALIGN YOUR TEXT You have a banner with different text to display based on your campaign scenarios and you want them to automatically center in their div.The method verticalAlign adapts vertically a block of text automatically and center in its div.ADventori.initData({ wording:”Lorem ipsum … Continued

Images Dynamisation

DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE

DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> 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 distorted and keeping their full visibility.To create a dynamic resizable pictures, add an attribute id unique, and set the … Continued

Components

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 : link Under Adobe edge, … Continued

ADD VIDEO

ADD VIDEO

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> 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 / … Continued