Preview your ad or HTML page

Advanced Preview Configuration

You can preview your ad or HTML page to see how it will look and behave once it's published, including any events.

To preview your work, click the Preview button in the top right corner of the window.

You cannot preview a document in your browser by directly opening the HTML file included in your source files. Use Google Web Designer's preview functionality instead.

Preview options

Preview in your browser

The quickest way to preview your work is to view it in a browser on your own computer. The first time, you'll need to choose the browser you want to use. After you've made a selection, clicking the Preview button will use that browser by default.

Browser selection

Google Web Designer detects which browsers you have installed. To preview in a particular browser, click the down arrow on the Preview button and select the browser from the list. The browser you select becomes the default for future previews.

Responsive sizes selection

For responsive documents, you can select the sizes that you want to preview by enabling preview sizes in the Responsive panel.

Preview mode

Google Web Designer has different preview modes, depending on the document type. You can select the preview mode from the controls at the top of the preview page.

The table below describes the preview modes available for your document. Simple banner ads don't offer preview modes.

If your document contains the Parallax component, the preview emulates a mobile web page with enough content for you to scroll above and below the component.

  • Device - Select a mobile device or Custom.
  • Rotate device - Switch between portrait and landscape.
  • Viewport size - If you select Custom for the device, you can set a new size by editing this field or dragging the preview's resize handles.

Parallax ads always use the Parallax preview mode.

Document type Preview modes

Expandable, interstitial, or HTML page

You can interact with the preview of your document to see how it behaves.

  • Preview mode - Select Desktop or Mobile.
  • If you select Mobile, you can choose from additional options:
    • Device - Select a mobile device or Custom.
    • Rotate device - Switch between portrait and landscape.
    • Viewport size - If you select Custom for the device, you can set a new size by editing this field or dragging the preview's resize handles.

Responsive

The preview lets you see at a glance how your responsive document renders at different sizes.

  • Preview mode - Select Single size, or All sizes to see multiple sizes at the same time. The list of sizes includes common sizes for your ad environment as well as any additional serving sizes that you enabled.
  • Custom size - If you select Single size > Custom, you can set a new size by editing this field, by dragging the preview's resize handles, or by clicking the gray bars along the top or left side of the preview area.

Dynamic

You can preview your dynamic ad with different sets of sample data.

  • Preview mode - Select Single size, or All sample data to see multiple versions using different sample data.
  • Sample data - Select which sample data sets to preview.

More than one type?

Some document types exclude options for other types.

  • Expandable and interstitial ads only display one version at a time in the preview, even if they're also responsive or dynamic.
  • Documents that are both responsive and dynamic (that aren't expandable or interstitial ads) let you preview either multiple sizes or multiple feeds at the same time, not both.

Reload previews

To reset the preview of an ad or HTML page to its initial state, click the Reload Refresh icon button at the right side of the preview control bar.

If you're previewing multiple versions of a responsive or dynamic ad, you can click Reload Refresh icon beneath a single version.

Share a preview link

Select Get shareable link from the Preview button menu to generate a URL to share with others, who can preview your ad from their browser. You'll need to be signed in to your Google Account.

The first time you generate a shareable link, you'll be asked to grant Google Web Designer permission to preview display-based creative ads for mobile.

Note: This preview option is only available for ads with an ad environment of Display & Video 360, Google Ads, or AdMob. AMPHTML ads and expandable ads that expand to a custom size are not supported.

Limitations for some ad types

Responsive ads: If your ad is responsive, you must select a specific size for the preview.

Dynamic ads: Dynamic ads will show only placeholder elements. At this time there's no way to share a preview of the ad with sample data or feed data.

Preview on a mobile device

You can view your ad on a phone or tablet that has the Creative Preview app installed. Open the app on your device and go to the Creatives screen before sending the preview.

Note: This preview option is only available for ads with an ad environment of Display & Video 360, Google Ads, or AdMob. AMPHTML ads and expandable ads that expand to a custom size are not supported.

Mobile device selection

In Google Web Designer, sign in with the same account that you paired with the app, and you'll see a list of linked devices under Send preview to device in the Preview button menu. Select the device you want to send the creative to. If you don't see your device, select Refresh list Refresh icon and make sure that you've paired your device in the Creative Preview app.

The first time you send a preview to a device, you'll be asked to grant Google Web Designer permission to preview display-based creative ads for mobile.

Once the preview is successfully sent, you'll see the ad in the list of creatives in the Creative Preview app on your device. Tap the creative to preview it.

By default, the Creative Preview app opens creatives using an in-app experience. To preview ads intended for mobile web viewing, click the Information icon for the creative and select the View icon next to Mobile web (launch browser).

Learn more about the Creative Preview app.

Limitations for some ad types

Responsive ads: If your ad is responsive, you must select a specific size for the preview.

Dynamic ads: Dynamic ads will show only placeholder elements. At this time there's no way to preview the ad in the Creative Preview app with sample data or feed data.

Previewing changes

Any previews already generated won't reflect subsequent changes to your document or sample data, even if you reload the preview or refresh the page. Launch a new preview to see your edits.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue