Search
Clear search
Close search
Google apps
Main menu

Make a creative expand to fullscreen

An HTML5 expand to fullscreen creative is an expanding ad with two sizes, an initial collapsed size and a dynamic fullscreen size. HTML5 expand to fullscreen creatives can be used for desktop, mobile, and in-app. 

For Lightbox creatives, follow the steps in the HTML5 Lightbox build guide instead.

The smaller collapsed size of an HTML5 expand to fullscreen creative fits within a standard ad placement on a desktop or mobile website, or in a mobile app. The larger size appears to expand outside the collapsed size to optionally fill a smaller, specified amount of the desktop's browser window or mobile device's screen and is always centered. The ad expands when a user clicks a fullscreen button.

This article explains how to make an HTML5 creative expand to fullscreen using DoubleClick Studio’s HTML5 SDK.

Add the Enabler and wait for it to initialize

The Enabler is the core code library of DoubleClick Studio, and is required for all rich media creatives. Add the following script tag to the <head> tag of your HTML file:

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

Wait for Enabler initialization

Nothing in the ad should auto-execute until the Enabler has initialized. This ensures that everything is properly loaded and Enabler methods can be accessed before a user interacts with the ad.

In your JavaScript, verify that the Enabler has initialized using the Enabler’s isInitialized method, which returns true or false. If true, make the call to start your function, in this example, enablerInitHandler(). If false, make a fallback call that listens for the Enabler’s INIT event.

Once the Enabler has initialized, start animation, load image assets, or call tracking methods.

Enabler initialization code sample

// If true, start function. If false, listen for INIT.
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // Add your code to start ad animation, load images, call Enabler methods or
  // use polite loading.
}

Optional: Wait for the publisher page to load

Polite loading delays the loading of creative assets until the publisher page is loaded. To set up polite loading, wait for the Enabler to initialize, then call the Enabler's isPageLoaded method. Replace the enablerInitHandler function above with the following code:

function enablerInitHandler() {
  if (Enabler.isPageLoaded()) {
    politeLoadHandler();
  } else {
    Enabler.addEventListener(
        studio.events.StudioEvent.PAGE_LOADED,
        politeLoadHandler);
  }
}

function politeLoadHandler() {
  // Add your code to start ad animation or load images.
}

Optional: Wait for the ad to be visible

If your creative includes autoplaying animation, you may want to wait until the viewer has scrolled the ad into view before playing that animation. To check visibility, call the Enabler's isVisible method.

For polite loading creatives

Replace the politeLoadHandler function with the following code:

function politeLoadHandler() {
  if (Enabler.isVisible()) {
    adVisibleHandler();
  } else {
    Enabler.addEventListener(
        studio.events.StudioEvent.VISIBLE,
        adVisibleHandler);
  }
}

function adVisibleHandler() {
  // Add your code to start ad animation or load images.
}

For creatives without polite loading

Replace the enablerInitHandler function with the following code:



function enablerInitHandler() {
  if (Enabler.isVisible()) {
    adVisibleHandler();
  } else {
    Enabler.addEventListener(
    studio.events.StudioEvent.VISIBLE,
    adVisibleHandler);
  }
}

function adVisibleHandler() {
  // Add your code to start ad animation or load images.
}

Expand to fullscreen and collapse

Expand to fullscreen creatives expand out in all directions to fill whatever screen they're displayed on. The expanding process includes the following steps. Click each step for more details and example code.

Step 1: Check if fullscreen is supported where the ad is being viewed

To determine if fullscreen is available, call Enabler.queryFullscreenSupport().

Example code to check if fullscreen is supported


// Create a variable to save fullscreen support.
var fullscreenSupported = false;

// Add a listener to report the result.
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
    function(event) {
      fullscreenSupported = event.supported;
    });

Enabler.queryFullscreenSupport();

// Show a hidden fullscreen button after fullscreen support is confirmed.
if (fullscreenSupported) {
  // The line of code below assumes you have a button named 'fullscreenButton'.
  fullscreenButton.style.display = 'block';
}
Step 2: (Optional) Check the screen's dimensions

The creative will expand to the maximum size possible automatically. If you want, you can check the screen's dimensions and expand to a custom size instead. To get the screen size, call Enabler.queryFullscreenDimensions().

Example code to check screen size before expanding 


Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS, 
    function(event) {
      Enabler.requestFullscreenExpand();
    });

fullscreenButton.addEventListener('click',
    function(event) {
      Enabler.queryFullscreenDimenions();
    }, false);
Step 3: Start to expand, optionally animating the expansion

To expand to the maximum screen dimensions, call Enabler.requestFullscreenExpand(). Then listen for the FULLSCREEN_EXPAND_START event. If you want to animate while expanding, call your custom animation method in this event handler.

Example code to expand to fill the entire screen

Enabler.requestFullscreenExpand();

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
    function(event) {
      // (Optional) Add code to start your custom expanding animation.
      // If not animating, call Enabler.finishFullscreenExpand(); instead.
      Enabler.finishFullscreenExpand();
    });

Or, to expand to a custom size (for example, 1280x1024), pass the desired width and height to the method instead:

Example code to expand to a custom size

Enabler.requestFullscreenExpand(1280, 1024);

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
    function(event) {
      // (Optional) Add code to start your custom expanding animation.
      // If not animating, call Enabler.finishFullscreenExpand(); instead.
      Enabler.finishFullscreenExpand();
    });

Step 4: Complete the expansion

When the expansion is complete, call Enabler.finishFullscreenExpand(). Then listen for the FULLSCREEN_EXPAND_FINISH event.

If using an expand animation, call this method when your animation is complete. If not animating, call this method in the handler for the FULLSCREEN_EXPAND_START event. See example above.

Example code to finish expanding

Enabler.finishFullscreenExpand();

// Create a variable to keep track of the expansion state.

var isFullscreen = false;

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
    function(event) {
      isFullscreen = true;
    });

Step 5: Start to collapse, optionally animating the collapse

To collapse, you first need a close button in the fullscreen state of your creative. To start collapsing, call Enabler.requestFullscreenCollapse(). Then listen for the FULLSCREEN_COLLAPSE_START event. If you want to animate while collapsing, call your custom animation method in this event handler.

Example code to start collapsing 

Enabler.requestFullscreenCollapse();

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
    function(event) {
      // (Optional) Add code to start your custom collapsing animation.
      // If not animating, call Enabler.finishFullscreenCollapse(); instead.
      Enabler.finishFullscreenCollapse();
    });

Step 6: Complete the collapse

When the collapse is complete, call Enabler.finishFullscreenCollapse(). Then listen for the FULLSCREEN_COLLAPSE_FINISH event.

If using an collapsing animation, call this method when your animation is complete. If not animating, call this method in the handler for the FULLSCREEN_COLLAPSE_START event. See example above.

Example code to finish collapsing

Enabler.finishFullscreenCollapse();

Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
    function(event) {
      // Set the variable created in the "Complete the expansion" step.
      isFullscreen = false;
    });

Next steps

 

Was this article helpful?
How can we improve it?