0

How I Track “Thank You” Messages After Form Submissions Using GTM + GA4 (Real Setup Guide)

If you’ve ever worked on a service website, you already know this problem:

A user fills out your contact form, hits submit… and then what?

You hope the message went through, the user sees the success confirmation, and you get the lead in your inbox. But in analytics, it’s often messy. Sometimes the form fires an event even when it fails. Sometimes the page doesn’t reload. Sometimes the form is embedded from another tool. Sometimes there’s no “thank you page,” just a success message like:

“Thank you for your message. We will be in touch shortly.”

This is a common situation in real businesses, especially local services like clinics, agencies, and consultants. I’ve seen it many times while working on local lead generation setups, including for healthcare brands like podiatry in Perth.

This article is a practical guide on how to track those success messages properly using Google Tag Manager (GTM) and Google Analytics 4 (GA4), without creating fake conversions or counting broken submissions.

Why tracking form submissions is harder than it looks

A lot of people track form submissions using one of these quick methods:

Track button click

Track form submit trigger

Track “page_view” on a thank you page

Track a custom JavaScript event

All of these can work, but only in the right situation.

The problem with button click tracking

Tracking a click on the “Submit” button is the easiest method, but it’s not reliable.

A user can click submit and:

the form can fail validation

the internet connection can drop

the server can throw an error

the user can close the tab immediately

That click does not mean the lead was received.

The problem with “Form Submission” triggers in GTM

GTM has a built-in trigger called Form Submission, but it’s not always accurate, especially with:

AJAX forms (most modern forms)

custom JavaScript forms

embedded forms (like CRM tools)

single-page apps

Sometimes it fires too early. Sometimes it never fires.

The cleanest method (when available): Thank you page

If the website redirects to something like:

/thank-you/

then tracking is easy. You fire a conversion on that page view.

But many websites don’t use a separate thank you page. Instead, they show a message on the same page.

That’s where Element Visibility trigger becomes super useful.

The best approach for AJAX forms: track the success message visibility

If your form shows a success message like:

“Thank you for your message. We will be in touch shortly.”

Then the best tracking method is:

✅ Trigger an event when that success message becomes visible on screen.

This is exactly what Element Visibility in GTM is designed for.

Step-by-step setup: Element Visibility Trigger in GTM Step 1: Find the success message element on your website

Open your form page in Chrome, submit a test form (use a test email), and wait for the success message to appear.

Now right-click on the message and click Inspect.

You’re looking for something like:

Thank you for your message. We will be in touch shortly.

or:

Thank you for your message. We will be in touch shortly.

The key is: this element must exist in the DOM when it appears.

Sometimes the message is hidden first and then shown using CSS or JavaScript. That’s fine.

Step 2: Choose the best selector (ID is best)

If your element has an id, that’s perfect.

Example:

#form-success

If it doesn’t have an ID, use a stable class:

Example:

.success-message

Try to avoid complicated selectors like:

div:nth-child(3) > p > span

Those break easily if the page layout changes.

Step 3: Create the Element Visibility trigger

In GTM:

Triggers → New → Element Visibility

Set:

Selection Method: CSS Selector

Element Selector: #form-success (or your class)

When to fire this trigger:

Once per page (recommended)

Minimum Percent Visible: 1% is enough

Observe DOM changes: ✅ Yes (important for AJAX)

This “Observe DOM changes” option is a lifesaver. Many forms inject the success message dynamically, so GTM needs to watch for changes.

Step-by-step setup: GA4 Event Tag in GTM

Now that you have a trigger, you need to send an event to GA4.

Step 4: Create a GA4 Event tag

In GTM:

Tags → New → Google Analytics: GA4 Event

Set:

Configuration Tag: your GA4 config tag

Event Name: generate_lead (recommended) or form_submit_success

For healthcare and service websites, generate_lead is a standard event name in GA4.

Add event parameters (optional but useful):

form_name → contact_form

page_location → {{Page URL}}

page_path → {{Page Path}}

Then choose your trigger: the Element Visibility trigger you created.

Testing it properly (don’t skip this) Step 5: Use GTM Preview mode

Click Preview in GTM.

Submit the form again.

You should see:

Element Visibility trigger fired

GA4 event tag fired

If the tag does not fire, check:

is the selector correct?

