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.
- Look over the schema and decide which 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. 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.
- 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.)
- Under the Data Schema tab of the Dynamic properties dialog, select the schema type Standard schema.
- Next, choose the Brand Awareness data schema. You'll be taken to the Bindings tab.
. (If the Dynamic panel isn't visible, open the Window menu and make sure there's a checkmark next to Dynamic.)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.
- (Optional) Filter the elements you see by choosing Current Page or Selection from the Show menu.
- In the element column, select an element you want to bind 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 HTML 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.
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.
- In the Dynamic panel's Bindings tab, click Add dynamic bindings
- On the Bindings tab of the Dynamic Properties dialog, click Add Binding.
- For the Element, select the Tap Area of your call to action.
- For the Element attribute, select Exit override URL.
- For the Data schema object, select the dynamic URL data (e.g., Product 0 > URL).
- 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.
- Switch to Code view and navigate to the code for the Tap Area (starting with
<gwd-taparea). - Add the
exit-idproperty into the<gwd-taparea>tag. - The
exit-idproperty should be set to one of two values,backgroundExitorctaExit.
- Switch to Code view and navigate to the code for the Tap Area (starting with
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.
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.