Search
Clear search
Close search
Google apps
Main menu

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 with tracking

  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 displaying in an app

When serving in a mobile app, you don't need to add a close button. It will be added by the mobile ad SDK at serving time. When building a creative that can serve in either environment, first check the environment before deciding when to show the close button.

var hideCloseInApp = function() {
  if (studio.common.Environment.hasType(studio.common.Environment.Type.IN_APP)) {
    // Hide the close button when in an app.
    document.getElementById('close-btn').style.display = "none";
  }
};
Was this article helpful?