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.

 

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);
  }
};