Manual Form
Manual Form Tracking
If your form set up is more bespoke, or you are wanting to capture specific data from your forms, then manual form tracking may be the better option for you. Overall, Manual Tracking works by having a JSON object populated by the client through JavaScript, which is then passed through to Ruler by calling some functions (We will go through this further down).
We have several Manual Tracking options available, all of these methods share common features such as the JSON object:
<script type="text/javascript">
var RulerAnalyticsPayload = {
action: 'convert',
variable: 'PopulateWithVariable',
variable1: 'PopulateWithVariable'
};
</script>
Variable - This should be the variable you wish to pull from the form on site, such as Email Address, Name, Phone Number etc. You can choose which variables you wish to populate here.
'Populate with Variable' - Please note this requires you to use your websites language to pull the variables from the form submission on your website. Leaving this blank will not pull through your submitted values, examples below.
The RulerAnalyticsPayload object is fully customisable, we just require that the action: ‘convert’ always be available within the object, the object can be populated with a number of methods, below are just some of the common approaches:
Vanilla JavaScript
<script type="text/javascript">
var RulerAnalyticsPayload = {
action: 'convert',
Variable: document.getElementById(‘PopulateWithVariable’).value,
variable1: document.getElementsByClassName(‘PopulateWithVariable1’)[0].value
};
</script>
JQuery
<script type="text/javascript">
var RulerAnalyticsPayload = {
action: 'convert',
Variable: $(‘#PopulateWithVariable’).value,
variable1: $(‘.PopulateWithVariable1’)[0].value
};
</script>
PHP
<script type="text/javascript">
var RulerAnalyticsPayload = {
action: 'convert',
Variable: <?php echo(PopulateWithVariable) ?>,
variable1: <?php echo(PopulateWithVariable1) ?>
};
</script>
If you find you have an input that only has the class attribute we recommend that you print the class array that is returned so that you can make sure you are accessing the correct index of the array for the input. In the example we are accessing index or position 0 of the array, which relates to the first class within the list. There are many other ways in which you can get the value from your elements, we recommend you look up the methods via google or contact us for assistance.
Thank You Page Tracking
This tag should only be on the thank you pages that you wish to track a conversion on whether it be a lead, sale or other action. This tag will allow you to match your conversion to the exact source of traffic.
Before you add this tag to your thank you page, it is important that you have checked that the information you are wanting to track is available on the thank you page, this is normal done via passing the data in the URL when redirecting to the thank you page or by pulling through the data from a backend such as PHP.
To integrate the tag, copy and paste the following code to the thank you page, and ensure you populate the fields you are tracking through either passing the information into the url or using other methods like populating through PHP.
Below is an example of how the final thank you page tracking code would look:
<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: "PopulateWithVariable",
variable1: "PopulateWithVariable",
};
RulerAnalytics.trackConversionAsync(RulerAnalyticsPayload,"","",500);
} catch (error) {
setTimeout(function () {
console.error(error);
RulerThankYouPageTracking();
}, 300);
}
}
RulerThankYouPageTracking();
});
</script>
Submit Button Tracking
With Submit button tracking, you can place some script on the page your form submits, to scrape the variables submitted.
This tag should only be placed on the page where you want to track a specific form. This works by targeting the Submit button of the specified form and on click will fire the track conversion to Ruler.
There are several ways in which you can target the click of the submit, any of the methods will work with our code, in the example below we are targeting a button with a class of submit-example and then pointing at the array position of 0 for the first class name in the array list.
We also have two events being bound to the submit button, one is for general clicks, and the other is for mobile and tablet touches.
<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: "PopulateWithVariable",
variable1: "PopulateWithVariable",
};
RulerAnalytics.trackConversionAsync(RulerAnalyticsPayload,"","",500);
} catch (error) {
console.error(error);
}
}
// Event Listener for clicks
document.getElementsByClassName('submit-example')[0].addEventListener('click', RulerManualSubmitClickTracking);
});
</script>
if you have validation on the form you are wanting to Manual Track via the Submit Button Tracking, then it is important that you add the above code inside the acceptance part of your validation. However, if your validation is placed outside of the page where the form is hosted, then you might need to pass over the form values or place a boolean on the page that can be used as part of an if statement to run the Submit Button Tracking only on acceptance.
If you require any assistance or have any questions please contact our Support Team
Updated 4 months ago