Skip to 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

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 events'', 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

Since 2017. we cooperate with Digitizer. Extremely precise and professional cooperation. We are seeing results, and given the industry we are involved in, a lot depends on the marketing that Digitizer does. The results are best seen in the number of people who come to the interview. Every time I suggested something, the Digitizer team made sure to make changes to the presentation. Of course I recommend them. They have already been recommended.

Filip Slijepcevic
Technical points
Rating: 10

Since 2020, we have been cooperating with Digitizer. Cooperation is wonderful and communication is relaxed: requests are met with understanding and fulfilled extremely quickly. We see an increased volume of work as measurable results. I am absolutely and always free to suggest my opinion to this team. I keep recommending them.

Lenka Jakimovska
Chicago Waffles
Rating: 10

DermaVille practice has been working with Digitizer since 2023 and I think they are very professional. Praise. From concrete results, we see more visits to our site. Yes, we are happy to recommend Digitizer!

Danijela Ljubojevic
DermaVille
Rating: 10

We have been working with Digitizer since 2019, so more than 5 years. I am extremely pleased with the speed with which my orders sent to the Digitizer team are responded to. The concrete result of cooperation with Digitizer is that my website is always organized and updated in a timely manner. The freedom to suggest solutions and exchange opinions was valid from the very beginning in my relationship with Digitizer and it is the basis of our cooperation that still exists today after 5 years of cooperation. I would absolutely recommend Digitizer's services to other companies, and I always do when the opportunity arises.

Dino Jusufovic
Jusufovic & Partners
Rating: 10

We have been working with Digitizer for more than 5 years. Cooperation is very positive and productive, well organized and leads to success. In our cooperation with Digitizer, we see concrete progress, especially in increasing the number of followers on social networks, quality posts and useful suggestions for better visibility of our company. We have the freedom to express our opinions and suggestions, and the Digitizer team respects and takes this into consideration. They are open to recommendations and we work together to improve cooperation. We are very happy to recommend Digitizer. The Digitizer team is wonderful, cooperative and always responds to all our requests as quickly as possible.

Marijana Kuzmanovic
Sineks Medical
Rating: 10

We have been working with Digitizer since, I think, the very founding of Digitizer in 2014. A wonderful, long-term cooperation in which the Digitizer team always meets us to meet all our requirements in record time. Great ideas and very friendly co-workers. By cooperating with Digitizer, we managed to raise our website to a higher level, a larger number of people following us on social networks and a larger number of clients in our retail stores. I feel free to suggest to Digitizer my opinion about cooperation and they respect it. Digitizer is a company I recommend to anyone who wants serious collaborators. A wonderful creative team that listens to your needs and desires and turns them into reality.

Mira Suhanski
Perfumery Diva
Rating: 10

We have been working with Digitizer since 2021 and they have shown as a team that they are very responsible, reliable and professional. They provided us with a professional relationship from the start of cooperation until today. The results are concrete and measurable. I recommend!

Slobodan Stamenkovic
Info point
Rating: 10

Egrokorr trade and Digitizer have been cooperating for a little more than 5 years. Our experience is in one word: GREAT! The concrete results we see are a much higher number of visits to the site, and therefore a lot of new clients. I have been recommending them for a long time and will continue to do so!

Marija Perovic
Egrokorr Trade
Rating: 10

We have been cooperating with Digitizer since 2015. We recognized that they are available, friendly, and ready to cooperate. In particular, we are most satisfied with the Google ads service - we have increased the number of calls directly from the website. The cooperation is correct and we are very satisfied. I would and already recommend Digitizer to any company that needs their services.

Bojana Kralj
Message Advertising
Rating: 10

We have been cooperating with Digitizer since 2018, since our foundation. I consider the cooperation so far perfect, with exceptional results. I gladly and always recommend Digitizer to all companies.

Igor Vidovic
AirSoft Polygon
Rating: 10

Digitizer and the Bianconeri have always cooperated. Phenomenal communication and cooperation, and we see results such as better finding and better overview of our website. I am very happy to recommend the services of Digitizer to everyone.

Sanja Topic
Bianconeri - Sanja Topic
Rating: 10

We have been working together for more than a year and the result is an increase in clients. I happily recommend Digitizer to companies.

Olivera Radivojevic
Olja Beauty
Rating: 10

company: Iskra has been cooperating with Digitizer for about 3 years. Our experience so far has been flawless, beyond all expectations!!! The results are more than visible. We agree on absolutely everything, it's the only way to achieve top results. Of course, we always recommend them.

Miljan Rajovic
Ordinance Iskra M
Rating: 10

We have been cooperating since 2018 and using their knowledge and experience, we managed to increase visibility on the networks and online sales. They mostly understand me. They are always a good recommendation.

Jelena Simonovic
Baby Plaza
Rating: 10

Sign Up Now.

Follow.

Chat.

Contact Form.

    Name and surname*
    E-mail*
    Do you want to leave a mobile phone number?*
    Mobile phone number
    Company/Organization*
    Website
    What does your company/organization need?
    Do you know what results you want to achieve?*
    What results do you want to achieve?


      Name and surname*
      E-mail*
      Do you want to leave a mobile phone number?*
      Mobile phone number
      Company/Organization*
      Website
      What date would you like to make an appointment?
      What time?


        Name and surname*
        E-mail*
        Do you want to leave a mobile phone number?*
        Mobile phone number
        Company/Organization*
        Website
        Do you know what results you want to achieve?*
        What results do you want to achieve?


        Mobile & Email.

        Links.