Build a custom layout using Google Web Designer

Display & Video 360's dynamic remarketing layouts are designed by Google to optimize creative performance. However, if you have specific brand guidelines or just want more control over the look and feel of your dynamic remarketing creatives, you can create your own layouts with Google Web Designer.

Requirements for custom layouts

  • Must be built in Google Web Designer
  • No expanding allowed, creatives must remain a fixed, supported size
  • Creative can display 1–8 products, with a maximum of 8
  • Must include at least one exit URL
  • .zip files can be no larger than 300 MB
  • Video or other advanced features are not allowed

Before you get started

Step 1: Create a layout in Google Web Designer

To create a custom dynamic layout in Google Web Designer, you have two options: start from a template, or create a layout from scratch. Learn more about each option below.

Create a custom layout from a template

To save time, you can start from a template that includes common creative elements already mapped to feed attributes. These templates are included with Google Web Designer, and are fully customizable. Use the templates as a starting point. Then add or remove elements and edit data bindings to create your own dynamic layout for Display & Video 360.

  1. Open Google Web Designer and select File > New from template.
  2. To show only Google Marketing Platform dynamic remarketing templates, apply the Platforms filter: Display & Video 360 - Other and apply the Dynamic Vertical filter: Dynamic Remarketing. How to filter templates
  3. To see available layouts, click Dynamic remarketing for Display & Video 360
  4. Find the layout that best fits your needs. On the bottom of that layout's card, click Use layout.
  5. Select the creative dimensions you want to use, give your new layout a name, then click Create.
  6. Edit the size and style of existing container elements as desired.
  7. (Optional) Add new creative elements, and bind new dynamic elements that should change based on the data in your feed. See the data bindings below to understand how the bindable attributes in Google Web Designer's Dynamic panel correspond to the values in your feed.
  8. Save and preview your layout. To see a preview with real products from your feed, download a sample feed from Display & Video 360 and add it to the "feeds" folder in your Google Web Designer project.
  9. Click Publish > Publish locally. In the Publish locally settings, check the Minify and Create Zip boxes, then click Publish to create a .zip file for Display & Video 360.

Create a custom layout from scratch

If you want complete design control, start from scratch and design your own layout. As you design, make sure your layout meets the custom layout requirements.

  1. Open Google Web Designer, then click Create new file.
  2. Enter a name for the creative layout and choose where to save the file.
  3. For "Environment", select Display & Video 360.
  4. Select your new file's dimensions, or enter a custom size.
  5. Drag components to the stage to design your creative (for example, drag the Carousel Gallery component to the stage to include a product gallery.)
  6. To make your creative dynamic, connect the HTML elements in your creative to objects in your dynamic feed.
    1. Open the Dynamic panel. At the bottom, click Add dynamic bindings .
    2. Select the data schema type "Standard schema".
    3. Select the "Dynamic remarketing" schema.
    4. Add dynamic data bindings to each creative element that will change based on the data in your feed. See the data bindings below to understand how the bindable attributes in Google Web Designer's Dynamic panel correspond to the values in your feed.
    5. Click OK.
  7. Save and preview your layout. How to preview with sample feed data
  8. Click Publish > Publish locally. In the Publish locally settings, check the Minify and Create Zip boxes, then click Publish to create a zip for Display & Video 360.
If you plan to use custom exit functions in your creative, there a few extra steps needed to track product-level clicks. Learn more

Step 2: Upload your custom layout to Display & Video 360

To upload a custom layout, create a new dynamic creative, then replace the standard layout with your custom layout.

Upload a custom layout

  1. Open a Display & Video 360 advertiser, then click Creatives in the left menu.
  2. Click New and thenCreative from format gallery. You're taken to a list of all the available creative formats in Display & Video 360. 
  3. To filter the format list, click Display, then choose the Dynamic remarketing format for your vertical. For example, if you're using a feed from Google Merchant Center, find Dynamic remarketing for Retail, then click Create.
  4. If you have multiple feed attributes, select the one that contains the remarketing data for these creatives.
  5. Confirm that the GMC Account ID linked to your advertiser is correct.
  6. At the top of the page, click Replace format. Select the .zip file of the custom layout you built with Google Web Designer.
  7. (Optional) If you added data bindings for standard Display & Video 360 layout attributes (for example, logo, CTA button text, promotion text, or colors), you can change these creative elements in Display & Video 360. If you didn't assign data bindings for these attributes in Google Web Designer, these options will have no effect on the creative, and you can skip this step.
    1. Upload a logo image.
    2. To customize the text in your ad, expand the Text panel. Here you can add promotion text, customize the call-to-action text, or add a disclaimer.
    3. To make sure any clicks on the ad outside of product images still go to your advertiser landing page, enter a background landing page URL.
    4. If don't want to include prices, turn off Show price.
    5. Expand the Style panel to edit layout colors.
    6. Font options in Display & Video 360 cannot be applied to text elements in Google Web Designer. The font family and font style buttons will have no effect on a custom layout. Instead, apply fonts and styles to text containers when you build your custom layout in Google Web Designer.
  8. Click Details, then enter a name for your creative.
  9. To save your creative as a draft, click Save all. This will save all edits in the Ad Canvas and immediately apply changes in the Details tab. You can keep the creative in draft if you're not ready to serve it, or while you're waiting for sign-off from the advertiser.
  10. When the creative is ready to serve, click Publish all.

