Thank You Page Form Tracking

Overview

If your form setup is more bespoke, or you need to capture specific information from a form submission, manual thank-you page tracking may be the best option.

This method allows you to send specific form data to Ruler when a visitor reaches a designated thank-you page after completing a form.

Manual tracking works by creating a JavaScript object containing the information you want to send to Ruler and then passing that object to the Ruler tracking function.

Good to know: Thank-you page tracking will typically require a developer to review and implement the required code, particularly where form data needs to be passed from the original form submission to the thank-you page.

When to Use Thank You Page Tracking

Thank-you page tracking can be useful when you want to track a successful form submission or ecommerce checkout.

The tracking code should only be added to pages that represent a successful conversion.

When implemented correctly, Ruler can associate the conversion with the visitor's marketing journey and identify the source of traffic that contributed to the conversion.

Before You Start

Before adding the tracking code to your thank-you page, ensure that the information you want to send to Ruler is available on the page.

This information will typically be made available in one of the following ways:

• Passed into the thank-you page URL.
• Retrieved from your backend or database.
• Passed through your website's session or application logic.
• Made available to the page through another form or CRM integration.

For example,your backend may populate the required information when rendering the thank-you page.

Important: If the required form data is not available on the thank-you page, the Ruler tracking script will not be able to send that information as part of the conversion.

Adding the Tracking Code

Add the following code to the thank-you page you want to use for conversion tracking.

The example below is for documentation purposes only. You will need to replace the placeholder values with variables appropriate to your website and form setup.

<script type="text/javascript">
  window.addEventListener('load', function () {

    function RulerThankYouPageTracking() {
      try {
        if (!window.RulerAnalyticsVisitorId) {
          throw new Error("Ruler Analytics is not set on the page");
        }

        var RAConv = {
          name: "PopulateWithVariable",
          email: "PopulateWithVariable"
        };

        RulerAnalytics.trackConversionAsync(RAConv, "", "", 500);

      } catch (error) {
        setTimeout(function () {
          console.error(error);
          RulerThankYouPageTracking();
        }, 300);
      }
    }

    RulerThankYouPageTracking();

  });
</script>

What Needs to Be Updated?

In the example above, the following values are placeholders:

var RAConv = {
  name: "PopulateWithVariable",
  email: "PopulateWithVariable"
};

You should replace these with the variables containing the actual information submitted by the visitor.

For example:

var RAConv = {
  name: formName,
  email: formEmail,
  phone: formPhone
};

The fields you include are entirely dependent on the information available from your form and the data you want to send to Ruler.

For more information about structuring your RAConv payload, see our guide to Manual Form Tracking.

Populating the Script

The RAConv object can be populated using different methods depending on how your website is built.

The examples below demonstrate some common approaches.

Vanilla JavaScript

If the form data is available in an HTML element, you can retrieve it using standard JavaScript:

var RAConv = {
  email: document.getElementById('PopulateWithVariable').value,
  phone: document.getElementsByClassName('PopulateWithVariable1')[0].value
};

Replace the placeholder IDs and class names with those used by your website.

jQuery

If your website uses jQuery, you can retrieve form values using selectors:

var RAConv = {
  email: $('#PopulateWithVariable').val(),
  phone: $('.PopulateWithVariable1').first().val()
};

Again, replace the placeholder selectors with the appropriate selectors for your website.

PHP

If your website uses PHP, your backend can pass values into the JavaScript object when the thank-you page is generated:

<script type="text/javascript">
  var RAConv = {
    email: <?php echo json_encode($PopulateWithVariable); ?>,
    phone: <?php echo json_encode($PopulateWithVariable1); ?>
  };
</script>

Using json_encode() helps ensure that values are safely formatted when being passed from PHP into JavaScript.

Important: Only Track Successful Conversions

Thank-you page tracking should only be triggered when a conversion has successfully completed.

For example, if a form redirects to a thank-you page only after successful submission, the thank-you page is an appropriate place to trigger the Ruler conversion.

Avoid placing the tracking code on:

• Standard website pages
• Form pages where the submission has not yet occurred
• Error pages
• Pages that can be accessed without completing the conversion

Otherwise, Ruler may record conversions that did not actually take place.

Testing Your Setup

Once implemented, test the complete form journey:

1. Visit the form page.
2. Complete and submit the form.
3. Confirm that the submission is successful.
4. Confirm that you are redirected to the correct thank-you page.
5. Check that the required form data is available on the page.
6. Confirm that the Ruler conversion request is sent successfully.

We recommend testing both the form submission and the resulting Ruler conversion to ensure the correct information is being passed.

Need Help?

Thank-you page tracking can require custom development depending on your website and form setup.

If you are unsure how to make your form data available on the thank-you page, or need help implementing the Ruler tracking code, please contact a member of the Ruler team.