Search
Clear search
Close search
Google apps
Main menu

Google Web Designer Lightbox build guide

Use this guide to learn how to build custom Lightbox ads for the Google Display Network with Google Web Designer (GWD). Use GWD to take advantage of ready to use components, reduce the amount of custom code you need to write, and directly publish creatives to Studio.

Make sure your creative follows Lightbox technical requirements and policies as you design your ad units.

Step 1: Create a new file

  1. Create a new Expandable creative in Google Web Designer. Select the “Fullscreen Lightbox” option in the dropdown for “Expansion Mode”.
  2. Enter any expanded size, for example 800x500.
     
    The expanded size can be any size that you are comfortable working with, however this dimension is ignored at expansion time. The Fullscreen API will use the entire available screen size across all devices.
  3. Enter a name and select other file properties, then click OK.

You will see two pages created: Banner Page and Expanded Page.

Step 2: Remove the close button

  1. Click the page indicator at the bottom of the stage and switch to the Expanded page.
  2. Remove the close button tap area. The close button isn't needed because the Lightbox API will add a close button automatically.

Step 3: Detect devices with touch support

Add touch device detection code to change the expansion CTA text depending on the device. We need custom code which detects whether the creative is served to a device that supports interaction via touch.

  1. Add a call-to-action text element to the Banner page and name it "cta_text". You can name it whatever you want, but note that the ID name needs to match the ID in the code in the next step.
  2. Add a new event by selecting the plus (+) button in the Events panel.
    1. Select "Banner page" as the target, then "Page > Page activated", "Custom > Add custom action".
    2. Give the function a name, for example “updateCTA” then copy and paste the following code:
Touch detection code

if (('ontouchstart' in window)
    || window.DocumentTouch 
    && document instanceof DocumentTouch) {
  gwd.actions.events.getElementById("cta_text").textContent = "Tap to Expand";
} else {
  gwd.actions.events.getElementById("cta_text").textContent = "Hover to Expand";
};

 

You now have the basics for a cross-screen compatible Lightbox creative. From here you can begin to add components and visual elements you wish to work with and position them using percentage alignment instead of fixed pixels.

Learn how to use media queries to design responsive creatives in Google Web Designer

 

Fix iOS in-app exits

When creatives are serving in-app to iOS environments, there's a known issue: calling collapse on an exit causes the landing page to close immediately.

How to fix iOS in-app exits
  1. Check the serving environment before an exit is called. In Google Web Designer, use a "pageactivated" event in a custom function or immediately before your exit calls.

    Environment detection sample code

    
    var standalone = window.navigator.standalone,
        userAgent = window.navigator.userAgent.toLowerCase(),
        safari = /safari/.test(userAgent),
        ios = /iphone|ipod|ipad/.test(userAgent);
    
    if (ios) {
      if (!standalone && safari) {
        gwd.iOSEnvironment = "web";
      } else if (standalone && !safari) {
        gwd.iOSEnvironment = "fullscreen";
      } else if (!standalone && !safari) {
        gwd.iOSEnvironment = "app";
      }
    }
  2. Before each exit call, check if the ad is serving within an iOS app. 
    1. In Google Web Designer, if you're using Tap Area components, manually edit the code in code view. The tap area function name includes the tap area ID, for example, a tap area named "ExpandExitTaparea" has a function called "gwd.auto_ExpandExitTapareaAction".

      Google Web Designer predefined tap area function

      
      if (gwd.iOSEnvironment == "app") {
        gwd.actions.gwdDoubleclick.exit('gwd-ad', 'My Exit', 'http://google.com', false, true);
      } else {
        gwd.actions.gwdDoubleclick.exit('gwd-ad', 'My Exit', 'http://google.com', true, true);
      }
      The exit method includes two Boolean parameters at the end. The first parameter is whether to collapse, which should be false for in-app creatives. The second parameter is whether to pause media (video or audio) playback, which should be true for all creatives.
  3. Upload and test your creative to make sure the landing page stays open.
Was this article helpful?
How can we improve it?