JotForm

There are two methods in which we can integrate with Jotform.

Thank You Page

It is possible to set up JotForm to send the form data across to your thank you page, please refer to JotForm Help - Thank You Page for instructions on how to do this process.

Once, you have set completed the setup process for passing your form data to your thank you page through JotForm, it is now time to set up Ruler Thank You Page tracking, this can be done through go to Ruler Analytics - Thank You Tracking and implementing the PHP JSON payload method.

Your final code should look like below, making sure to replace the variable properties with the data that you've passed through to your thank you page

<script type="text/javascript">
   window.addEventListener('load',function () {
       function RulerThankYouPageTracking() {
           try {
               if (!RulerAnalyticsVisitorId)
                   throw "Ruler Analytics is not set on the page";
 
               var RulerAnalyticsPayload = {
                   action: "convert",
                   variable: <?php echo(PopulateWithVariable) ?>,
                   variable1: <?php echo(PopulateWithVariable1) ?>,
               };
 
               RulerAnalytics.trackConversion(RulerAnalyticsPayload,"","",500);
           } catch (error) {
               setTimeout(function () {
                   console.error(error);
                   RulerThankYouPageTracking();
               }, 300);
           }
       }
   });
</script>

Manually

This require you to download the original code for the form and embedding it into your website, please refer to JotForm Help - Download Form.

Once you have the original code on your site, its very straight forward from this point, we recommend that you follow this guide Ruler Analytics - Submit Button Tracking, we would recommend using either the JavaScript or jQuery method.

Your final code should look like the below, we have opted to go for the Vanilla JavaScript example, but relatively speaking any language that you can grab the values of the inputs from will work.

🚧
Don't forget to change the event listener targets, in our example we have them both set to submit-example which is a class name, so we have had to make sure we point at the correct position within the array of classes thats returned, in this example we are returning position 0, meaning that the first submit-example in the list will be used to bind the event listeners.

<script type="text/javascript">
    window.addEventListener('load',function(){
        function RulerManualSubmitClickTracking() {
            try {
                if (!RulerAnalyticsVisitorId)
                    throw "Ruler Analytics is not set on the page";
                
                var RulerAnalyticsPayload = {
                  action: 'convert',
                  Variable: document.getElementById(‘PopulateWithVariable’).value,
                  variable1: document.getElementsByClassName(‘PopulateWithVariable1’)[0].value
                };
                
                RulerAnalytics.trackConversion(RulerAnalyticsPayload,"","",500);
            } catch (error) {
                console.error(error);
            }
        }
        
        // Event Listener for clicks
        document.getElementsByClassName('submit-example')[0].addEventListener('click', RulerManualSubmitClickTracking);
        //Event Listener for mobile touches
        document.getElementsByClassName('submit-example')[0].addEventListener('touchend', RulerManualSubmitClickTracking);
    });
</script>

📘
If you require any assistance or have any questions please contact our Support Team