HTML5 interstitial build guide

Add a close button

When serving in a desktop or mobile browser, you must add a close button so that users can close your creative and view page content under the ad.

Add a close button in Google Web Designer

  1. Create a button or other clear visual close button element for the user to click or touch. For example, text-based close buttons typically use the text "Close  X"
  2. Drag the Tap Area component from the components pane to the stage, and position it over the close button element.
  3. Click the new event button in the events panel. 
  4. In the event dialog, select the following options:
    Target The TapArea component (gwd-taparea_1)
    Event Tap Area > Touch/Click
    Action Custom > Add custom action
  5. In the Custom Code window, name your custom function. For example: "closead". Then paste the following code in the code box:
    Enabler.reportManualClose();
    Enabler.close();
  6. Click OK.

 custom close button code

Add a close button using HTML, CSS, and JavaScript

  1. Create a button element in your creative using a <div> tag. Create the element in the HTML file and style it in the CSS file. Then assign the ID close-btn to your element.

    Sample <div> tag in the HTML file

    <div id="close-btn"></div>

    Sample ID selector styling in the CSS file

    #close-btn {
      position: absolute;
      width: 20px;
      height: 18px;
      top: 0px;
      left: 278px;
      cursor: pointer;
      z-index:220;
      background-image: url('close.png');
      background-repeat: no-repeat;
    }
  2. Add the reportManualClose and close methods to the JavaScript to record the event and close the creative.

    Example code to close the creative and track the event

    function closeHandler() {
      Enabler.reportManualClose(); 
      Enabler.close();
    }
    
    document.getElementById('close-btn').addEventListener('click', closeHandler, false);
    

Hide the close button when the creative is served in an app

If the creative will serve in mobile apps, note that mobile app ad SDKs automatically add their own close button over the creative. If you already have a close button in your creative, the creative will have two close buttons. To hide the MRAID close button, use the Enabler method setUseCustomClose.

var hideMRAIDClose = function() {
  if (studio.common.Environment.hasType(
      studio.common.Environment.Type.IN_APP)) {
    // Hide the MRAID close button and use the creative's close button instead.
    Enabler.setUseCustomClose(true);
  }
};

Was this helpful?

How can we improve it?

Need more help?

Try these next steps:

Search
Clear search
Close search
Google apps
Main menu
2551538810408413379
true
Search Help Center
true
true
true