Building Expanding Creatives – Google Web Designer

Building Expanding Creatives – Google Web Designer


OWEN CORSO: Hello and welcome
to this Google Web Designer video tutorial. I’m Owen Corso from Google. And today, we’re going
to build a rich media expandable creative with video. Let’s start by selecting
File, New File. This opens a dialog box
where we will set up our ad. First, let’s choose
our environment. We have four options– The default is Display & Video 360
so we will leave that as is. Next, we can select
the type of ad. We want to make an
expandable, so we select Expandable on the left. Next, we can set up
our ad’s dimensions. We are building a 320 by 50
that expands to 480 by 250. So I will make those changes. We then assign the
creative a name. I will leave my Save To
Location as the default, and leave the animation
mode set to Quick. Once I’m happy with my
settings, I click OK. Google Web Designer creates the
initial pages of the ad for me with the dimensions I defined. The collapsed page already
contains a Tap Area event to expand the ad and an expanded
page with a close tap area to collapse back down. It also has added all the
initial code needed for the ad to talk to the ad server and
collect tracking metrics. Those metrics are built
into the components, and we can assign unique
identifiers to each component as we go. So now I can start adding the
graphic elements I’ve already prepared. I drag a background
image or initial ad state and drop it onto the stage,
then align it to the stage, and layer it behind the tap
area by sending to back. Now, let’s switch to
our expanded page. Let’s add a background image
by dragging my image file to the stage. I can also add a
button to the stage by dragging the
Tap Area component. Let’s make a background
exit tap area. I will size, align it, and then
I will give it a unique name. To add functionality
to the button, I will add an event using the
plus button in the event’s toolbar. This brings me to
my Actions panel, where we assign
all of the metrics to our ad instead of
coding them manually. I’m going to select
the tap area I just named BackgroundExit from the list. Choose Tap Area, Touch/Click as the event. Google Ad, Exit ad. On the Receiver panel,
I select gwd-ad. Lastly, I give it an exit
identifier and a destination URL. For more in-depth details
on the event model, check out the Events
and Metrics video. Next, let’s add a
video component. You drag it to the stage,
then give it a name and size it properly. Tell it how to behave. I want it to auto
play and start muted. And you target the
video file here. This component has all
of the metrics built in, so you can avoid hand
coding them in the ad. OK. Let’s preview our ad. On page load, we see
our collapsed state. When we click, the ad
expands to our expanded page. Our video behaves
as we told it to, and clicking on the background
exits to our landing page. Once the ad is built and
functioning as you want, it is ready to publish. Go to File, Publish. And you’re presented
with a few options– Publish Locally,
to Google Drive, and, finally, to
Studio. Let’s choose Publish Locally. This is where you can
control how the ad is output. For instance, you
can add polite load to the ad, which delays the
ad load until after the page content loads. You can also set it
to minify the code and add browser
prefixes automatically. We’ll leave all these
settings as to the default. Click Publish, and Web Designer
will wrap up all of your files in a nice little zip
for uploading to Studio. Now, let’s test
it out in Studio. Let’s make a new
creative of expanding type. Drag the zip file to upload
our creative to Studio. Now, let’s preview our creative. As you can see, I can expand
the unit, play the video, and trigger the
background exit we added. You can see these events
logging to the output console. And that’s an overview
of Studio integration features in Google Web Designer.


2 thoughts on “Building Expanding Creatives – Google Web Designer

Leave a Reply

Your email address will not be published. Required fields are marked *