CREATIVE LAB

ENABLER GOOGLE WEB DESIGNER

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER

INTRODUCTION

ADventori-GWD-Logo

In this tutorial, we’ll show you how to integrate ADventori library in Google Web Designer to dynamize HTML5 ads.
The starting point is created 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).
  • The URLs in the HTML file must all be relatives.
  • Note: ADventori isn’t limited on the weight of the creative, 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 GOOGLE WEB DESIGNER -> Install Enabler INSTALLING ADVENTORI’S ENABLERCreate a new Google Web Designer project (Folder –> New–>Banner ), in the section Environment, click on Announcement other than Google and confirm.Then enter the URL of the library ADventori https://cf-cdn.adventori.com/lp/enabler/ADventori-2.0.0.js and https://cf-cdn.adventori.com/lp/enabler/ADventori-2.0.0.css in the project source code part : <script src=”https://adventori.com/lp/enabler/ADventori-2.0.0.js” … Continued

Manage Click

Manage Click

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> Manage Click MANAGE THE CLICKBanner with a redirectClicks on the advertisement must be sent to the AdServer to be counted and redirect the user to the correct page.First you have to install a Tap Area. You can find it in the Components pannel. Make sure this … Continued

Dynamics Settings

Dynamics Settings

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> Dynamics Settings DYNAMICS SETTINGS Insert Dynamics Settings after the html code of the page (after the tag gwd-genericad) 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 … 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 GOOGLE WEB DESIGNER -> Dynamize a text area DYNAMIZE A TEXT AREA To create a dynamic HTML tag, add an attribute id unique (field properties), and set the value of the text (setText).Once the creative driven by our AdServer, texts will change according to established parameters (Geolocation, weather, date / time, … Continued

Adapt the text size

Adapt the text size

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> Adapt the text size ADJUST TEXT SIZEIf you want to insert dynamic text into your creative, but this text may take in some cases, more space than the space reserved for it in the div, you can use the method adaptText.The method adaptText reduces the font … Continued

VERTICALLY ALIGN YOUR TEXT

VERTICALLY ALIGN YOUR TEXT

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> 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 be centered in their div.The method verticalAlign adapts vertically a block of text automatically and center it in its … Continued

Images Dynamisation

Dynamize and adapt the size of an image

Dynamize and adapt the size of an image

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> Dynamize and adapt the size of an image DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE You can dynamize your ad images without them being distorted and keeping their full visibility.To create a zone of dynamic, resizable pictures, add an attribute id unique, and set the value … Continued

Components

Carousel ADventori

Carousel ADventori

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> Carousel ADventori CReate your carouselYou can create your own carousel through the enabler : First Step : Create a Non Google Ad project and install our enabler (more details here). Second step :Create your banner, plan a container which host the carousel ADventori.Give an id to its container. Third … Continued

VISIBILITY

VISIBILITY

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 …), in … 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 : link Under Google web designer,  create … Continued

ADD VIDEO

ADD VIDEO

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> AJOUTER UNE 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, … Continued