How To Add A Link In Google Web Designer

To add a hyperlink in Google Web Designer, select your item, create a click event, and set the destination URL for the exit action.

If you’re building a banner, landing page section, or a quick promo, making elements clickable in Google Web Designer is straightforward once you know where each type of link lives. This guide shows practical methods for text, images, shapes, and full-canvas hotspots, with clean steps you can follow on a fresh project or an existing file. You’ll also see smart defaults, gotchas, and export tips that save time when you hand off to an ad server or a teammate.

Adding A Link In Google Web Designer: Fast Workflow

There are three common ways to make something clickable: direct text hyperlinks, component-based hotspots, and event-driven exits on any element. Each fits a slightly different scenario. Pick the method that matches your creative and the platform where you’ll publish.

Quick Comparison: Which Link Method Should You Use?

The chart below gives you a fast view of where to set the URL and when each method shines.

Method	Best Use	Where To Set URL
Text Hyperlink	Inline calls in headlines, disclaimers, or body copy	Text panel → Link button (adds `<a href>`)
Events → Exit	Any element (image, shape, button) that should navigate out	Events panel → Action “Google Ad > Exit ad” → URL field
Tap Area Component	Invisible hotspot over a button or the full canvas	Events panel on the Tap Area → Exit action → URL

Make Text Clickable With A True Hyperlink

When you want a visible link inside a sentence or headline, use the text tool. This writes a real anchor tag in your HTML, which is handy for legal copy, footnotes, or brand terms.

Steps

Choose the Text tool and type your copy on the stage.
Select the exact words you want linked.
In the Text panel or the top tool options bar, click Link….
Enter the destination URL. Pick a target if you need a new tab behavior.
Press OK. You’ll see link styling on the selected text.

If you need to change the URL later, select the linked text again and reopen the link dialog. For ads that require a single tracked exit, use the event method below for the primary click and reserve text links for secondary pages such as terms or help.

Turn Any Image Or Shape Into A Click

Buttons, logos, product shots, and shapes can fire a tracked exit with one small setup in the Events panel. This gives you a central place to set the destination and keeps tracking consistent across formats.

Steps

Select the element you want clickable (image, shape, button, or group).
Open the Events panel (Window → Events) and click +.
In the dialog:
- Target: your selected element
- Event: Touch/Click
- Action: Google Ad > Exit ad
- Receiver: gwd-ad
- Configuration: set the URL field to your landing page (add a clear Metrics ID so reporting is readable)
Confirm and test with Preview.

This route works well for standard HTML5 ad builds and keeps the main click in one place for ad servers that support exit actions.

Use A Tap Area When You Need A Hotspot

A Tap Area is an invisible layer you can position over a button, a product card, or the whole canvas. It’s handy when your visual element is complex or animated and you want a clean hit area. Add the component, then wire the same exit event you saw above.

Steps

Open Components → Interaction and drag Tap Area onto the stage.
Resize and position it over the region that should respond to clicks or taps.
Open Events → click + → choose:
- Target: your Tap Area
- Event: Touch/Click
- Action: Google Ad > Exit ad
- Receiver: gwd-ad
- URL: paste the landing page

Check your ad platform rules before relying on a full-canvas hotspot; some placements expect specific click-tag or exit handling. The official help page on creating links in the tool walks through the text method and related options in plain terms, which pairs well with the event steps here (Add links). For events setup, the dedicated help page shows where to open the panel and how to add, edit, or remove entries (About events).

Pick The Right URL Strategy For Your Ad Server

Ad servers handle exits and click-tags in specific ways. One common pattern is a single exit defined in the creative that the server can override later. Another pattern is a click-tag variable that the server reads and swaps. If you’re sending files to a team that manages trafficking, confirm which method they expect so your export lands cleanly.

Quick Rules That Save Re-Uploads

Use a single primary exit for the main click unless the format needs more than one landing page.
Label exits with a short Metrics ID (such as CTA, Logo, or Hero) so reports are readable.
When a platform requires click-tags, keep them in the standard location and don’t duplicate values across creative and ad-level settings. Platform guidance on HTML5 exits explains order of precedence for these settings in plain terms (HTML5 guidelines for Ad Manager).

Design Tips For Clear, Clickable Elements

Clicks rise when users can see a clear action and hit it easily on touch. These layout notes help keep the experience smooth on phones and laptops.

Make The Click Obvious

Pair a strong verb with a concise label on buttons.
Leave space around the hit area so thumbs don’t miss.
Keep link color and hover states consistent across frames.

Keep The Hit Area Generous

