HTML5 In-page build guide

Add an exit

An exit is an area of the ad that when clicked, leads you to an advertiser's website. You can add up to 100 exits per Studio creative, so that your ad can direct a user to various web pages. For example, you can set up individual exits to track how many users click through to a social media page versus your advertiser's website link or a call-to-action button.

Every creative requires at least one exit. Exits are similar to click tags, but unlike click tags, you don't need to provide a landing page URL in the creative code. Instead, you provide a name for the exit so that you can recognise it in campaign reports. You'll provide the actual URL after you upload your creative to Studio, and you can also change or customise the URL later using Studio or DCM, without having to edit the creative code.

Add an exit using Google Web Designer

  1. Add a button or other clear visual call-to-action element for the user to click or tap.
  2. Drag the Tap Area component from the components pane to the stage and position it over the call to action.
  3. Click the new event button in the events panel.
  4. In the event dialogue, select the following options:
    {target} The TapArea component (gwd-taparea_1)
    Event Tap Area > Touch/Click
    {target} Google Ad > Exit
    Receiver gwd-ad

    Metrics ID:

    A label, such as 'Buy Product' that will make your reporting meaningful.


    The exit URL.

    Collapse on exit

    Tick to close the ad when the user touches the close button.

When you upload your creative to Studio, review the exit details in the Edit Events step of the Creatives workflow and edit the URL, if needed.

Add an exit using any HTML editor

Adding an exit is a two-step process. First, define the exit name in your HTML5 files. Then upload the creative to Studio and add a destination URL to the exit you defined. By default, you can also change the URL in DCM.

  1. Create a button element in your creative using a <div> tag. Create the element in your HTML file and give it the ID: bg-exit.
    <div id='bg-exit'></div>
    Do not use anchor tags <a></a> for exits. Studio relies on custom code to open your URL in a way that's compatible across browsers and platforms. If you use an HTML anchor tag, your link will open in two tabs or windows.
  2. Style the button using CSS.

    #bg-exit {
      cursor: pointer;
      width: 100%;
      height: 100%;
      z-index: 1;
  3. Assign an exit to the button by calling the exit method in your JavaScript file. For the exit method to work, you must first add Studio's Enabler to your creative.

Code snippet

function bgExitHandler(e) {
  Enabler.exit('Background Exit');

document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);

The name you give your exit with this method (in this example, 'Background Exit') will appear in Studio. You can modify this name in Studio or DCM to affect what shows up in the final report.

Code snippet for YouTube Mastheads
function bgExitHandler(e) {
  Enabler.exit('Background Exit');

  /* If you have videos, make sure to stop all of them. */

  /* If the masthead is expandable, make sure that it collapses using:
  Enabler.requestCollapse(); */

// This should be attributed only after the Enabler.isinitialised
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);

Testing exits

Your QA team tests all exits that you add to a creative. To avoid common QA revisions, follow these best practices:

  • Layer clickable exit elements above other elements in your creative. If you place another clickable element on top of an exit, the exit won't work.
  • Test every exit that you add when you run the creative locally and when you upload it to DoubleClick Studio.
Was this article helpful?
How can we improve it?