Advanced Preview Configuration
You can preview your HTML5 ad or HTML page in a browser to see how it will look and behave once it's published, including any events.
Video ads and image ads
- The preview options described on this page are unavailable for video ads.
- Image ads can only use the shareable preview link.
To preview your work, use one of the following methods:
- Click the Preview button in the top right corner of the window.
- Select File > Preview from the top menu.
- Press Ctrl+Enter (Windows) or ⌘+Enter (Mac).
Preview options
Preview in your browserThe 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.
|
Responsive |
The preview lets you see at a glance how your responsive document renders at different sizes.
|
Dynamic |
You can preview your dynamic ad with different sets of sample data.
|
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 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 beneath a single version.
Select Get shareable link from the Preview button menu to generate a QR code and preview URL. You'll need to be signed in to your Google Account.
- Scan the QR code with your mobile device to go to a web page that displays your ad.
- Click Copy link to share the URL of the page with others so that they can preview your ad from their browser.
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.
If you encounter an error, you may need to sign out of your account in Google Web Designer (select your login email from the top menu), then sign in and check Preview display based creative ads for mobile in the list of options.
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. For multi-size image ads, you can select multiple sizes.
Dynamic ads: Dynamic HTML5 ads will show only placeholder elements. At this time there's no way to share a preview of an HTML5 ad with sample data or feed data. For image ads with variants, you can select multiple variants to include in the preview.
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.