Animated display ads are a very effective and popular way of advertising. In the previous blog, we introduced you to the interface and basic functions for designing and creating HTML5 ads and advertisements. The Google Web Designer.

In this article, we’ll take a look at some of the more advanced features of Google Web Designer, as well as how to store and implement the ad itself in a Google Display campaign. You’ll learn how to create animated display ads.

How are animated Display ads made?

How to create animated display ads and how to use them effectively in a well-designed campaign, read below.

Follow Us

Events are a way of setting up actions in response to a user’s action, a timeline keyframe, or some other occurrence in an ad or HTML document.

Objects and actions are connected in a special window that can be opened by selecting the object, pressing the right click and selecting the ”add event” option.

After selecting the “Add event” option, a window opens that takes us through 5 steps to set up the event, namely:

1. Target – here we select the object that triggers the event, such as ”button”
2. Event – we choose an event that will trigger an action, such as when a user clicks on a button or hovers the mouse over a button
3. Action – we choose an action that happened as a result, such as opening the second page of the ad, playing a video, going to the landing page
4. Receiver – select the ad element that performs the action, for example if clicking on the ”Tap area’‘ makes the image disappear, then the image is ”Receiver”
5. Configuration – some actions require additional details, such as adding the final URL for the landing page

All events are located in the lower left corner of the event area. 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 located at the top of the timeline And it allows you to link animation to events using tags and event markers. Event markers allow an event to start at a specific point in time (for example, we want something to happen, move, disappear, etc. in the 2nd second of an ad).

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

We add a bookmark right by clicking on the exact location in the timeline where we want to add a bookmark and from the drop-down menu select the option ”add event”.

Event labels are named locations on the timeline. We use them to send the reproduction of ads to a specific point in the timeline, for example:

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

In this case, we want to add a ”mouseover” event marker that we add to the event that when someone hovers the mouse over the specified object, the object changes color to dark purple.

Exit ad and go to the landing page.

By selecting the “Tap Area” component, we place a transparent element that allows us to initiate the action by clicking or touching the mouse.

From the component panel, in the ”Interaction” section, select ”Tap Area” and drag it to the position where you want it to be.

Right click to add an event by selecting the option ”Add event’’. In the first window we select the last option ” Tap Area” – Touch/Click. As an action we will choose ”Exit ad” in order for the ad to take 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 the click of the button to lead.

Publishing 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 any changes by clicking on the “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 to do is 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 choose settings such as the name of the ad 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!