does the success message appear inside an iframe?

does the message exist in DOM or is it just a popup?

Step 6: Confirm in GA4 DebugView

Open GA4 → Admin → DebugView

You should see your event come in live.

If you don’t see it:

confirm GA4 is in debug mode

confirm your GA4 measurement ID is correct

confirm you’re not blocked by ad blockers

Common issues and how to fix them Issue 1: The success message is inside an iframe

This happens when forms are embedded from:

third-party booking tools

CRM widgets

external scripts

GTM can’t easily “see” inside an iframe unless you control the iframe content.

Fix options:

Track the form tool’s built-in events (if available)

Use a redirect to a thank you page instead

Fire an event from inside the iframe using postMessage (advanced)

If you want, I can guide you on the iframe method too, but it depends on the form provider.

Issue 2: The message appears, but the trigger fires multiple times

If the element visibility trigger fires more than once, it can inflate conversions.

Fix:

Set trigger to Once per page

Increase “Minimum Percent Visible”

Ensure the element isn’t repeatedly hidden/shown

Also check if your page is a single-page app where route changes happen without reload.

Issue 3: The message text changes slightly

Maybe your message changes to:

“Thanks! We’ll contact you soon.”

If you track by CSS selector, you don’t care about text changes, which is good.

But if the developer changes the HTML structure, your selector may break.

Fix:

Ask the developer to add a stable ID like id="form-success"

Use a consistent wrapper element for messages

Issue 4: Form is successful but user doesn’t see the message

This can happen if the message appears below the fold, and the user doesn’t scroll.

Element visibility trigger fires only when it becomes visible in the viewport.

Fix options:

If the message appears but not in view, Element Visibility won’t fire

You can instead track DOM insertion (custom event)

Or auto-scroll to the message after submission (UX improvement)

For most contact forms, the success message appears near the submit button, so it’s usually visible.

Turning it into a conversion in GA4

Once your event is working, make it a conversion.

In GA4:

Admin → Conversions → New conversion event

Enter:

generate_lead

Done.

Now GA4 will treat it as a conversion.

Bonus: Make the tracking more meaningful (source, campaign, and quality)

Tracking “form success” is good. But to improve marketing, you want to know:

Which channel brought the lead?

Which campaign?

Which landing page?

What service they were interested in?

This matters a lot in competitive local services, including podiatry in Perth, because the cost per lead can vary massively between:

Google Search

Meta Ads

Organic SEO

Referrals

What to capture (simple version)

You can store these as hidden fields in the form:

utm_source

utm_medium

utm_campaign

utm_content

utm_term

Then pass those values to your CRM or email.

Even if you don’t pass them to GA4, having them in your lead emails is incredibly helpful.

A realistic example (clinic lead tracking)

Let’s say you run campaigns for a clinic and your main goal is lead generation.

Your form event is now accurate.

Now you can build reports like:

Conversions by landing page

Conversions by source/medium

Conversions by campaign

This helps you answer questions like:

Are “heel pain” pages converting better than “bunion” pages?

Is Google Ads bringing high-intent leads or just traffic?

Is SEO content driving real inquiries?

For a local clinic like podiatry in Perth, this is where tracking becomes real business value.

What if you want even cleaner tracking?

If you want the most accurate tracking possible, the ideal setup is:

Element Visibility success message event (front-end)

Server-side confirmation (back-end)

CRM record created event (actual lead stored)

But in most small to medium websites, step 1 is already a huge improvement.

Final checklist (quick and practical)

Before publishing, make sure:

Your success message has a stable selector (id preferred)

Element Visibility trigger uses:

CSS selector

Once per page

Observe DOM changes enabled

GA4 event tag fires only on success

Event appears in GA4 DebugView

Event is marked as a conversion (if needed)

Closing thoughts

Tracking form submissions is one of those things that sounds easy until you do it properly.

If you track clicks, you’ll overcount. If you track form submit triggers blindly, you’ll miss AJAX forms. If you track thank you page views, you’ll be perfect… but only if the site redirects.

For modern websites where the success message appears dynamically, Element Visibility is one of the best and cleanest ways to track real form success.

And if you’re doing lead generation for local services like podiatry in Perth, this kind of tracking is not just “nice to have.” It’s the difference between guessing and knowing what’s working.


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí