Working with the ProspectEye dynamic tracking API

ProspectEye tracks all forms that are available in the DOM at page load. If you have a dynamic page where forms and / or inputs are inserted into the DOM after window.onLoad you can use our dynamic tracking API to make them trackable in ProspectEye. This is a short guide on how to accomplish that.

A fair warning

You should have a basic understanding of the DOM and of Javascript to be able to implement the dynamic tracking API properly. The examples given here are by now means exhaustive and you need to make sure that your Javascript will run on all platform and in all browsers that your site is intended for.

We will try to supply ample warnings where such are needed, but the responsibility of the actual implementation is yours.

Prerequisites

To use the dynamic tracking API you need two things:

The ProspectEye script implemented on your website.
Permissions to add Javascript to your site

HTML

Let's assume that you have a form like the one below, which has been added to the DOM in some asyncronous way.

<form name="formPricelist" id="formPricelist">
	<input type="email" id="emailAddress" value="[email protected]">
	<input type="submit" name="submitPricelist" value="OK">
</form>

To be able to track this form you need to know when the user has completed it, normally this can be done by listening for the form.submit event.

Javascript

Here's the bit that you need to be careful with - the actual event listeners. These work differently across browsers and the example below will for example not work in IE8 or lower. There are ways to solve this, jQuery is a solid option for example, but you need to make sure that you're code does that you intend it to, where you need it to.

An eventlistener for the form above could look like this:

// Get a reference to the form in question
var pricelistForm = document.getElementById('formPricelist');

// Add an eventlistener, listening for a submit call on the form
pricelistForm.addEventListener('submit', function(e) {
  var emailInput = pricelistForm.querySelector('#emailAddress');
  callProspectEye(e.currentTarget.name, emailInput.value)
});

function callProspectEye(formName, email) {
  // Specify the settings we want to send to the tracker.
  var jsonSettings = {
    url: document.location.href,
    pagename: 'Pricelist Request',
    pedata: {
      type: 'F',
      email: email,
      form_name: formName
    }
  };  
  
  // Make sure the ProspectEye has been loaded
  if ( !!ProspectEye && !!ProspectEye.callTracker ) {
    return ProspectEye.callTracker(
      jsonSettings,
      ProspectEye.kPEAppendScript,
      true
    );
  }
                                   
  return false;
}

And that's it. When a user clicks the submit button, or submits the form in any other way, our function is called and the ProspectEye.callTracker method is invoked.

More info about the options available to callTracker can be found over at https://github.com/ProspectEye/ProspectEye-Tracker-API.

DO NOT...

A common mistake is to just inline the callTracker code, hence executing it on page load instead of on a given event. In other words, unless you know what you're doing you're code should not look like this:

<form name="formPricelist" id="formPricelist">
	<input id="emailAdress">
	<submit name="submitPricelist" value="OK">
</form>

<script>
ProspectEye.callTracker(
	{
      	url: document.location.href,
    	pagename: 'Pricelist Request',
    	pedata: {
      		type: 'F',
	      	email: email,
    		form_name: formName
    	}
    },
	ProspectEye.kPEAppendScript,
    true
)
</script>

All this will accomplish is, at best, making a call to the ProspectEye tracker without any useful information.