LUCAS: My name is Lucas
and I'm an engineer on Google Web Designer
In this video I'll show how to create dynamic ads
Dynamic ads include content
that is pulled from a data feed when the ad is served
This allows the ad to be customized to the person viewing it
I'm starting with a simple ad that contains two images and a headline
and I'll use the feed to set
the source for each image
the headline text and the headline color
I start by
going to the Dynamic panel
and in the Bindings tab I press this plus button
I first have to tell Google Web Designer
what fields are in the feed
This is also
called the feeds schema
The set of schema that are available
depends upon
the ad environment
This ad is for Display & Video 360
which includes both
predefined standard schemas and custom schemas
that you can create using Studio
For now I'll use a standard schema
I'm now ready to add bindings
For each binding I specify an element
a property on that element
and a field in the feed that is providing a value for that property
I'll start with the text
I choose the text element
I select its content
and then I see a list of all the fields in the feed
and I pick this one
I'll add another binding also to the
text element
but this time I will set its color
and then I'm ready to move on
to the images
The feed contains a list of products
and for each product there's
information like a description
and image URL and a price
I want the image URL so
I select this field
and then I specify the index of the entry I want to use
I want the first entry so I leave the index at 0
It may seem surprising that
the index of the first entry is 0
instead of 1 but that's just the
convention for this kind of data
Finally I add a binding for the source
of the second image
once again I select the image URL
but this time I increase
the index by a 1
to use the next entry in the list
Now I see all my bindings in
the Bindings panel
but it's still not clear that it's
worked correctly
because on stage I just see the default document content
to get
a better preview experience
I switch to the Sample Data tab
For every schema we
provide a set of default sample data
that can be used for preview
if I select
that data I see it rendered on stage
This data is only for preview it is not
saved with the ad when it's published
and in a separate video we show you how
to build the real feeds
that you use when your ad is served
This default
is only a starting point
you probably want to customize the sample data for the ad you're building
and one way to do that is through this editor
Here for example I will set different headline text
In this editor you can also
add entries to lists
in this case a new product
and you can delete or copy
existing entries
if I save my changes I see them on stage
I can also edit sample
data directly on stage
for example here I'll use the text tool to change the headline
and I can also swap in different image assets
If I switch back
to the default document
I see that it is unchanged
You can use multiple data sets
when previewing your ad
If you have a data set already somewhere in a file
you can import that file into Google Web Designer
You can also create a new empty
data set and build it up from scratch
and finally you can copy and paste
existing data sets which I'll do now
First I'll rename it and then I'll
select duplicate from the context menu
and then I'll swap in a different image
I'll do the same thing at this time I
will change the color of the text
and I'll also change the content
You'll notice that when I commit the change
the text is fit to its container
that's because by default all bound text has text fitting applied to it
If you don't want this behavior you can turn it off in the text panel
So I now
have an ad that has four bindings
and three sample data sets and if I preview the ad in a browser
I can see all the variations in one
place
If you're building more than one
ad that uses the same kind of data
you may want to share sample data between these ads
which you can do through our
sample data library
To add data to the library
in the right-click menu choose
add to library
I'll now open up another ad
that has a different structure but
uses the same kind of data
So here is an ad that contains a simple animation
In this sample data tab I'll use this button
to open up the Library
I see that sample data set that I had just imported
and I can now add it to this document
and use it here for preview
I want to finish up by talking about a more
advanced use case
where we apply a transformation to the feed data before it's used
here I have a swipe gallery
and I wanted to show an image for each
product in the feed
As usual I start by selecting a schema
and then I choose the
swipe gallery and its images property
and now I want to get the image URL for
each product
I start by selecting the Product list itself
and then I go to the
Filters tab in this editor
this provides a set of simple transformations that you
can apply to the feed data
here I pick one called pluck and join
which selects
a field from each entry in the list
and joins them together using commas
if I now look at the swipe gallery in the
property inspector while I'm previewing
sample data
I can see that it has a list of all of these images
and if I
preview it in a browser
I see that it works like we expect
You can apply more
than one filter to a binding
for this binding for example
let's say that I
want to show at most three images
I change that first filter so it truncates
the list
if it has more than three entries
and then I add a new filter that
once again applies pluck and join
to this shortened list
and if I preview it
in the browser
again it works as expected
That concludes this tour of
authoring dynamic data in Google Web Designer
Thank you for watching
