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.