Building Expanding Creatives - Google Web Designer Google Web Designer English (auto-generated) English

Building Expanding Creatives - Google Web DesignerYouTube↗ IA↗(long shot)
Science & Technology 8.7K views 56 likes 2 dislikes 18 Sep 2018

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

hello and welcome to this Google web

OWEN CORSO: Hello and welcome to this Google Web Designer

designer video tutorial I'm Owen Corso

video tutorial.

from Google and today we're going to

I'm Owen Corso from Google.

build a rich media expandable creative

And today, we're going to build a rich media

with video let's start by selecting file

expandable creative with video.

new file this opens a dialog box where we will set up our ad first let's choose

Let's start by selecting File, New File. This opens a dialog box where we will set up our ad.

our environment we have four options

First, let's choose our environment. We have four options--

default is display in video 360 so we

The default is Display & Video 360 so we will leave that as is.

will leave that as is next we can select

Next, we can select the type of ad.

the type of ad we want to make an expandable so we select expandable on

We want to make an expandable, so we

the left next we can set up our ads

select Expandable on the left.

dimensions we are building a 320 by 50 that expands to 480 by 250 so I will

Next, we can set up our ad's dimensions. We are building a 320 by 50 that expands to 480 by 250.

make those changes we then assign the

So I will make those changes.

creative a name I will leave my save to

We then assign the creative a name.

location as the default and leave the

I will leave my Save To Location as the default,

animation mode set to quick once I am

and leave the animation mode set to Quick.

happy with my settings I click OK Google

Once I'm happy with my settings, I click OK.

web designer creates the initial pages

Google Web Designer creates the initial pages of the ad for me

of the ad for me with the dimensions I defined the collapse page already contains a tap area event to expand the

with the dimensions I defined. The collapsed page already contains a Tap Area event

ad that in an expanded page with a

to expand the ad and an expanded page with a close tap area

closed tap area to collapse back down

to collapse back down.

it also has added all the initial code

It also has added all the initial code needed for the ad

needed for the ad to talk to the ad server and collect tracking metrics

to talk to the ad server and collect tracking metrics.

those metrics are built into the

Those metrics are built into the components,

components and we can assign unique identifiers to each component as we go

and we can assign unique identifiers to each component

so now I can start adding the graphic

elements I have already prepared I drag

So now I can start adding the graphic elements I've already prepared.

a background image or initial add state

I drag a background image or initial ad state

and drop it onto the stage then align it

and drop it onto the stage, then align it to the stage,

to the stage and layer it behind the tap area by sending to back now let's switch

and layer it behind the tap area by sending to back.

to our expanded page let's add a

Now, let's switch to our expanded page.

background image by dragging my image

Let's add a background image by dragging my image file

file to the stage I can also add a

button to the stage by dragging the tap

I can also add a button to the stage

area component let's make a background

by dragging the Tap Area component.

exit tap area I will size align it and then I will give it a unique name to add

Let's make a background exit tap area. I will size, align it, and then I will give it a unique name.

functionality to the button I will add

To add functionality to the button,

an event using the plus button in the

I will add an event using the plus button in the event's

events toolbar this brings me to my

actions panel where we assign all of the

This brings me to my Actions panel,

metrics to our ad instead of coding them

where we assign all of the metrics to our ad instead of coding them manually.

manually I'm going to select the tap

I'm going to select the tap area I just

area I just named background exit from

named BackgroundExit from the list.

the list choose tap area touch click as the event Google ad

Choose Tap Area, Touch/Click as the event.

eggs ad on the receiver panel I select GWD ad lastly I give it an exit

Google Ad, Exit ad. On the Receiver panel, I select gwd-ad. Lastly, I give it an exit identifier and a destination

identifier and a destination URL for

more in-depth details on the event model

For more in-depth details on the event model,

check out the events and metrics video

check out the Events and Metrics video.

next let's add a video component you

Next, let's add a video component.

drag it to the stage then give it a name

You drag it to the stage, then give it a name

and size it properly

and size it properly.

tell it how to behave I want it to

Tell it how to behave.

autoplay and start muted and you target

I want it to auto play and start muted.

the video file here this component has

And you target the video file here.

all the metrics built in so you can

This component has all of the metrics built in,

avoid hand coding them in the ad okay

so you can avoid hand coding them in the ad.

let's preview our ad

OK. Let's preview our ad.

on page load we see our collapse state

On page load, we see our collapsed state.

when we click the add expands to our expanded page our video behaves as we

When we click, the ad expands to our expanded page. Our video behaves as we told it to,

told it to and clicking on the background exits to our landing page

and clicking on the background exits to our landing page.

once the ad is built and functioning as

Once the ad is built and functioning as you want,

you want it is ready to publish go to

it is ready to publish.

file publish and you're presented with a

Go to File, Publish.

few options publish locally to Google

And you're presented with a few options-- Publish Locally, to Google Drive,

Drive and finally took studio let's

and, finally, to Studio.

choose publish locally this is where you

Let's choose Publish Locally.

can control how the add as output for

This is where you can control how the ad is output.

instance you can add polite load to the

For instance, you can add polite load

add which delays the add load until

to the ad, which delays the ad load until after the page

after the page content loads you can

also set it to minify the code and add

You can also set it to minify the code

browser prefixes automatically will

and add browser prefixes automatically.

leave all these settings as to the default click publish and web designer

We'll leave all these settings as to the default.

will wrap up all of your files in a nice

Click Publish, and Web Designer will wrap up all of your files

little zip for uploading to studio now

in a nice little zip for uploading to Studio.

let's test it out in studio let's make a

Now, let's test it out in Studio.

new creative of expanding type

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

Drag the zip file to upload our creative to Studio.

as you can see I can expand the unit

Now, let's preview our creative. As you can see, I can expand the unit, play the video,

play the video and trigger the background eggs that we added you can

and trigger the background exit we added.

see these events logging to the output

You can see these events logging to the output

console and that's an overview of studio

integration features in Google web

And that's an overview of Studio integration

features in Google Web Designer.

Similar videos:

Building Expanding Creatives
Google Web Designer
28.8K views 68 likes 2 dislikes 04 Aug 201497% match

Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201837% match

Component Tracking in DoubleClick Studio
Google Web Designer
5.6K views 13 likes 1 dislikes 04 Aug 201432% match

DoubleClick Studio Events
Google Web Designer
12.3K views 24 likes 5 dislikes 04 Aug 201430% match

Publish to Studio
Google Web Designer
7.7K views 17 likes 1 dislikes 04 Aug 201430% match

Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201828% match

Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201527% match

Code View - Google Web Designer
Google Web Designer
7.2K views 55 likes 4 dislikes 14 Oct 201927% match

Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201526% match

Teil 10: Mit Forms in Microsoft Teams arbeiten
microsoftbildung
3.6K views 9 likes 0 dislikes 29 Jun 202026% match

Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 201526% match

Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 201526% match

An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 201426% match

A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 201426% match

Google Web Designer for AdWords (Demo)
Google Ads
17K views 83 likes 3 dislikes 21 Sep 201526% match

Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201825% match

Getting started with Google Web Designer: how to create a simple banner ad
Google Web Designer
46.6K views 339 likes 14 dislikes 29 Jul 201925% match

Publish to Drive
Google Web Designer
16.4K views 39 likes 6 dislikes 04 Aug 201425% match

Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 201525% match

Google Web Designer Asset Library Integration
Google Web Designer
10.7K views 15 likes 2 dislikes 13 Apr 201524% match

Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201824% match

Text Fitting - Google Web Designer
Google Web Designer
8.2K views 33 likes 6 dislikes 28 Nov 201824% match

Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201624% match

Responsive Layout: Animation - Google Web Designer
Google Web Designer
27.6K views 82 likes 10 dislikes 03 May 201624% match

Responsive Layout: Advanced Techniques - Google Web Designer
Google Web Designer
54.7K views 200 likes 4 dislikes 03 May 201623% match

Authoring Dynamic Sample Data - Google Web Designer
Google Web Designer
14.6K views 62 likes 1 dislikes 28 Nov 201823% match

Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201522% match

Advanced Preview Configuration - Google Web Designer
Google Web Designer
14.3K views 68 likes 3 dislikes 28 Nov 201822% match

Responsive Campaign Tutorial - Google Web Designer
Google Web Designer
3.1K views 84 likes 0 dislikes 15 Oct 202022% match

Transition Gallery - Google Web Designer
Google Web Designer
18.4K views 116 likes 3 dislikes 07 Oct 201922% match

Settings Privacy About Contact Donate