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
  • Use supported dimensions only (160x600, 300x250, 300x600, 320x50, 728x90)
  • 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, adding and removing elements and editing data bindings to create your own custom 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 filters Display & Video 360 and Dynamic.
  3. Select the correct creative dimensions, then click Use.
  4. Edit the size and style of container elements as desired.
  5. (Optional) Add new creative elements as desired, 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.
  6. 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.
  7. 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.

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. In "Environment", select Display & Video 360.
  4. Select your new file's dimensions. Dynamic layout dimensions supported by Display & Video 360 include: 160x600, 300x250, 300x600, 320x50, 728x90.
  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. Open the Dynamic panel and click Add. Select the data schema: "Standard schema".
    When you want to create a normal dynamic creative using a dynamic profile from Studio, select "Custom Schema" instead.
    1. 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.
    2. Click OK.
  7. 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.
  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 creative, then click the appropriate feed type from the Dynamic section of the new creative window. For example, if you're using a feed from Google Merchant Center, click Google Merchant Center.
  3. In the Basic Details step, enter the following details for your new creatives:
    1. Enter a name (maximum characters: 247). A size suffix will be added to this name for each supported creative size. For example, if your creative name is "Bearhands", the resulting creatives will be named "Bearhands_160x600, Bearhands_300x250, Bearhands_728x90, Bearhands_160x600, Bearhands_320x50".
    2. (Optional) If you have multiple feed attributes, select a "Feed attribute" that contains the remarketing data for these creatives.
  4. Confirm that the GMC Account ID linked to your advertiser is correct.
  5. Click Next to go to the Layouts step.
  6. Below the preview, click Upload custom…, then select the .zip of the creative 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. Click Choose File to upload a logo image.
    2. Click Advanced Options to further customize your creative in Display & Video 360. Options you can customize (if data bindings are set up in your custom layout):
      • CTA button text
      • Disclaimer
      • Promotion text
      • Primary color
      • Secondary color
      • Show price
    3. 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 Next to go to the Review step, where you can preview your layout, add optional tracking tags, and test that the creative clicks through to the right landing page.
  9. Click Save creatives. After saving is complete, you can click the eye icon  to preview or click the pencil to make changes.

Data bindings for remarketing feeds

Display & Video 360 currently only supports the Retail business type for dynamic remarketing. Each business type has a unique feed schema and different available dynamic attributes based on a Merchant Center feed. 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 attribute in the feed that contains the product name.

Data bindings for Dynamic Remarketing

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.

Use a sample feed from Display & Video 360 to see a dynamic preview

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 document 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 and preview in Google Web Designer

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 creative and select any type from the Dynamic section of the new creative window.
  3. In "Basic Details", enter the following details for your new creatives:
    1. Enter a name. It doesn't matter what name you enter, because you don't need to save this creative.
    2. If you have multiple feed attributes, select a "Feed attribute" that contains the remarketing data you want to use for your custom dynamic creatives.
    3. Confirm that the feed ID linked to your advertiser is correct.
    4. Click Next.
  4. Click Advanced Options, then click Download sample... This will download a sample feed in JSON (.json) format.
  5. Move the JSON file you downloaded into the "feeds" folder of your Google Web Designer project.
  6. Open your Google Web Designer project.
  7. To use the sample feed when you preview, select the feed name from the pop-up list at the bottom of the browser preview page. (The pop-up list defaults to "No Feed" until you select one.)
Was this article helpful?
How can we improve it?