Search
Clear search
Close search
Google apps
Main menu

Make an expanding creative with Google Web Designer

Use this guide to make an expanding creative using Google Web Designer.

Build expanding creatives in Google Web Designer

Create a new file

To create a new expandable with video creative in Google Web Designer:

  1. Open Google Web Designer and click File > New file. The 'Create new blank file' window displays.
  2. In the Ads list, select Expandable.
  3. Choose DoubleClick as the Environment.
  4. Set the dimensions for the collapsed and expanded sizes of the ad.
  5. Give the creative a name. This is the name of the HTML file.
  6. Choose the Location on your computer in which the Google Web Designer files will be saved. Enter the path to the location, or click the search icon to navigate to the location you want.
  7. Set the Animation Mode:
    1. Quick: Animate your ad scene by scene. See Create animations in Quick mode in the Google Web Designer Help Center for more information.
    2. Advanced: Animate individual elements on their own timeline. See Create animations in Advanced mode in the Google Web Designer Help Center for more information.
  8. Click OK.

Google Web Designer creates the initial collapsed and expanded pages (called Banner page and Expanded page). It automatically adds a tap area event to the collapsed page, which will expand the ad, and a close tap area to an expanded page to collapse the ad back down. The initial code needed for the ad to talk to the ad server and collect tracking metrics is also automatically added.

Set up the Banner page

To set up the collapsed ad in the banner page:

  1. Import images by dragging them onto the stage, or drag them from the Asset Library panel.
  2. (Optional) Create animations or add built-in or custom components to the page.
  3. When your banner is complete, select the Tap Area component and click the 'Bring to top' button.
  4. Save.

To make the creative expand on mouse rollover:

  1. Open the Events panel, click the + button to add a mouseover event.
  2. Choose expand-button as the Target.
  3. Choose Mouse > mouseover as the Event.
  4. Choose Google Ad > Go to page as the Action.
  5. Choose gwd-ad as the Receiver.

Learn more about using events in Google Web Designer

Set up the Expanded page

To set up the expanded ad in the expanded page:

  1. Switch to the Expanded page using the page indicator at the bottom of the stage Page chooser in Google Web Designer.
  2. Import images by dragging them onto the stage, or drag them from the Asset Library panel.
  3. (Optional) Create animations or add built-in or custom components to the page.
  4. Save.

Add an exit

To add an exit to the expanded page:

  1. Add a button image or other clear visual call-to-action element for the user to click or touch.
  2. Drag the Tap Area component from the Components panel to the stage, position it over the call to action.
  3. Open the Events panel and click the + button to add an event to the new Tap Area.
    1. Choose the Tap Area you added in Step 2 as the target. By default, a new Tap Area will have the ID gwd-taparea_1. If you added multiple Tap Areas, first click the Tap Area to find the ID to use in the Properties panel.
    2. Choose Tap Area > Touch/Click as the Event.
    3. Choose Google Ad > Exit as the Action.
    4. Choose gwd-ad as the Receiver.
    5. Enter additional settings in the Configuration step, including a Metrics ID to use as the exit's label in reports and the URL to open.

Track Google Web Designer Events in Studio

Add a video

If you'd like to add video to your creative, use either the Video component or the YouTube component. If your video is hosted on YouTube, use the YouTube component. If not, use the Video component for these compatible HTML5 video formats: 

  • .MP4
  • .OGG/.OGV
  • .WEBM

Set up a multi-directional expanding creative

Multi-directional expanding creatives can expand in the proper direction based on their placement on a site. Follow the steps below to make a multi-directional expanding creative.

Save time by starting from the Multi-directional Expand template in Google Web Designer. The template includes much of the code and setup in the steps below.
Multi-directional setup

Increase the stage size

  1. Increase the size of the expanded page to allow enough room for the expanded area needed for each direction.

    For example, if the collapsed creative size is 300x250, the expanded creative is 600x250, and the creative can expand to the right or left, set the expanded page size to 900x250.

    Image showing collapsed, expanded, and stage sizes for a multi-directional expanding creative

  2. Use the page indicator to switch back to the Banner page Page chooser in Google Web Designer.
  3. Click the ad expansion view button 
  4. Reposition the expanding viewable area so that the collapsed is in the center. Learn more about using the ad expansion view button in the Google Web Designer Help Center.
  5. Switch to the Expanded page using the page indicator at the bottom of the stage Page chooser in Google Web Designer.
  6. Adjust the position of your creative elements to match the new stage size.

Add positioning code

  1. Click Code view.
  2. Scroll down to the script tag with the ID gwd-init-code
    <script type="text/javascript" id="gwd-init-code">
  3. Add code to enable multi-directional expansion and add event handling. See the Studio HTML5 SDK for API methods and examples.

    Example code 

    This example expands only to the left and right. Review the Studio HTML5 SDK for more details.

    
    Enabler.setIsMultiDirectional(true);
    
    // Edit position of elements based on expanding direction.
    function expandStartHandler() {
      var direction = Enabler.getExpandDirection().toString();
      if (direction == 'tr' || direction == 'br') {
        // Add code here to position elements when expanding to the right.
        // Change btnClose to match the ID of your close button, and modify the position.
        btnClose.style.left = '875px';
      } else {
        // Add code here to position elements when expanding to the left.
        // Change btnClose to match the ID of your close button, and modify the position.
        btnClose.style.left = '10px';
      }
    }
    
    Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);
  4. Add code to position each creative element for each expand direction you wish to support.

Preview in DoubleClick Studio

To preview multi-directional expanding creatives in Studio, use the Custom Dynamic preview page to check the different expanding directions.

Preview your creative in a browser

To preview your ad from Google Web Designer:

  1. Click the preview button at the bottom of the screen . Google Web Designer recognizes the supported browsers on your system and lets you choose which of them you want to use.
  2. To choose the browser that you want to preview your work in, click the selection arrow to the right of the preview button, and choose the browser from the list.
  3. On page load, review the collapsed ad.
  4. Click the call to action to see the ad expand.

When your creative is complete, you're ready to publish to Studio.

Was this article helpful?
How can we improve it?