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