100% Private & Browser Based

Google Web Designer clickTag and Exit Setup: Google Ads, CM360 and Studio

Google Web Designer has no clickTag field, and that is deliberate. Google's Ad Manager help puts it plainly: bundle based HTML5 from Google Web Designer does not support click tags, and a published bundle should use an exit event instead. How you set up that exit depends on where the banner is going, so pick the destination first and the environment second.

1. Pick the environment for the destination

The ad environment is chosen when you create the file, and Google Web Designer runs different validation checks and adds different enabler code depending on it. The four environments are Display & Video 360 (also used for Studio, Campaign Manager 360 and Ad Manager), Google AdMob, Google Ads and Non-Google Ad.

Destination Environment How the click works Destination URL set in
Google Ads upload Google Ads No exit events. The creative exits to the ad's final URL Google Ads, on the ad
Campaign Manager 360 Display & Video 360 Tap Area with an Exit ad event CM360, per exit
Studio Display & Video 360 Tap Area with an Exit ad event, which calls Enabler.exit Studio, per exit
Hand coded banner Not Google Web Designer var clickTag in the head The ad server fills the variable

By default a Google Ads creative from Google Web Designer exits to the final URL you set on the ad in Google Ads. Adding your own click handling is what triggers the most common upload error for these files.

  1. Create the file with File, New and choose the Google Ads environment. If an existing file was built as Generic, Google Ads refuses it with "This ad was created with the environment 'Generic' instead of 'Google Ads.'" Convert the document to the Google Ads environment.
  2. Do not add a Tap Area with an exit event for a standard ad. Google Ads reports it as "Your HTML5 ad is modifying clickability, which is not supported" and tells you to delete the Tap Area component. Dynamic remarketing ads are the exception: there a Tap Area with a dynamic binding sends each product to its own landing page.
  3. Choose Publish, Publish locally and upload the published ZIP. Uploading the author file fails with "You must upload a published file."
  4. After saving the ad, test the click with the View full size ad link. Google notes that the preview popup does not click through.

3. CM360 and Studio: add a Tap Area exit

For Campaign Manager 360 and Studio, the exit carries a name rather than a hardcoded address. The real URL is entered in CM360 or Studio after upload and can be changed there later without touching the creative.

  1. Create the file in the Display & Video 360 environment. Google Web Designer then includes the Studio Enabler for you.
  2. Open the Components panel, expand Interaction and drag a Tap Area onto the stage. Place it over the call to action, or stretch it over the whole canvas for a background exit.
  3. Click the new event button in the Events panel and set:
    • Target: the Tap Area, for example gwd-taparea_1
    • Event: Tap Area, Touch/Click
    • Action: Google Ad, Exit ad
    • Receiver: gwd-ad
  4. In the configuration, enter a Metrics ID such as Background_Exit or CTA so the exit is easy to read in reports, and a default URL.
  5. Do not pick Exit ad (overrides URL) for a standard creative. Google documents it for dynamic ads only, because the URL can no longer be changed in Studio or Campaign Manager 360.
  6. Preview in a browser. The Tap Area does not respond on the design stage itself.
  7. Keep Google Web Designer up to date. DV360 rejects files from outdated versions with "Metadata in the Google Web Designer HTML is invalid", and the fix is to open the file in the latest version and publish again.
  8. Publish straight to Campaign Manager 360 with your CM360 profile, advertiser and creative name, or to Studio. To update a creative that already exists in CM360, publish locally and upload the ZIP to that creative instead, because each direct publish adds a new one.

4. The code each platform expects

If you or a developer write the banner by hand instead, this is the exit code for each platform. Google Web Designer produces the equivalent of the Studio version for you.

Google Ads and Campaign Manager 360, hand coded

Both read the standard declaration in the head of the primary HTML file. CM360 asks for it in exactly this form, unminified, and supports more than one click tag for more than one exit. Google Ads allows one exit only.

<head>
  <meta name="ad.size" content="width=300,height=250">
  <script type="text/javascript">
    var clickTag = "https://www.example.com";
  </script>
</head>
<body>
  <a href="javascript:window.open(window.clickTag)">
    <div id="ad"><!-- creative --></div>
  </a>
</body>

Studio, hand coded

Studio creatives load the Enabler in the head, wait for it to initialise, and name each exit. The URL lives in Studio, not in the code.

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script>
  function start() {
    document.getElementById('bg-exit').addEventListener('click', function () {
      Enabler.exit('Background Exit');
    }, false);
  }
  window.onload = function () {
    if (Enabler.isInitialized()) start();
    else Enabler.addEventListener(studio.events.StudioEvent.INIT, start);
  };
</script>

Never mix the two in one file. Enabler.exit needs the Studio Enabler, and Google Ads allows no external script except Google Fonts and its hosted CreateJS, GreenSock and jQuery builds, so a ZIP that loads Enabler.js fails on Google Ads before its click is even tested. The old ExitApi.exit() is a third pattern that Google Ads now rejects outright, explained in which exit each platform accepts.

5. Validate the published ZIP

Open the HTML5 Banner Validator, choose the platform the banner is going to, and drop the published ZIP:

For hand coded banners that are missing their declaration, the clickTag Editor injects it into the ZIP, and the clickTag Generator writes the snippet for Google Ads, CM360, DV360 or Studio. The full list of Google Ads upload errors is in the Google Ads HTML5 validator guide, and CM360 specifics are in the CM360 creative specs guide.