Tutorial for creating HTML5 ads with Google Web Designer!

Ladies and gentlemen, don’t you think that the only creative options when implementing display ads are text ads and banner ads (images)? Until recently, I had no choice but to use text ads or banner ads (images), but I found that using a tool called Google Web Designer made it easier than I expected to create ads with animations.

So, using Google Web Designer, we will conduct a tutorial for creating HTML5 advertisements.

Goal of this tutorial

In this tutorial, the purpose is to create an HTML5 ad that moves like the animation below (Since the video recorded with Quick Player is converted to GIF animation, the animation may look jerky, It actually moves smoothly). It’s a simple animation, but if you can make this HTML5 ad quickly, I think you’ll be able to make HTML5 ads with slightly different movements.

Limitations of HTML5 ads in Google AdWords

Restrictions and technical requirements are

In the “HTML5 Ads” section, but importantly:

• File size must be 150KB or less
• All required files must be included in the ZIP file

2 points. Although it is compressed with ZIP, if you compress all files into ZIP and try to fit them in 150KB, you need to carefully select the image files to be used. Also, just because you can use JavaScript in HTML5 ads, if you try to use the familiar jQuery, you may end up using up most of the file size just by loading the library.

Luckily, HTML5 ads support CSS3 animations, so if you’re going to use animations, it’s a good idea to use CSS3 animations whenever possible.

Download, install and launch Google Web Designer

You can download it from the official website of Google Web Designer .

As for the supported OS, it is a feature that it supports not only Windows and Mac, but also various Linux such as Debian, Ubuntu, Fedora, and OpenSUSE. With the end of support for Windows XP, it seems that people who have switched from Windows to Linux terminals will be able to use it with confidence.

Once the installation is complete, let’s get started. Apparently, this application is supposed to be used while connected to the Internet, or it seems that it cannot be started without an Internet connection environment.

Material preparation

Prepare the materials you will need to create your banner. The banner to be created this time is 300px wide and 250px high, but the image to be prepared is 600px wide and 500px high, as shown below, and each area from A to D will be displayed in order by animation. increase.

And it will be the image for CTA (Call to Action) to be displayed at the end. Here, at the end of the animation, the previous image is reduced to show the whole, and the CTA is displayed in the middle in an overlay form. This is a PNG image with a transparent background.

If the preparation is troublesome, please copy the following two images locally and use them.

Advertisement production started

I think it’s hard to understand even if I explain it in sentences, and I think it’s hard to understand even if I use a lot of screen captures, so I’m uploading a video that summarizes the production procedure on Youtube. Please see here for an image of the production process.

The video is just over 7 minutes, so I think it’s easy to watch it in between work.

Create a project

You can create a new project by selecting File > New File from the Google Web Designer menu. here,

• Usage environment
• dimensions (actually, image size)
• name
• storage location
• animation mode

Specify The setting value is

I think it’s fine.

Importing assets (images)

Import the image into your Google Web Designer project. To import, you can import by dragging and dropping the local image file as it is. Here we are importing two image files.

Roughly set animation movement

As you add scenes, change the placement of the images in each scene, and roughly set the movement of the animation. At the same time, set how the animation will move and how long the animation will take. At this point, don’t worry if the pixels are slightly out of alignment as we will fine-tune them later.

While working, check the current animation movement while previewing each time.

View code to tweak pixels

Once the rough animation movement is complete, the next step is fine-tuning pixel by pixel. For fine-tuning, directly edit the source code of the generated HTML file. Viewing the source code shows

@-webkit-keyframes ... {
  0% {
    ...
  }
  25% {
    ...
  }
  50% {
    ...
  }
  75% {
    ...
  }
  100% {
    ...
  }
}

I think there are about 2 places that look like this. This will be the setting data for the animation of the two images you set.

Find the top and left lines in these and adjust the values. In this case, try setting this value to the closest number between “-300”, “-250”, “0”, “300”, and “250”.

Let’s preview in this state. The pixel position should now be correct.

Zoom out one image in the last scene

Reopen the HTML source code you edited earlier. The edits will be the same as before. However, this time only one of the two images is targeted. You can see which of the two is the target by looking at the code, but if you are not familiar with it, try one, and if it behaves unexpectedly, go back and try the other. Try it with

This time, at “100%”,

width: 300px;
height: 250px;

, and for each of “0%” to “75%”,

width: 600px;
height: 500px;

Add Now, at the last 100% stage, you will gradually zoom out and the image size will be just right.

Make CTA text fade in rather than slide in

I think the CTA text now slides in from the right. For those who say that the slide-in is well-formed as it is, this is the completion, but here, I would like to change the CTA text to fade-in rather than slide-in (CTA is An animation in which the color gradually darkens from a transparent state).

This is also an operation on the HTML source code. Manipulate the other animation that was not edited earlier.

At “100%”,

opacity: 1;

, and for each of “0%” to “75%”,

opacity: 0;

Add This will gradually change the transparency. Also, since the CTA is on the right side of the advertising area when the animation starts, each of “0%” to “100%”

top: 0px;
left: 0px;

and move the CTA location to the ad area.

Now try the preview. You should now have an HTML5 ad that behaves exactly like the animation in the first sample.

Publish and Traffic

Once you have created your HTML5 ad, select Publish from the menu at the bottom of the screen to publish it locally. A ZIP file will now be generated. This generated ZIP file can be used in AdWords by submitting it on the Google AdWords management screen.

source code for animation

The final form of the source code of the manually edited animation part is as follows. (Be careful when copying and pasting because the … part changes each time you create it.)

@-webkit-keyframes ... {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-animation-timing-function: ease;
  }
  25% {
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-animation-timing-function: ease;
  }
  50% {
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-animation-timing-function: ease;
  }
  75% {
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-animation-timing-function: ease;
  }
  100% {
    left: 0px;
    top: 0px;
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}

...

@-webkit-keyframes ... {
  0% {
    left: 0px;
    top: 0px;
    -webkit-animation-timing-function: ease;
  }
  25% {
    left: -300px;
    top: 0px;
    -webkit-animation-timing-function: ease;
  }
  50% {
    left: 0px;
    top: -250px;
    -webkit-animation-timing-function: ease;
  }
  75% {
    left: -300px;
    top: -250px;
    width: 600px;
    height: 500px;
    -webkit-animation-timing-function: ease;
  }
  100% {
    left: 0px;
    top: 0px;
    width: 300px;
    height: 250px;
    -webkit-animation-timing-function: linear;
  }
}

To make HTML5 ads easier

We have set up the HTML5 ad project created here so that it can be downloaded from the following URL as a ZIP file. I think that the image will be changed, but if you replace only the image in this file and publish it with Google Web Designer, it will be the same animation advertisement, but you can start HTML5 advertisement more easily.

summary

Once you can create the HTML5 ads introduced this time, you will be able to create ads with some unusual variations of creatives. With Google AdWords, you can use not only text ads and banner ads, but also interactive creative ads such as the HTML5 ads introduced this time, and other expandable ads. Why not consider creating dynamic ads like this to create ads that are easy to leave an impression on your users?