Authoring Dynamic Sample Data – Google Web Designer

Authoring Dynamic Sample Data – Google Web Designer

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

6 thoughts on “Authoring Dynamic Sample Data – Google Web Designer

  1. The list of Data schema is empty while using "Standard schema", because of it I am unable to create a dynamic data binding. It also displays the data schema dropdown twice in dynamic properties.
    Am I missing something?

  2. How do you then set up the ad variations to be served Conditionally to the users? `What params are available? Might it be possible to serve custom ads to unique individual [anonymised] users if we have that dataset (i.e. from Adwords) OR say [to keep things simple] a list of IP addresses?

  3. I have a JSON file. It is possible to import.
    But is it possible to load this data? Without studio? How?

Leave a Reply

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