On Submit Button Tracking

On Submit Button Click Tracking

This captures the form as the user presses 'submit', and therefore does not require you to redirect users to a Thank you page.

You'll copy a small piece of code, fill in a few blanks, and paste it into GTM as a custom HTML.

📘
NOTE
Using an on submit trigger can cause duplication event captures if users trigger the submit multiple times. If you find this is an issue, we would recommend switching to the Thank You page trigger method.

What you'll need before you start

Requirement	Why
The Ruler tracking script already live on your site	This form tracking sends data into Ruler, so the main Ruler tag must already be installed first.
Access to your Google Tag Manager (GTM) account	This is where the tracking code is added.
The labels shown above your form fields (e.g. "Email", "Phone", "Name")	The code matches your fields by the text label your visitors see.

If you're not sure whether the Ruler script is live, your Ruler contact can confirm this for you. You can also read more about how tracking is installed at ruler-documentation.readme.io.

Step 1 - Find your field labels

Open your contact form on your live website and note the exact wording of the labels above each field you want to capture. For example:

Email
Phone
Name

👍
TIP
Write them down exactly as they appear, including capital letters. If your form says "Email Address" rather than "Email", use "Email Address". These need to match word-for-word.

The two most important fields to capture are email and phone, as these are how Ruler matches a submission back to a real customer. Email is the priority.

Step 2 - Copy the tracking code

Copy the code below exactly as it is. You'll have to edit the highlighted section in the next step - everything else stays untouched.

<script type="text/javascript">
(function () {
    // ▼ ONLY EDIT THIS SECTION ▼
    var LABELS = {
        email: "Email",   // the label above your email field
        phone: "Phone",   // the label above your phone field
        name:  "Name"     // the label above your name field
    };
    // ▲ ONLY EDIT THIS SECTION ▲

    function getVal(labelText) {
        var labels = document.querySelectorAll("label");
        for (var i = 0; i < labels.length; i++) {
            if (labels[i].textContent.replace("*", "").trim().toLowerCase() === labelText.toLowerCase()) {
                var el = document.getElementById(labels[i].getAttribute("for"));
                if (el) return el.value.trim();
            }
        }
        return "";
    }

    function sendRulerConversion() {
        try {
            if (typeof RulerAnalyticsVisitorId === "undefined" || !RulerAnalyticsVisitorId || typeof RulerAnalytics === "undefined") {
                return;
            }
            var RAConv = {
                Name:  getVal(LABELS.name),
                Email: getVal(LABELS.email),
                Phone: getVal(LABELS.phone)
            };
            if (!RAConv.Email && !RAConv.Phone) return;
            RulerAnalytics.trackConversionAsync(RAConv, "", "", 500);
        } catch (error) {}
    }

    document.addEventListener("click", function (e) {
        var btn = e.target.closest('[data-hook="submit-button"]');
        if (btn) sendRulerConversion();
    }, true);
})();
</script>

Step 3 - Fill in your field labels

In the copied code, find the section marked ONLY EDIT THIS SECTION and replace the words inside the quote marks with your own labels from Step 1.

For example, if your email field label is "Email Address", change:

email: "Email",

to:

email: "Email Address",

Leave everything else exactly as it is.

⚠️
IMPORTANT
Only change the text inside the quote marks. Don't remove the quote marks, commas, or any other part of the code.

Step 4 - Add the code to Google Tag Manager

Step	What to do
1	In GTM, go to Tags and click New.
2	Click Tag Configuration and choose Custom HTML.
3	Paste in your edited code from Step 3 with your updated Labels.
4	Click Triggering and choose All Pages.
5	Give the tag a clear name (e.g. "Ruler – Contact Form Tracking") and click Save.

📘
NOTE
Make sure your main Ruler tag is set to load before this one. If you're unsure, your Ruler contact can help check the tag order.

Step 5 - Test before going live

GTM has a built-in Preview mode that lets you test safely before publishing.

Step	What to do
1	In GTM, click Preview and enter your website address.
2	On your site, fill in the contact form using a test email you'll recognise (e.g. your own).
3	Submit the form.
4	Check in Ruler that your test submission has fired. https://ruler-documentation.readme.io/docs/testing-your-form-tracking-setup

If your test lead appears, everything is working. Remember to Submit and Publish to make your changes live.

If it doesn't appear, double-check your field labels in Step 3 match your form exactly, then test again.

Good to know

Point	What it means for you
If you rename a form field label	Update the label in the code (Step 3) to match, or tracking for that field will stop. Republishing your site alone is fine, only renaming labels affects this.
Tracking fires when Submit is clicked	This means a submission is recorded even if the visitor misses a required field and the form doesn't fully go through. Numbers in Ruler may therefore run slightly higher than your inbox or CRM. This is normal.
If you need Ruler to match your inbox exactly	A "thank you page" tracking method is more precise. Speak to your Ruler contact, who can advise on this setup.

Need help?

If you get stuck at any point, reach out to your Ruler contact or email [email protected] with:

The web address of the page with your form
The field labels you used
A screenshot of your GTM tag

For more on form tracking methods, see the form tracking documentation at ruler-documentation.readme.io.