Clear search
Close search
Google apps
Main menu

HTML5 In-page build guide

Add an HTML5 Exit

An exit is a clickthrough area in an ad. 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.

Google Web Designer's Tap Area component is fully compatible with DoubleClick Studio. No customised code is required.

Add an exit in HTML5

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 that you defined. By default, you can also change the URL in DCM. If you don't want people to change the URL in DCM, you can use the separate, exitOverride API to prevent any edits to the URL.

Add an exit

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

    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 appears in the final report.​

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

    document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
    Code snippet for YouTube Mastheads
    function bgExitHandler(e) {
    Enabler.exit('Background Exit');
    /* If you have videos, make sure to stop all of them. Check the YouTube Player implementation section of this guide. */

    /* 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 exits above other elements in your creative. If you place a clickable element over 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 the Studio Web UI.

Related articles

Was this article helpful?
How can we improve it?