Build dynamic creatives with Google Web Designer

Dynamic creatives help you show the most relevant ad content to each potential customer. 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

1. Open a creative in Google Web Designer. When you make a creative for Studio, make sure to select "Display & Video 360" as the environment.
2. In the Events panel, click the Dynamic tab.
3. At the bottom of the panel, click Add dynamic bindings . The Dynamic Properties dialog opens.
4. Select Custom schema as the data schema type.
5. Sign in to the account you use with Studio.
6. Enter the account name that contains the profile you want to use.
7. Enter the name of the advertiser you want to upload your creatives to.
8. 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.

Add a data binding

Before binding an element, it's helpful to give it unique ID in the Properties panel.

1. Create a new binding using one of the following methods:
   • In the Dynamic panel:
     • On the Bindings tab, click the Add dynamic bindings button at the bottom of the panel.
   • On the stage:
     • Right-click the element that you want to bind and select Dynamic bindings... from the pop-up menu.
2. If you haven't yet selected a data schema, you'll be asked to do so.
   If you see the error "Profile information could not be fetched" when you set up your data schema, check the feeds in your Studio profile for errors. Google Web Designer will be unable to add data bindings if the first row of the feed has errors.
3. Select the Element for the data binding. You can browse your document structure to find the element you want, or start typing to filter the list of elements.
   • If you don't see the element you want, change the Show dropdown at the top of the dialog.
4. Select the Element attribute. The available attributes depend on the element type (see the list of bindable attributes).
5. Select the Data schema object. The available objects depend on the data schema.
   • For some data schemas, Google Web Designer lets you pick from presets for common values.
6. Optionally, apply a filter to reformat the data.
7. Repeat the steps above to add another binding, or click OK when you're done.

Edit a data binding

1. Double-click a binding in the Bindings tab of the Dynamic panel to edit it. The Dynamic Properties dialog opens to the binding you selected.
2. Click the field you want to change.

Create 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.

1. In the Dynamic panel's Bindings tab, click the Add dynamic bindings button.
2. On the Bindings tab of the Dynamic Properties dialog, click Add Binding.
3. For the Element, select the Tap Area.
4. For the Element attribute, select Exit override URL.
5. For the Data schema object, select the dynamic URL data (e.g., Product 0 > URL).

Dynamic Exits in Studio - Google Web Designer

Use a feed to create a dynamic preview

When you preview your dynamic format in Google Web Designer, you'll initially see it as you designed it, showing only placeholder images, text, and other elements. To see how it looks with the actual content your dynamic feed will provide, you need to add a sample feed (or multiple feeds) to the "feeds" folder in your Web Designer project.

A sample feed is a JSON document that contains feed information such as design and product specific text and images. First, download this Sample feed.

1. To import the sample feed:
   • Open the Dynamic panel and click the Sample Data tab. At the bottom of the panel, click Import sample data .

   • Or, move the .json file you downloaded into the "feeds" subfolder of your Google Web Designer project and click Refresh in the Dynamic panel so the new sample data shows up in Web Designer.

To preview sample feed data on the stage, select the feed name you added from the Sample Data tab in the Dynamic panel.

When you preview in your browser, you can select the sample feed you want to preview from the Sample data menu at the top of the page. (By default, separate previews with all available sample feeds are shown. To hide the feeds you don't want to preview, turn them off in the Sample data menu.)