Skip to Main Content

Animated Display ads are a very effective and popular way of advertising. In a previous blog We have introduced you to the interface and basic functions for designing and creating HTML5 ads and advertisements, ie. Google Web Designer-om.

In the following text, we will deal with some of the more advanced functions Google Web Designeras well as by storing and implementing the ad itself in googledisplay campaign. You will learn how to make animated Display ads.

How are animated Display Ads made?

Read below how animated Display Ads are created and how they are used effectively in a well-designed campaign.


Events are the way you post actions (actions) in response to a user action, a moment in the course of an ad (timeline keyframe) or other occurrences in the ad or HTML document.

We connect objects and actions in a special window that we open by highlighting the object, right-clicking and selecting ''.add event'' option.

After selecting the option ''Add event'', a window opens that takes us through 5 steps to set up the event, as follows:

  1. Goal - here we choose the object that triggers the event, such as '' button ''
  2. Event - select the event that will trigger the action, such as when a user clicks a button or hovers over a button
  3. Action - we choose the action that happened as a result, such as opening the other side of the ad, playing a video, going to landing page
  4. Recipient - we select the ad element that performs the action, for example if clicking on ''Tap area ''make the image disappear, then the image' 'is the receiver
  5. Configuration - Some actions require additional details, such as adding a final URL for ''landing page''

All events are located in the lower left corner of the event space. Here we add events by clicking on the 'button'Add event'', we edit events by double-clicking on a specific event. The event is deleted by selecting the event and clicking the button '' Delete '' in the lower right corner of the board.

Timeline and adding events

The event bar is at the top Timeline and it allows you to link animation to events using event tags and markers. Event markers allow you to start an event at a certain point in time (for example, we want something to happen, move, disappear, etc. in the 2nd second of the ad).

When the animation reaches the event marker in the timeline, the event starts.

We add a marker by right-clicking on the exact location in the time bar where we want to add a marker and select the option '' from the drop-down menu.add event ''.

Event labels are named locations in the timeline. We use them to send ad playback to a specific point in the timeline, for example: 

Our click button is pink, purple, until after a few seconds it changes color to dark purple.

In this case, we want to add an event tag '' mouseover '' which we add to the event that when someone moves the mouse over the specified object, the object changes color to a dark purple color.

Exit ad and go to the landing page

By selecting the '' componentTap Area'' we set up a transparent element that allows us to launch an action with the click or touch of a mouse.

From the component panel, in the section Interaction we choose ''Tap Area'' and we drag him to the position where we want him to be.

Right-click to add an event by selecting ''Add event ''. In the first window we choose the last option ''Tap Area '' - Touch / Click. As an action we will choose ''Exit ad'' so that the ad takes us to the desired destination outside the HTML document. As a receiver, we select the entire ad, and at the end of the configuration we add the URL of the destination to which we want to click the button.

Publish an ad or HTML document

Before saving the document, be sure to check if the HTML is functional and if it is necessary to make some changes by clicking on '' Preview '' button in the upper right corner and selecting the browser.

After checking the correctness of the animated display ad, the only thing left for us is to save the ad and prepare it for uploading to one of the platforms we want to use (AdRoll, Google Display...).

On the left side of the window that pops up, there is general information about the document, such as size, ad validation check, and on the right we select settings such as the ad name and where we want the zipped file to be saved.

We are ready to put our knowledge at the service of your business. Contact us!

Made by Nemanja Nedeljkovic - Senior Account Manager @Digitizer