Search
Clear search
Close search
Google apps
Main menu
true

Learn the Studio Web UI

Preview a creative

Step 4: Preview

In the Preview step of the Creatives tab, you can review how your final creative will look, adjust display settings, and test events.

Previewing dynamic creatives is different than previewing standard creatives, because in addition to previewing the creative template, you also need to preview the creative variations provided by feed data or profile fields. Use the Preview step in the Dynamic Content tab for dynamic creatives. Learn how to preview dynamic creatives

See how your final creative will look

When you first preview a creative, it will display automatically on a blank screen in Desktop mode. Use the drop-down menus at the top to change how the preview is displayed.

If you see errors while previewing your creative, try the creative troubleshooting guides to help fix the issue.

Desktop preview mode

Use the desktop preview mode to test creative events and preview how the creative will look in a desktop browser.

While in desktop preview mode, you can customize how the preview is displayed using the Website menu:

  • To view the creative on a blank page, select Blank.
  • To view the creative on a sample website and adjust desktop positioning, select Sample website.
  • To view the creative on any website, select Custom URL. This URL can be any website, but the creative preview can only be shown if that website has an ad placement that's the same size as the creative you're previewing.
When previewing on a custom URL, scrolling may not work correctly. Instead, use your keyboard's Page Up and Page Down keys (Windows) or fn + Up arrow and fn + Down arrow (Mac).

Mobile preview mode

Use the mobile preview mode to test creative events and preview how the creative will look on a mobile device. This preview mode will show your creative framed by a device.

To change the context (either within a mobile app, or in a mobile browser), use the Context menu:

  • To view the creative in a mobile app, select In-app.
  • To view the creative in a mobile browser, select Mobile web.

To change the device, use the Device menu:

Select a device by name (for example, iPad or Nexus 7) to show your creative on that device. To rotate the device into landscape or portrait mode, click Rotate device Rotate device.

To send the preview to a phone or tablet, install the Creative Preview app or scan a QR code.
Preview responsive Google Web Designer creatives

You can preview responsive creatives built with Google Web Designer in many placement sizes using the All sizes preview mode and Show sizes drop-down menu available only for these creative types.

All sizes preview mode

  1. Open a creative in DoubleClick Studio and click the Preview step.
  2. Open the Preview mode menu, then click All sizes. The same responsive creative is shown in a different card in the most popular Interactive Advertising Bureau (IAB) ad placement sizes.
  3. Compare how the creative looks in each placement size. For each placement size, you can:
    • Replay the creative, by clicking Refresh  .
    • Open the creative in a new window on a blank page, by clicking Blank preview in blank screen. This will allow you to test any creative events or behavior specific to one creative size.

Add or remove preview sizes

By default, the most common placement sizes are automatically included in the preview. If your campaign targets different placement sizes, you can add or remove sizes.

  1. Open the Show sizes menu.
  2. To hide a size you don't want to see, uncheck that size.
  3. To add a size:
    1. Click Add new size, then enter width and height.
    2. Click Add. Custom sizes are temporary, so if you navigate away from the preview and come back, you may need to add these sizes again.
  4. To remove any custom preview sizes and show only the common IAB placement sizes again, click Restore defaults.

Send a preview to a mobile phone or tablet

There are two options for sending a preview to a device: you can install the Creative Preview app on your device to see an accurate preview of mobile in-app creatives or you can scan a QR code with your phone to open a preview using your mobile web browser.

Preview mobile creatives using the Creative Preview app

  1. If not installed already, install the Creative Preview app on your device.
  2. Open a creative in DoubleClick Studio and click the Preview step.
  3. Open the Preview location drop-down menu. Under "Push to device", you'll see a list of linked devices that have the Creative Preview app installed. 

    Available devices are paired with your Studio account when you sign into the app. If you don't see any available devices, first add a device, then refresh the page.
    The device name shown in the Push to device list is your device's model name. Edit this name in the Creative Preview's app settings on your device to make it easier to remember.
  4. Select the device you want to send the creative to. The preview is sent to the Creative Preview app and you'll get a notification on your device. Tap the notification to open the preview. (If you don't get a notification on your device, app notifications may be disabled. How to enable notifications)
  5. Back in the DoubleClick Studio preview page on your computer, click Show details Show details, then click Event summary.
    Play around with the creative on your mobile device. You'll see events and timers triggered by interacting with the creative recorded in the Event summary and Event log panels in Studio.
Push to device is not available in sharable external previews. Instead, scan a QR code to open the preview in your mobile web browser.

Scan a QR code to preview on a device

  1. Open a creative in DoubleClick Studio and click the Preview step.
  2. Open the Preview location menu, then click Scan QR code.
  3. Use a QR code reader app on your device to scan the displayed QR code. (Search Google Play or the Apple App Store for "QR scanner".) After you scan the code, the creative is opened in your mobile browser.
  4. Back in the DoubleClick Studio preview page on your computer, click Show details Show details, then click Event summary.
    Play around with the creative on your mobile device. You'll see triggered events and timers recorded in the Event summary and Event log panels in Studio.

Change the creative's position and other display options

To adjust a creative's position on the page, click Show details Show details, then click Display properties.

Note: The changes you make in the Display properties screen are applied to the live creative.

The available display properties vary depending on the creative format type. For more details on the properties for different formats, see:

Test custom event tracking

Test any custom events you wish to record in your creative to make sure they're recording at the right time. This ensures that the right metrics will be included in your campaign reports. To test events, use the Event summary panel, which logs standard and custom events. Events are displayed at the bottom of the event summary panel.

Test creative event recording

  1. Click Show details Show details, then click Event summary.
  2. Play around with your creative preview. Click on any buttons that should trigger custom counters, exits or timers. If your creative has video, play the video and try out the video controls to make sure video events are logged.
  3. If events don't fire when expected, check your creative code to make sure the appropriate custom event code has been added.

See a list of events with a count of how many times they fired

The Event summary displays the total number of events in your creative, and real-time event logging as you interact with your creative preview.

Here are some tips for using the panel as you review events:

  • Enter an event name in the "Event name" field to search for a specific event.
  • Make the event list easier to review by applying filters to the event list:
    • Type: Filter the display by event type:
      • All: List all events.
      • Custom: List only custom events added by the creative developer.
      • Standard: List Studio standard events, which are automatically added to the creative.
    • Show: Filter the display by triggered or untriggered events, depending on whether you tested them in the Preview tab.
      • All: List all events.
      • Triggered: Show only events that have been triggered in the current preview session.
      • Untriggered: Show events that haven't been triggered in the current preview session.

See a log of events with timestamps

Click Event log (below Event summary, you may need to scroll down to see it). The Event log shows real-time logs for standard and custom events. Events include a time stamp, event type, and event name. As events are triggered in the preview, each new event is displayed at the top of the list.

Click Clear log if you need to clear out the list and start over. Only the log display is cleared; counts in the summary will not cleared.

When you've finished previewing your creative, click Next to proceed to the Publish step.
Was this article helpful?
How can we improve it?