Create your dynamic ads

DCO ENABLER ADOBE EDGE

INTRODUCTION

 

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




INSTALLING THE ADVENTORI’S ENABLER


Create a new Edge project (Folder –> New ), in the section Library, click on Scripts and Add a JS file from URL…

link_enabler_en

 

Then enter the URL of the library ADventori //adventori.com/lp/enabler/ADventori-2.0.0.js and //adventori.com/lp/enabler/ADventori-2.0.0.css

 

url_enabler_en

 

Links to the library should appear like this:

 

integration_enabler_en



EDGE: SETTING PUBLICATION

 

  1. Open the Publish Settings panel:
    • Folder > Publish Settings
  2. Configure advanced settings:
    • Uncheck the setting as shown against
    • Hosting executable files on Adobe CDN
    • Save the settings

edge_publication_en



MANAGE THE CLICK

 

Banner with a redirect

Clicks 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 click

Add the code ADventori.click();to your function.

 

click_en

click2_en

 

Result:

Banner with several redirects

 

A clickable area by product

 

In case you have several products, each with a redirect URL:

Select the Stage of the ads, click on {}, Choose Event compositionReady and add the code below:

ADventori.initData({ items: [{"id":1,"data":{"url":"http://www.urlitem1.com"}},{"id":2,"data":{"url":"http://www.urlitem2.com"}},{"id":3,"data":{"url":"http://www.urlitem3.com"}},{"id":4,"data":{"url":"http://www.urlitem4.com"}}]});

This code initialize the dynamic elements once the banner is fully charged.

Then on each area of items, add an event click to manage redirection and add the following code: ADventori.click(e,ADventori.data.items[0]); , 0 is the first, 1 second …

click3

 

Inspect tab code, you should have the following result:

click4

Result : 

   



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 + '==' + 'Lorem Ipsum');
console.log(ADventori.data.photo + '==' + 'http://url.of/photo');

For all campaigns using several formats, all dynamics values must be the same throughout all formats

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 …).

 

edge_setText_en

 

Insert the following code in the event compositionReady :

ADventori.initData( {"wording": "Even though using lorem ipsum often arouses curiosity due to its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design in order to direct the focus to presentation"});
ADventori.Format.setText(sym.$("monTexte"), ADventori.data.wording);

Result :



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 a given element, “10” is the accepted minimum size.

The reduction factor optimizes text display and adjust the font size according to the space for the text field.

In case the entire text does not fit in the space reserved for it and its font size is 15px, then the method will reduce it to 10px.

Example :

ADventori.initData ( {"wording": "Even though using lorem ipsum often arouses curiosity due to its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design in order to direct the focus to presentation"});
ADventori.Format.setText(sym.$("Text"), ADventori.data.wording);
ADventori.Display.adaptText(sym.$("Text"), 10);

Result :

You want to revitalize and adapt your text directly? The method setAndAdaptText is for you:

ADventori.initData ( {"wording": "Even though using lorem ipsum often arouses curiosity due to its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design in order to direct the focus to presentation"});
ADventori.Display.setAndAdaptText(sym.$("Text"), ADventori.data.wording,10);

Result



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 is simply dummy text for composition."});
ADventori.Format.setText(sym.$("Text"), ADventori.data.wording);
ADventori.Display.verticalAlign(sym.$("Text"));



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 value of the image (addAndAdaptImage) by default.

Once created driven by our AdServer, images will change according to the established parameters (Geolocation, weather, date / time, cookies, retargeting …).

For this, you must give a width and a height to the div containing your image to make it fit to its size.

Other personalization methods available:

  • adaptImage(element,url,urldefault) : This method allows you to adjust the image size according to its container.
  • addImage(element,url,urldefault) : This method allows you to add an image to the specified container.

 



TESTING AND BANNER VALIDATION

 

Testing a banner is easy. Just zip your HTML file (with the images …) and test this Test page :

ADventori.initData({mc_text:"THIS IS THE FIRST TEXT",mc_text2:'THIS IS THE SECOND TEXT',mc_text3:'THIS IS THE THIRD TEXT'});

The dynamic parameters in ADventori.initData should appear:

 

You can change your default wording to simulate your scenarios.

Click on Display creative, dynamic parameters are transmitted to the banner.

 



CONTACT

 

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