HTML5 expanding 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 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 you can recognize it in campaign reports. You'll provide the actual URL after you upload your creative to Studio, and you can also change or customize the URL later using Studio or Campaign Manager 360, without having to edit the creative code.

Add an exit using Google Web Designer

Be sure your ad has a button or other clear visual call-to-action element for the user to click or touch.
Drag the Tap Area component from the Interaction folder of the Components panel to the stage, and position it over the call to action.
Click the new event button in the Events panel.

In the event dialog, select the following options:

Target	The Tap Area component (`gwd-taparea_1`)
Event	Tap Area > Touch/Click
Action	Google Ad > Exit ad _{Note: A similar action, Exit ad (overrides URL), doesn't allow you to modify the URL outside of the creative, such as within Studio or Campaign Manager 360, and should only be used for dynamic ads.}
Receiver	`gwd-ad`
Configuration	Metrics ID - A label (e.g., "CTA") to make reports easier to understand. URL - The exit URL. Collapse on exit - For expandable ads, check to collapse the ad when the user closes the ad. Pause media on exit - Check to stop video and audio playback when the user closes the ad. Collapsed page on exit - For expandable ads, the page to show when the user closes the ad.

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 Campaign Manager 360.

Download a sample creative

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.
Style the button using CSS.

#bg-exit { cursor: pointer; width: 100%; height: 100%; z-index: 1; }
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.

Example code

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 Campaign Manager 360 to affect what shows up in the final report.

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

Was this helpful?

How can we improve it?