Search
Clear search
Close search
Google apps
Main menu

Add an HTML5 Exit

A DoubleClick exit is a click-through area in an ad. With Rich Media, you can create multiple exits, so that your ad can direct a user to various web pages.

Multiple exits can serve as a customised tracking element in Rich Media creatives. For example, you can set up different exits to track how many users click through to a social media page versus an advertiser's home page link or a call-to-action phrase.

Every Rich Media creative requires at least one exit and for DoubleClick Studio to recognise these exits, you must code them using the DoubleClick API.

Add an exit in HTML5

Adding a DoubleClick exit is a two-step process. First, define the exit name in your HTML5 files. Then, when you upload the creative in the Studio Web UI, add a destination URL to the exit 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 them from doing so.

To add an exit:

  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 bg-exit to your element.

    Sample <div> tag object in the HTML file:

    <div id="bg-exit"></div>

    Sample styling and ID selector in the CSS file:

    #bg-exit {
      background-color: rgba(255,255,255,0);
      cursor: pointer;
          height: 100%;
      left: 0px;
      position: absolute;
      top: 0px;
          width: 100%;
    Code
  2. Add exit functionality to the JavaScript by calling this method: Enabler.exit('exit name goes here'); Code snippet
    function bgExitHandler(e) {
          Enabler.exit('Background Exit');
    Code

    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(); */
    Code

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

    The name that you give your exit with this method will appear in Studio. You can modify it in Studio or DCM to affect what shows up in the final report.

Hard-coding exit URLs

If you want to prevent people from changing the URL in Studio or DCM, use the Enabler.exitOverride method instead. 

function bgExitHandler(e) {
  Enabler.exitOverride('Background Exit', 'http://www.permanent-url.com');
}

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

 

Your QA team tests all exits that you add to a creative. To avoid common QA revisions:
  • 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.
Was this article helpful?