Build custom formats for Ad Canvas with Google Web Designer

When you're building data-driven creatives, you can use the built-in creative formats, or you can build your own custom format to use with Ad Canvas. When you want precise creative control or have strict brand guidelines you need to follow, a custom format is your best option. Custom formats can be built with Google Web Designer using dynamic bindings. To save time, you can also start from a built-in format and customize it however you like.

Custom formats can either be a single size, or they can be responsive.

After you build a custom format, you can upload it and use it to make a new data-driven creative using your new format, or you can open an existing data-driven creative and replace the built-in format with your custom format. Finally, you'll fill in assets and other creative details to complete your new creative.

Limitations

• Custom formats for data-driven creative will only support dynamic URLs. For your custom format to be compatible with Ad Canvas, you must bind each of your exit URLs to a URL data object using the Tap Area component.
• Custom formats can only be rich media creative types supported by Display & Video 360 (Note: No interstitials, expanding creatives, or other unsupported formats).
• Google Web Designer's Pluckandjoin feature is not yet supported in Ad Canvas. If you build a custom format using Pluckandjoin, or Pluck and Join URL for data bindings in carousels or swipe galleries, your layout won't be usable in Ad Canvas.
• Video files aren't supported in custom formats.

Step 1: Match dynamic creative elements to a data schema

To create a custom format, you first need to decide which elements of the creative should be dynamic and editable in Ad Canvas, then bind these elements to the Brand Awareness schema. If there are any elements in your creative that should never be edited, don't add a binding for that element.

1. Look over the schema and decide which elements of your creative should map to which data schema object.
2. Make a list of each dynamic element, then next to it, write down the data schema object it should bind to. Make sure to select data schema objects that are the same field type as each element. For example, if you're making an image dynamic, make sure to bind it to an image asset (accent image, logo, or background image).

When you use the format to make a new creative, only the dynamic elements you map will be editable in the assets panel in Ad Canvas. For example, if you only want the creative's headline to be editable in Ad Canvas, you only need to bind the headline text field in Google Web Designer with the "headline" object in the Brand Awareness schema. When you make a creative from this example format, you'll only see a Headline field in the Text panel. All other creative elements will not be editable.

Brand awareness schema

Ad Canvas Label	Field Type	Data Schema Object	Number
IMAGE ASSETS
Accent image	IMAGE *	accentImage	Array of 1–10
Logo	IMAGE *	logo	1
Background image	IMAGE *	backgroundImage	1
TEXT ASSETS
Title	TEXT	title	1
Subtitle	TEXT	subtitle	1
Headline	RICH_TEXT *	headline	1
Description	RICH_TEXT *	description	Array of 1–10
Additional text	RICH_TEXT *	additionalText	Array of 1–10
Tagline	RICH_TEXT *	tagline	1
Teaser text	RICH_TEXT *	teaserText	1
Call to action	<container>	callToAction	Array of 1–10
	COLOR	callToAction.0.buttonColor	1
Content	RICH_TEXT *	callToAction.0.content	1
URL landing page	URL	callToAction.0.exitUrl	1
STYLE
Background color	COLOR	backgroundColor	1
Primary color	COLOR	primaryStyle.color	1
Secondary color	COLOR	secondaryStyle.color	1
OTHER
Background URL landing page	URL	backgroundLandingPageUrl	1

* These fields include sub-fields. See sub-field types for more information.

Sub-field types

Some field types include additional sub-properties you can bind to HTML elements in your creative. For example, to bind an image element in your creative to the background image in the brand awareness schema, add a dynamic binding like this: imageElementID > Source > backgroundImage.Url.

Sub-field type	Data Schema Object
IMAGE
URL	.Url
RICH_TEXT
TEXT	.text
COLOR	.style.color

Calls to action

The callToAction object is an array that can contain up to 10 unique calls to action, each with it's own URL, text, and color.

Step 2: Build your creative

When your map is complete, build your creative in Google Web Designer. You can build from scratch, or start from a data-driven creative template (Blank Slate, Cue Cards, or Panorama). Starting from an existing data-driven creative template can save you time, because the dynamic bindings are already set up.

How to build responsive creatives with Google Web Designer

Build responsive ads in Google Web Designer

Open the full playlist on YouTube

Choose a data schema

After your creative layout is complete, link the dynamic creative elements to the data schema using the map you created above. If you started from an existing data-driven layout, you can skip this step.

1. Open the Dynamic panel, then click Add dynamic binding . (If the Dynamic panel isn't visible, open the Window menu and make sure there's a checkmark next to Dynamic.)
2. Under the Data Schema tab of the Dynamic properties dialog, select the schema type Standard schema.
3. Next, choose the Brand Awareness data schema. You'll be taken to the Bindings tab.

After you've chosen a data schema, you'll be taken to the Bindings tab, where the first binding is waiting to be set up.

Create data bindings

If you started from scratch or added new dynamic elements to your creative, 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 a creative element, the element attribute you want to be dynamically modified, and the data schema object that you want the element to bind to.

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

1. (Optional) Filter the elements you see by choosing Current Page or Selection from the Show menu.
2. In the element column, select an element you want to bind feed data to.
3. 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 HTML element type.
4. In the data schema object column, select a data object.
5. Click Add Binding to bind data to another element in your ad, or click OK when you're finished.

Learn how to add and remove data bindings in Google Web Designer

Create a dynamic call to action

Google Web Designer's 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 in a data-driven creative, you can use a dynamic binding to set a different link for each audience segment.

1. In the Dynamic panel's Bindings tab, click Add dynamic bindings .
2. On the Bindings tab of the Dynamic Properties dialog, click Add Binding.
3. For the Element, select the Tap Area of your call to action.
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).
6. To properly record dynamic exits, add metric IDs for the background exit or call-to-action exit. These metric IDs will be the name of the event that appears in campaign reports and in the creative details in Display & Video 360. Make sure to use names that will make it clear what someone clicked to trigger the event.
   1. Switch to Code view and navigate to the code for the Tap Area (starting with <gwd-taparea).
   2. Add the exit-id property into the <gwd-taparea> tag.
   3. The exit-id property should be set to one of two values, backgroundExit or ctaExit.

Example

<gwd-taparea id="cta-taparea" exit-id="ctaExit" class="gwd-taparea-ismw" bind-exit-override-url="callToAction.0.exitUrl" bind-style-background-color="callToAction.0.buttonColor" bind-show="callToAction.0.content.text"></gwd-taparea>

Optional: 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.

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

Next steps

Now that you've finished building and testing your custom format, you're ready to upload it to Display & Video 360.