Track form submissions with data-track-event

Form submissions on Docly sites have been invisible to GA4 and Google Ads. A new attribute on the submit scripts sends a real analytics event, so a submitted form can finally be counted as a conversion.

If you run campaigns against a Docly site, this one has probably been costing you money without showing up anywhere: form submissions have not been measurable.

Both submit scripts - /jquery.submitform.js and /vanilla.submitform.js - mark a completed submission by updating the page URL with ?submit-success or ?submit-error. The marker is set with history.pushState(), and that is the catch: pushState fires no event. GA4 does not count a page view for it unless you write a listener yourself, and Google Ads never sees it at all. A form that only sets the marker is invisible to your campaigns.

Add data-track-event to send a real analytics event alongside the marker:

<form id="ContactForm" data-track-event>

The event goes to gtag() if the page has it, otherwise to dataLayer for Google Tag Manager. It is never sent to both - on a page where Tag Manager loads gtag.js, that would count the same submission twice. Either way the form's id is sent as form_id, so you can tell a contact form apart from a signup form in your reports.

You can name the event yourself:

Markup	Successful submission	Failed submission
no attribute	no event	no event
`data-track-event`	`docly_form_submit`	`docly_form_error`
`data-track-event="generate_lead"`	`generate_lead`	`generate_lead_error`

Only mark the success event as a conversion. A failed submission is not a lead, and ?submit-error must never be counted as one.

Pick the name to match your setup: generate_lead is what Google Ads normally expects for lead conversions, while docly_form_submit stays clear of GA4's own built-in form_submit event from enhanced measurement.

Forms that redirect with data-message-url are tracked too - the event is sent before the browser navigates away, so a thank-you page does not hide the submission from your reports.

That used to be a race. A redirect can tear down the page before the browser has finished sending the request, and the event simply disappears - exactly on the thank-you-page setups where the conversion matters most. The gtag() call now sets transport_type: "beacon", which hands the event to navigator.sendBeacon(); the browser completes it even after the page is gone.

The Tag Manager fallback has no such guarantee. A dataLayer.push() is only a queue entry - whether it reaches Google depends on the tag your container fires, and it can still be lost when data-message-url redirects immediately. If you redirect after submitting and want the count to be reliable, load gtag.js on the page so the beacon path is used.

Why it is opt-in

Tracking is off unless you ask for it. Sites differ in what analytics they already run, and some have their own form tracking or a Tag Manager container with broad triggers. Sending events to every site by default would change what those sites measure without anyone asking for it. One attribute is a small price for not rewriting your numbers behind your back.

Not using Google analytics?

The script also dispatches a DOM event on document, so you can hook up anything else:

document.addEventListener('docly:form-submit', function (e) {
    // e.detail.formId   - the form's id attribute
    // e.detail.success  - true or false
    // e.detail.event    - the event name that was sent
});

A missing or broken analytics library cannot interrupt a submission - the tracking call is isolated, and a failure is logged to the console and otherwise ignored.

Submit the form once on the live site and check GA4 under Realtime -> Events; the event should appear within seconds. Then mark it as a key event in GA4 and import it as a conversion in Google Ads.

Full documentation of the attribute and the rest of the form attributes: Sending forms by e-mail.