Add auto-close

Auto-close automatically closes an interstitial creative after a set period of time.

In addition to a manual close button, publishers often require floaters to auto-close after a set time. This prevents the ad from blocking their site content for too long, especially if there's no user interaction with the ad.

Publishers' site specs always determine whether you add an auto-close. However, Studio recommends that desktop interstitial creatives for auto-collapse after 15 seconds. For more information, see Developer best practices.

How do I set up auto-close?

There are two ways to set up auto-close in Studio creatives: use the Studio Web UI or the API. We recommend that you use only one of these options.

If you simply want to add auto-close functionality to your creative, we recommend Option 1.

If you want more control over how and when your creative collapses, we recommend Option 2. For example, if you want your creative to stay open if a user is interacting with it, you must use the API to control the auto-close.

Option 1: Use the Studio Web UI

Setting up auto-close in the Studio Web UI lets you specify a time limit for how long your creative stays open on a page. After the set time, the creative collapses, even if a user is engaging with it.

If you decide to use the Studio Web UI to auto-close your creative, set it up when you upload your creatives to Studio. Continue to the next step in this build guide for now, and you'll activate auto-close in interstitial creative properties, in the Display duration section.

Option 2: Use the API

For more control over the auto-close feature, use the Studio API to collapse an interstitial ad. For example, if you want your creative to stay open when a user interacts with it, use the API to control the auto-close function.

To set up auto-close, call the Enabler.close(); method at the end of your timer countdown function. Unlike the close button, you don't have to call Enabler.reportManualClose(); with this function because this close shouldn't be tracked as a manual close in your reports.

There are two ways to set up a timer in HTML5:

Use the setTimeout method

setTimeout(autoClose, 15000);

function autoClose() {
  Enabler.close();
}

Use the setInterval method, and clear it after the interval handler has been called

var autoTimer = setInterval(autoClose, 15000);

function autoClose() {
  clearInterval(autoTimer);
  Enabler.close();
}

Optional: Keep an interstitial open when someone is interacting

Another benefit of the Studio API is that you can set up an interstitial creative to stay open if a user is interacting with it. Use the studio.events.StudioEvent.INTERACTION Studio event to do this.

Code example

var autoTimer = setInterval(autoClose,15000)

function autoClose(){
  clearInterval(autoTimer);
  Enabler.close();
}

function userInteract(){
  clearInterval(autoTimer);
}

Enabler.addEventListener(studio.events.StudioEvent.INTERACTION, userInteract);