Build dynamic creatives with Google Web Designer
Dynamic creatives enable advertisers to show the most relevant ad content to each viewer. To create a Dynamic ad, you first need to decide which elements of the ad that should change based on who's viewing the ad, for example, text, images, and urls. These elements can be changed either manually or programmatically based on the targeting rules you define.
Google Web Designer supports fully integrated data bindings for Studio Dynamic elements. You don't need to copy and paste Studio-generated Dynamic code to connect your Studio profile to your creative. Instead, use your Studio profile as a Data Schema.
When you create dynamic creatives with Google Web Designer, you create data bindings between element attributes and specific types of data using the Dynamic Properties panel. The Dynamic Properties panel is an interactive dialog that lets you choose your element, the element attribute you want to be dynamically modified, and the data schema object that you want the element to bind to.
Connect a Studio dynamic profile to a Google Web Designer creative
- Open a creative in Google Web Designer. When you make a creative for Studio, make sure to select "Display & Video 360" as the environment.
- In the Events panel, click the Dynamic tab.
- Click Add to add dynamic bindings. The Dynamic Properties dialog opens.
- Select Custom schema as the data schema type.
- Sign in to the account you use with Studio.
- Enter the account name that contains the profile you want to use.
- Enter the name of the advertiser. You can choose an existing advertiser, or you can create a new one.
- Select the Studio profile you want to use. This will connect the data in your Studio profile to Google Web Designer so you can bind data to elements in your creative.
Create data bindings
Before binding any elements, it's helpful to give a unique ID to each element you want to use. You can do this in the Properties panel for each element.
To bind data to an element in your ad:
- Click the Bindings tab of the Dynamic properties dialog.
- Optional - Filter the elements you see by choosing "Current Page" or "Selection" from the "Show" drop-down.
- Click the Add Binding button at the top of the dialog.
- In the element column, select an element you want to bind the feed data to.
- In the element attribute column, select the element attribute you want to bind the feed data to. All of the bindable element attributes for the selected element will appear in a drop-down list, including both style attributes and attributes specific to the element type.
- In the data schema object column, select a data object.
- Click Add Binding to bind data to another element in your ad, or click "OK" when you're finished.
To edit a binding for an element in your ad:
- In the Dynamic panel, double-click on a binding in the list. The Dynamic Properties panel will open with the binding selected.
- Modify the settings for an element, element attribute, or Data Schema Object.
- Click OK.
Creating a dynamic call to action with the Tap Area component
The Tap Area component lets you initiate almost any action with a touch or click. One common use is to create a call to action. Typically, this will be a static link to a website, but dynamic links are also possible when you're creating a dynamic ad.
The Tap Area component has a dynamic element attribute, Exit override URL, that's accessible through the data binding section of the Dynamic Properties panel. This lets you use a data schema that includes individual product URLs, and bind these URLs to the matching Tap Area in the creative.
Using a feed to create a dynamic preview
When you preview the ad, you'll initially see it as you designed it, showing only placeholder elements. To see how it will work as a dynamic ad, you need to add a sample feed (or multiple feeds) to the "feeds" folder in your project.
A sample feed is a JSON document that contains feed information such as design and product specific text and images. By placing the sample feed (or multiple sample feeds) into the "feeds" folder of your project, you can use any of those feeds during preview by selecting the feed name from the pop-up list at the bottom of the preview page.