Build custom formats for Ad Canvas with Google Web Designer

Ad Canvas supports custom formats built with Google Web Designer using dynamic bindings.

To create a custom format, you first need to decide which elements of the ad should be editable in Ad Canvas, then bind these elements to the Brand Awareness schema. In 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 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.

Custom formats can either be a single size, or they can be responsive. Learn how to build responsive creatives in Google Web Designer.

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.

Get started

First 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). Data-driven creative templates can save you time, because the dynamic bindings are already set up.

If you built from scratch, follow the steps below to set up the 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.

It may also be helpful to look over the brand awareness schema and decide which of the elements of your creative should map to which data schema object. Make a list of each dynamic element, then next to it, write down the data schema object it should bind to.

Choose a data schema

  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

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

 

Brand awareness schema

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

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

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 Add dynamic bindings .
  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).

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

Upload your custom format to Display & Video 360

You can upload custom formats to Display & Video 360 the same way you upload an HTML5 creative.

Publish from Google Web Designer

When you build a creative in Google Web Designer, you can publish it directly to your Display & Video 360 advertiser.

Click the down arrow on the Publish  button at the top of the window and select Display & Video 360.

If you're publishing to Display & Video 360 for the first time, you'll be prompted to sign in to your Google account, and allow Google Web Designer to view and manage your reports in Display & Video 360.

In the publish dialog:

  1. Enter the partner name for the creative you're uploading. If you only have "Read & Write" access to a single partner, that partner is automatically selected.
  2. Enter the name of the advertiser.
  3. Enter a creative name.
  4. Select or deselect publishing options:
    • Inline local files - Places the JavaScript and CSS within the HTML file, rather than in external files.
    • Polite Loading - Delays the loading of assets until the hosting page finishes its initial load.
    • Groups Unpacking - Unpacks groups so the creative can load faster, but results in a larger file size.
    • Add Border - Adds a one-pixel border, using the color you specify.
  5. Select which CSS prefixes you want to include in the file. By default, all are selected to provide the widest range of browser compatibility.
  6. Click Publish.

After publishing, your Google Web Designer document becomes associated with the creative in your Display & Video 360 account.

Each time you publish, you'll update the creative draft with your changes. If the creative has already been published, the published creative won't be affected. When the creative is ready for serving, open Display & Video 360 and publish it.

Keep in mind: After publish, Display & Video 360's creative review process starts, and it can take approximately 24 hours before a creative is approved for serving.

Upload in Display & Video 360

  1. Open the advertiser you want to upload creatives to.
  2. Click Creative and then Creatives in the left menu.
  3. Click New and then Upload and then HTML5 or image.
  4. Upload your creative as a .zip file.
  5. Select the dimensions you want the creative to serve in. If the creative is responsive, make sure to select only the dimensions the creative can support, otherwise the creative may not properly fit the placement.
  6. Save. Your custom format is opened in the Ad Canvas.

Replace a format in an existing creative

  1. Open an existing data-driven creative or create a new one.
  2. From the action toolbar, click Replace format.
  3. Choose the zip file of the Google Web Designer creative you published locally.
  4. Save.

You can replace the format for any data-driven creative, including both custom formats and Display & Video 360 formats, such as Panorama, Cue Cards, or Blank Slate.

Limitations

  • After a creative has been published, the creative's dimensions cannot be changed. Make a new creative to use a format with different dimensions.
  • After a creative has been published, exits cannot be changed. All future custom formats you want to use with that creative must have the same number of exit data schema elements with the same names.

What happens to previously saved changes when a format is replaced

When you replace a format in an existing creative, all the variants and dynamic rules you created will be preserved. After you publish the creative, only the assets used in your current format will be saved. To avoid increasing your published file size, any unused assets, text, or style values will be removed from your creative.

  • If your new format uses the same schema elements as the original format (for example a background image) the assets will now be applied to the new format.
  • If your new format has new assets (defined by its data schema binding) you will need to upload images or add text to all of your variants.
  • If your new format does not use some of the assets that were in the previous format, these elements will no longer appear in the asset panel. However, Google will keep this data in memory, so that if you update the format to add those assets back, all of your previous work will be preserved.

For example, imagine you added a logo to 10 variants of the Cue Cards format. Then you replaced Cue Cards with your own custom version with no logo, and no logo binding. You'd still see 10 variants (now using your new format), but without the logo, and the logo element would no longer show in the asset panel.

If you then make a second version that includes the logo, and replace the format again, you'd see 10 variants (now using the second custom format) and all would show the original logos you'd uploaded to the Cue Cards format. The logo element would also reappear in the asset panel.

Was this helpful?
How can we improve it?