ARTICLE AD BOX
I'm working on a GTM implementation to track successful login and account
registration conversions on a client's customer peprod portal.
One important constraint I discovered after joining the project: the same **
GA4 measurement ID is used across both the prod
environment and the preprod environment**, including the customer-facing
login area. This was set up before I came on board, and I currently cannot
change it without impacting live data collection.
This means any test I run in GTM Preview mode on preprod pollutes the
production GA4 data stream, and I can't easily isolate my test events
from real user events.
I've set up a Click trigger (by element ID or CSS class) on the form's
submit button. The issue: GTM fires the tag whether the form validates **
or not**. Any click on the button counts as a conversion, even when the
user entered wrong credentials or left required fields empty.
Example trigger setup:
- Trigger type: Click – All Elements
- Filter: Click ID equals `loginFormSubmitButton`
(or Click Classes contains `btn-login`)
This fires on every button click, regardless of the actual form
validation outcome.
What I've tried
1. GTM built-in "Form Submission" trigger with "Check Validation" enabled
-> GTM does not pick up the `gtm.formSubmit` event on this form
(likely an AJAX form, or a JS framework intercepting the native
submit event before it reaches the document).
2. Element Visibility trigger looking for a post-login
success message/DOM node
-> Hard to test reliably in preprod since a successful login
redirects to a protected area I can't instrument cleanly.
3. Listening for URL change after successful login
-> The redirect does change the URL, but the pattern isn't
predictable enough to use a pageview trigger safely without
false positives.
Environment
- Same GA4 ID on preprod and prod (set up before my involvement,
cannot be changed immediately)
- Forms appear to use AJAX - no full page reload on submit
- No "thank you" page after login or registration
- No direct access to the site's source code or backend developers
to add a `dataLayer.push()` inside the AJAX success callback
Question
What is the most reliable GTM-only approach to track only successful
login/registration form submissions when:
- The native `submit` event is not propagated to `document` (AJAX form)
- There is no thank-you page or distinct success URL
- I cannot add server-side or developer-side `dataLayer` code
- I cannot use a separate GA4 property for preprod testing
Is intercepting the AJAX response (e.g. via a Custom HTML tag overriding
`XMLHttpRequest` or `fetch`) a viable approach to detect a 200/success
response and push a `dataLayer` event only on actual authentication success?
Any help appreciated guys!
