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 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 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?