Data bindings for remarketing feeds

Display & Video 360 supports several business types for dynamic remarketing (in beta only). Each business type has a unique feed schema and different available dynamic attributes. After you design your creative, you'll define data bindings to set which feed data to show in each creative element.

For example, your creative may have a text field to display the name of a product. After you add a text container in Google Web Designer, select the element ID you added, select "Text content" as the attribute to show the content in, then bind it to the object in the feed that contains the product name.

Data bindings for Dynamic Remarketing

How product indexes work

The schema for the Retail business type includes an array of available products. Each product includes a set of attributes based on the feed type. When the creative is served, only 1–8 products from the feed are shown.

The {index} in the data schema object values below represents the order of products in the feed, starting with zero. For example, the first product in the feed will include the attribute: Product.0.name, the second product will include Product.1.name, and so on.

 

Retail (Google Merchant Center feed)
Data schema object in Google Web Designer Merchant Center feed attribute Description
Product.{index}.name display_ads_title if present, else title Product name
Product.{index}.description description Product details
Product.{index}.brand brand Product brand name
Product.{index}.price price Lowest price
Product.{index}.regularPrice If the feed includes a sale_price, regular price will use the value from price when the creative shows the original price a product was marked down from. Regular price
Product.{index}.salePrice Derived from regular price (see above), sale_price, and sale_price_effective_date Sale price
Product.{index}.salePercentDiscount Derived from regular price and sale_price Price discount (as a decimal)
Product.{index}.installmentCount installment Number of monthly installment payments
Product.{index}.installmentPrice installment Monthly installment amount
Product.{index}.loyaltyPointCount loyalty_points Number of loyalty points a customer receives when purchasing your product
Product.{index}.loyaltyPointProgramName loyalty_points Name of loyalty points program
Product.{index}.loyaltyPointValueInCurrency loyalty_points The currency value of a loyalty point
Product.{index}.merchant Google Merchant Center account name Google Merchant Center account name
Product.{index}.imageUrl image_link Image URL
Product.{index}.url display_ads_link if present, else adwords_redirect if present, else link Item landing page URL
Display & Video 360 standard layout attributes

In addition to the feed attributes above, there are some bindable attributes available in Display & Video 360's standard layouts. You can bind these creative attributes to your custom layout, then update their values directly in Display & Video 360 using the standard layout options, shown below.

Standard Bid Manager layout dynamic options

Standard layout options you can modify in Display & Video 360
 

Data schema object in Google Web Designer Advanced Options in Display & Video 360
backgroundLandingPageUrl Background landing page URL
This is the landing page the user should visit if they click any area of the ad surrounding a product image.
callToAction CTA button text
disclaimer Disclaimer
promoText Promotion text
logo Logo image
primaryColor Primary color
secondaryColor Secondary color
showPrice Whether to show the price or not

Font options

Font face and style options selected in Display & Video 360 cannot be applied to Google Web Designer text elements in custom layouts.

Preview with a sample feed from Display & Video 360

When you preview your custom layout in Google Web Designer, 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 to the "feeds" folder in your project.

The sample feed is a .json file that contains feed information such as design and product specific text and images. By placing the sample feed into the "feeds" folder of your Google Web Designer project, you can use samples from your real feed while previewing in Display & Video 360.

Download a sample feed from Display & Video 360

Display & Video 360 provides a sample feed with randomly selected products to make it easier to test your custom layout. To download this sample feed:

  1. Open your Display & Video 360 advertiser, then click Creatives.
  2. Click New and thenCreative from format gallery. You're taken to a list of all the available creative formats in Display & Video 360.
  3. To filter the format list, click Display, then choose the Dynamic remarketing format for your vertical. For example, if you're using a feed from Google Merchant Center, find Dynamic remarketing for Retail, then click Create.
  4. In the Products panel on the right, select the attribute you want to use for preview if there's more than one feed attribute linked to your account.
  5. Click Download sample feed. This will download a sample feed as a .json file (named "payload.json".)

Preview with a sample feed in Google Web Designer

  1. Open your Google Web Designer project.
  2. 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.)

Was this article helpful?
How can we improve it?