How to Create HTML5 Banner Ads

HTML5 banner ads are interactive, eye-catching ads built with Google Web Designer or other tools. They tend to grab more attention than the normal static and GIF ads. They can serve on both web pages and mobile apps. Here is an example of one.

They are created using a mix of HTML, CSS, and Javascript. However, with Google Web Designer, you do not need to know how to code before you can create them.

In this article, we will be taking a look at how to create the ads on Google Web Designer and how to upload them to an actual campaign on Google Ads.

How to Create HTML5 Ads On Google Web Designer

1. You will first need to download the Google web designer app for your desktop. It is available for both Mac and Windows computer. You can get it here.

2. Once you have downloaded and installed it, click on the Create a New File button.

3. Give your file a name, select the dimension you want to create an ad for, and choose your ad environment. It's on Display and Video 360 by default, but you should change it to Google Ads if the ad you're creating will be running on Google Ads. Your choice of environment matters, as the DV360 environment offers a wider range of interactivity than what is available to Google ads. Also, if you choose DV360 and try using your ad on Google, it won't work. Once you click Ok, you will be taken to a blank canvas.

4. The next step is to select the HTML5 image effect you want to use. To see the available options. Drag the image effect component onto your canvas. Once you do, be sure to expand the image effect to cover the whole width and height of the canvas. You can watch the tutorial video at the bottom of the guide to understand better.

5. After adding the image effect, double-click on it and choose the image you want to add an effect to.

6. After uploading your image, click on the "type" button to select the image effect you want. There are four image effect options:

• Before and after
• Breath
• Reveal
• Wave

You can play around with each effect type to know how they work. For this example I will be choosing the Breath effect. You can preview it here.

Once you are done. Click on save.

7. The next step is to publish your HTML5 banner ad. To do that click on the publish button at the top right, select locally and choose the folder you want to save it in.

We have covered the first part of the process. In the next section below I will be showing you how you can upload the HTML5 banner on Google ads.

How to Upload HTML5 Banner on Google Ads

Now that you have created your banner, How do you use it to run a campaign on Google.

1. Sign in to your Google ads account and click create campaign.

2. Choose Display as your campaign type.

3. Set your budget, targeting and other settings.

4. Google will automatically take you to create a responsive display ads. It is always the default display ad type when you create a display ad campaign. HTML5 banners are not currently available for responsive display ads however. They are only available for standard display ads. Click on the cancel button to get rid of the responsive display ad.

5. Click new ads and choose upload display ads.

6. Click on choose files to upload and select your HTML5 banner ad. The banner you created with Google web designer would be saved in a folder. Open the folder and. select the zip file you see, as the file to upload. Google will only recognise the zip file.

7. Once you upload it, it will show up like the example in below screenshot

8. Finally add your final url, click on create ad, save and publish your campaign.

You can go through this tutorial video for a visual walkthrough of the whole process

That is all. I hope you found this guide useful. Feel free to share with anyone that needs it or drop your comments below. See you on another article.