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 APSIS Lead. The same API can be used to track local clicks that does not render a page reload, a common usage pattern in single page applications. This is a short guide on how to accomplish that.

Near the bottom of this page you can find two example implementations, one for tracking forms and one for tracking clicks in a SPA.

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 no means exhaustive and you need to make sure that your Javascript will run on all platform and in all browsers that your site is targeted at.

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

To use the dynamic tracking API you need two things:

• The APSIS Lead script implemented on your website.
• Permissions to add Javascript to your site

Let's assume that you have a form like the one below, which has been added to the DOM in some asynchronous 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, this would normally be done by listening for the form.submit event.

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 your code does what you intend it to do, where you intend 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 at https://github.com/ProspectEye/ApsisLead-Tracker-API/wiki.

We have created two code examples:

• Track Forms
• Track local clicks (SPA style)

A common mistake is to just inline the callTracker code, hence executing it at page load instead of at a given event. In other words, unless you know what you're doing your 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 APSIS Lead tracker without any useful information.