In my first Google Web Designer post, we went through a basic introduction into the program as well as the step-by-step process for creating a simple animated ad. This time we are going to get a little more in-depth and walk through the creation of an expandable display ad.
Moving away from standard display advertising, Rich Media ads allow more opportunity for creativity, an enhanced experience and more consumer interaction. Consumers are exposed to a large volume of images and commercials every day, and it is important to have creative that will grab attention. One way to do this is to utilize the click-to-expand design. Activated only by the user clicking (not hovering) this option can expand up to 728px x 270px. Although expandable ads are priced on a cost-per-click basis, this only applies if the user clicks through to the landing page, not if they only expand the display. This provides a lot of opportunity for increased brand awareness.
First, you will need to design the creative for your ad. I went over this process in detail in the first GWD post, so if you need a refresher check it out! Remember, for this ad you will be designing for two different sizes. These sizes are referred to as the “invitation state” and the “expanded state.” The invitation state can be any of the following dimensions:
Corresponding with the invitation state dimensions, the expanded state dimensions are:
After you have designed the ad and saved the files out as .SVGs, you’re ready to set up your ad. For this tutorial, I will be using a 200×200 invitation state and 400×200 expanded state.
1. When you’re ready, open GWD and select the “Expandable” ad type on the left side of the window. Then you will need to name your ad and select the folder where it will be saved. The environment should be set to DoubleClick. Next, set your invitation state size and your expanded state size.
2. GWD will automatically open to the invitation state portion of the ad, with a tap-area element already placed. Import the creative for the invitation size and center it on the stage. Send the artwork to the back so that it is behind the tap area event. In the bottom left corner of the screen you will see a button, that allows you to toggle back and forth between the invitation state and the expanded state. The expanded ad will automatically have a tap-to-close area in the top right corner. Next, ad the artwork to the stage and send it to the back.
3. Now, we will add a “background exit tap area” to the stage that will allow the user to click to the landing page. This element is under the “component” drop-down menu on the right side. Using the “properties” drop-down menu, adjust the size and alignment of the background exit tap area. You also will need to give the element a unique name like, “backgroundExit.”Then toggle the “events” menu down and click the “+” button in the bottom left corner. Select the “backgroundExit” element, then select “tap area” and “touch click.” Select “Double click component” and then “Exit.” The receiver is “gwd-ad.” Finally you will need to give it an exit identifier (I used “bgExit”) and paste in the desired URL. Now, you can preview your ad using the preview button in the top right corner of GWD. Once your ad is complete, you will be ready publish it!
Google Web Designer allows endless opportunities to get creative with Rich Media ads. For an added challenge, try adding in video to your expanded ad! Comment and let us know if you have any questions or additional tips!