On small sizes, use a Tap Area or a grouped layer to expand the hotspot.
Avoid placing the only click under a tiny icon or narrow text.
If your layout has motion, pin the hotspot to a stable region.

Plan Tracking From The Start

Decide the exit name you want in reports before you wire events.
Map each clickable asset to a single action so reporting isn’t split by accident.
If you need multiple landers, name exits clearly, then confirm with the media team how they will route each one.

Step-By-Step Scenarios

Use these real build patterns to speed up your next creative. Each scenario shows the exact setup you’ll repeat most days.

Scenario A: Text Link In Legal Copy

Create a text box for your legal line.
Select the legal term (such as “terms of offer”) and press the Link… button.
Paste the correct destination and add title text if you want a short tooltip.
Style the link to match brand color and weight.
Preview and test with keyboard focus to ensure accessibility.

Scenario B: Button That Opens The Main Landing Page

Draw a shape, add copy, and group the pieces into one element.
Select the group and open the Events panel.
Add Touch/Click → Google Ad > Exit ad → set the URL and a clear Metrics ID.
Preview. Click on desktop and tap on a phone to confirm hit area and tracking.

Scenario C: Full-Canvas Hotspot Over An Animated Hero

Place a Tap Area over the hero region or the entire stage.
Anchor the Tap Area on its own layer above art layers so animation runs beneath it.
Wire the exit in the Events panel and add a clear Metrics ID like Hero.
Preview and scrub the timeline to confirm the hotspot stays aligned during motion.

Export Settings That Keep Links Working

When your exits and links test fine in preview, package the creative for handoff. A clean export prevents broken clicks downstream.

Recommended Export Flow

File → Publish → pick your ad platform, zip, or local directory.
Confirm that the export includes the .html file, images, fonts, and any component assets.
Open the exported .html locally in a browser and click every linked element.
If your media team overwrites the URL at the ad level, record the current value in your handoff notes so there’s no mix-up.

Accessibility Checks For Linked Elements

Users should be able to reach links with a keyboard and a screen reader. These quick checks raise the quality bar across all placements.

Give text links clear descriptive wording. Avoid vague phrases like “Click here.”
Keep contrast high for link color and the button label.
Ensure focus rings are visible. If you style custom focus states, test with Tab and Shift+Tab.
Where tap areas cover a large region, include a visible control inside that region so users know where to act.

Troubleshooting And Edge Cases

Most link issues trace back to one of three spots: wrong target selection, a missing or empty URL, or an ad-server override. Use the checklist below when a click doesn’t land where you expect.

Symptom	Likely Cause	Quick Fix
Nothing happens on click	Event on the wrong target or no exit action	Reopen Events; set Target to the clickable layer; pick Exit ad
Opens the wrong URL	Ad-level override or stale preview cache	Check ad server settings; hard-refresh; confirm only one primary exit
Tap works on desktop, misses on phone	Hit area too small or layer sits under artwork	Use a Tap Area or group layer; move hotspot above art layers
Text link style looks off	Default styles override theme	Set link color, weight, and hover in the CSS or Text panel
Two clicks register	Duplicate events on a child and parent	Remove one handler; keep the event on the topmost clickable element
Validator flags click handling	Method doesn’t match platform policy	Switch to a standard exit or required click-tag format per platform rules

Pro Tips For Faster Builds

Once you’ve wired a few exits, you can speed up future projects by templating your setup. These small habits keep your files tidy and cut rework.

Name Layers Clearly: btn_cta, logo_click, hero_taparea. Short names save time when picking targets in the Events panel.
Use Groups For Buttons: Combine text and shape so you attach one event and move a single unit.
One Exit Per Action: Avoid stacking multiple exits on the same element unless the format requires separate landers.
Preview At Real Sizes: Test 300×250, 728×90, 320×50, or your custom breakpoints so hit areas feel right in the actual slot.

When To Use Code View

The visual tools cover most needs. If you’re building a site page or a custom widget and want full control, Code view lets you wrap an image or group with a standard anchor tag and set attributes like rel, aria-label, or target. Keep this limited to cases where a native component won’t do the job, and keep your markup tidy so teammates can follow along.

Recap You Can Apply Right Now

Inline copy that points to a policy or help page → use a text link.
A button, logo, or product panel that should leave the ad → attach a Touch/Click event with the Exit ad action and set the URL once.
A large, forgiving hotspot over motion graphics → place a Tap Area and wire the same exit action.
Confirm ad-server rules for exits or click-tags before export to avoid a second build.

FAQ-Free By Design

This page delivers the steps, tables, and checks you need without a separate FAQ. Scan the comparison near the top, grab the scenario that fits, wire your exit, and ship with confidence.